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 goo

Answer 1

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 ;)

Answer 2

I have fixed it removing my "style" property from the "div" tag an declaring it correctly, in a css file

Answer 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.

Answer 4

Solved, the google map type a error, make sure you get object var map = document.getElementById('map-canvas') returning properly using alert(map). Check the div container id name same as specified in getElementByid.

I have also stuck with the same type a error, fixed it by checking getElementByid('map-canvas'). Sample code enter link description here