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

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

Answer 2

Make sure that your canvas div (Div associated with the map) exists. Sometimes, if we rename the div's id attribute. Then it creates problem as it does not get the canvas div.

Answer 3

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.

Answer 4

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!

Answer 5

My response is bit old but for those who still come here for reference, I have a similar solution. I put map initialization code as specified here https://developers.google.com/maps/documentation/javascript/adding-a-google-map

inside jQuery document ready function. Below is the code that worked in my case:

$(document).ready(function () {
    var uluru = {lat: -25.344, lng: 131.036}; 
    var map = new google.maps.Map( document.getElementById('embedmap'), {zoom: 14, center: uluru} ); 
    var marker = new google.maps.Marker({position: uluru, map: map});

});

Answer 6

I got this error once. Make sure the map script runs only on pages using the map. You can check if the map exists by using an "if". Something like this:

if ($('mapClass').length>0) { // here you run the google maps functions }

See ya