CODEWITHSUNDEEP
javascriptgoogle-mapsgeolocation
Bunny Rabbit
Bunny Rabbit

Reputation: 8411

Not able to load google map

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>

Upvotes: 0

Views: 319

Answers (4)

Gabriel Hautclocq
Gabriel Hautclocq

Reputation: 3320

I was loading the Google Maps API like this:

function mapsjsready()
{
    // mapsjs ready!
}
$(document).ready( function() {
    var mapsjs = document.createElement( 'script' );
    mapsjs.type    = "text/javascript";
    mapsjs.async   = true;
    mapsjs.src     = "https://maps.googleapis.com/maps/api/js?sensor=false";
    mapsjs.id      = "mapsjs";
    mapsjs.onload = mapsjsready;
    // Only for IE 6 and 7
    mapsjs.onreadystatechange = function()
    {
        if( this.readyState == 'complete' )
        {
            mapsjsready();
        }
    }
    document.body.appendChild( mapsjs );
});

But it suddenly stopped working.

I found that adding the callback parameter somehow solved the problem :

function mapsjsready()
{
    // mapsjs ready!
}
function mapsjsloaded()
{
    // mapsjs loaded!
}
$(document).ready( function() {
    var mapsjs = document.createElement( 'script' );
    mapsjs.type    = "text/javascript";
    mapsjs.async   = true;
    mapsjs.src     = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=mapsjsloaded";
    mapsjs.id      = "mapsjs";
    mapsjs.onload = mapsjsready;
    // Only for IE 6 and 7
    mapsjs.onreadystatechange = function()
    {
        if( this.readyState == 'complete' )
        {
            mapsjsready();
        }
    }
    document.body.appendChild( mapsjs );
});

I don't understand why, but adding the callback parameter solved my problem.

Upvotes: 0

enkdr
enkdr

Reputation: 363

Have you tried calling googlemap.js before your .js in the html?

Upvotes: 1

Thomas Nadin
Thomas Nadin

Reputation: 1207

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.

Upvotes: 1

Lucas van Egeraat
Lucas van Egeraat

Reputation: 617

here is my fiddle, I changed a few things:

  • First off all, I changed Alert to Console.log, which is important since it is a non-obstructive way of logging, alert stops script excecution and is not reliable.
  • I removed the google map script tag, and dynamically added it to the page in the document.ready handler, I also added a callback function "&callback=trackLocation", the JSON-P loaded script from Google will run the function with that name, when its executed.
  • I attached the function trackLocation(), directly to the window object, so it would be found by the script loaded from Google.
  • I changed the height of your map_canvas to 500px, instead of 100%, there seems to be an issue stretching a map. My first google search gave me: http://forum.jquery.com/topic/google-map-not-stretching-properly-when-width-set-to-100 you could do more research with that.

Good luck with your map!

Upvotes: 1

Related Questions