Home/ Questions/Q 7098051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:00:32+00:00

I am trying to show the user’s location obtained using geolocation API on google

  • 0

I am trying to show the user’s location obtained using geolocation API on google map.but the map is not loading.What am i doing wrong ?

$(document).ready(function(){
    trackLocation()
})

//Track the user's location with high accuracy
function trackLocation(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(
            successFunction,
            errorFunction,
            {enableHighAccuracy : true,
             timeout:1000 * 10 * 100,
             maximumAge:0
            }
        )
    }
}

function successFunction(position){
    plotMap(position)  
}

function errorFunction(error){
    alert(error)
}

function plotMap(position){
    var location = new  google.maps.LatLng(position.coords.latitude,
            position.coords.longitude)
    alert('created locaction')
    var plotOptions = {
        center: location,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    alert('created options')
    var map = new google.maps.Map(document.getElementById('map_canvas'),plotOptions)
    alert('created map')
}

and the html is 

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src="{{STATIC_URL}}jquery.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}javascript_posted_above.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
    Hi
    <div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at this jsFiddle. The only differences between this and yours are the removal of the static js references and added the CSS. Without that CSS the map doesn’t appear to display. I have never experienced this problem when using the Maps Api, perhaps I just added this CSS without thinking.

    The CSS was taken from the HelloWorld tutorial on the docs.

    • 0