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

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.