Google map error: a is null

Question

I have a program that I want to use google maps for. The problem is I get an error that says a is null where a is a var used in the google map api. Here is how I call my google map:

//Creates a new center location for the google map
    var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);

    //The options for the google map
    var myOptions = {
        zoom: 7,
        maxZoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Creates the new map
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

And here is what my HTML tag looks like:

<div id = "map_canvas"></div>

I get the lat and lng on page load through the url. These values are passed in correctly so I know that is not the problem. I think that it has to do with the var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); not being correct. Any suggestions?

EDIT: Here is the error message:

a is null fromLatLngToPoint(a=null) yg(a=null, b=Object { zoom=7, maxZoom=12, more...}) d(d=Document Default.aspx?lat=30.346317&lng=105.46313, f=[function()]) d(a=undefined) d() [Break On This Error] function Qf(a){a=a.f[9];return a!=i?a:...);function sg(a){a[ic]&&a[ic]Vb}

Solution 1

Make sure you specify the size of the element that holds the map. For example:

<div id="map_canvas" style="width: 500px; height: 500px;"></div>

Also make sure your map variable is defined in the global scope and that you initialize the map once the DOM is loaded.

Solution 2

You are probably not listening for the onload event that fires when the page is completely loaded. As a result, your script is running but the div you are creating doesn't yet exist. Use jQuery to listen for this event, like so:

$(document).ready(function () {
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});

If you don't want to use jQuery, then add an event listener to body.onload

Solution 3

This rather cryptic error means that the script can't find the map div. This could happen for a couple of reasons.

1. You're using the wrong ID to refer to the map.

Check your ids (or classes) and make sure the element you're referring to actually exists.

2. You're executing the script before the DOM is ready.

Here's a jQuery example. Notice we're triggering initialise on document ready, not onDOMReady. I've taken the liberty of wrapping the script in a closure.

(function($) {
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
  }
  $(document).ready(initialize);
})(jQuery)

You could also use:

google.maps.event.addDomListener(window, 'load', initialize);

if you prefer a Google solution.

Solution 4

Had the exact same problem and this is have i fixed it for me.

The thing was that I had 2 google maps in my website - one in the footer and the other one on the contact page, but i called them both in one JS file like so:

var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);

But the thing is that the object with id="map-canvas" was located only on the contact page. So at first you have to check if that element exists on the page like so:

if ($("#map-canvas-footer").length > 0){
    var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);        
}

if ($("#map-canvas").length > 0){
    var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}

I hope this can help someone else as well ;)

Solution 5

This happens when the map is not yet loaded. You should build your map when the Maps API JavaScript has loaded. Executing the function to initialize your map only when the API has fully loaded passing it to the "callback" parameter in the Maps API bootstrap.

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

This is actually in the Maps API Docs here. Hope this helps!

View more solutions

Comments

[Christian]

Make sure the javascript is loaded in a DOMReady or equivalent event (window.onload etc).

[Luca]

how would css styling relate to a null var in js?

[SirM]

Thanks, had intermittent map error even though using document.ready and this seems to have fixed it.

[Hammad Khan]

dont forget to add <div id="map-canva">

[MrCarrot]

For me, <div id="map-canvas"></div> has to come before the JavaScript and not afterwards

[IrishChieftain]

Worked for me with latest Google maps script by adding the size and the id="map".

[chris c]

check for typo in id names too :)