Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

问题:

I'm trying to use Google MAP API v3 with the following code.

Topology
  
 
 

When I run this code, the browser says this.

Uncaught TypeError: Cannot read property 'offsetWidth' of null

I have no idea, since I follow the direction given in this tutorial.

Do you have any clue?

回答1:

This problem is usually due to the map div not being rendered before the javascript runs that needs to access it.

You should put your initialization code inside an onload function or at the bottom of your HTML file, just before the tag, so the DOM is completely rendered before it executes (note that the second option is more sensitive to invalid HTML).

Note, as pointed out by matthewsheets this also could be cause by the div with that id not existing at all in your HTML (the pathological case of the div not being rendered)

Adding code sample from wf9a5m75's post to put everything in one place:

回答2:

For others that might still be having this issue, even after trying the above recommendations, using an incorrect selector for your map canvas in the initialize function can cause this same issue as the function is trying to access something that doesn't exist. Double-check that your map Id matches in your initialize function and your HTML or this same error may be thrown.

In other words, make sure your IDs match up. ;)

回答3:

google uses id="map_canvas" and id="map-canvas" in the samples, double-check and re-double-check the id :D

回答4:

Year, geocodezip's answer is correct. So change your code like this: (if you still in trouble, or maybe somebody else in the future)

回答5:

You can also get this error if you don't specify center or zoom in your map options.

回答6:

Just so I add my fail scenario in getting this to work. I had a

and the div was initially hidden and it didn't have explicitly width and height values set so it's size was width x 0. Once I've set the size of this div in CSS like this

#map {     width: 500px;     height: 300px; } 

everything worked! Hope this helps someone.

回答7:

For even more others that might still be having this issue, I was using a self-closing

tag, and the second div was not showing, and did not seem to be in the dom. as soon as i changed it to two open&close tags

it worked. hth

回答8:

I had single quotes in my

var map = new google.maps.Map(document.getElementById('map_canvas')  

and replaced them with double quotes

var map = new google.maps.Map(document.getElementById("map_canvas").  

This did the trick for me.

回答9:

Changing the ID (in all 3 places) from "map-canvas" to "map" fixed it for me, even though I had made sure the IDs were the same, the div had a width and height, and the code wasn't running until after the window load call. It's not the dash; it doesn't seem to work with any other ID than "map".

回答10:

Also take care not to write

google.maps.event.addDomListener(window, "load", init()) 

correct:

google.maps.event.addDomListener(window, "load", init) 

回答11:

Also, make sure you're not placing hash symbol (#) inside your selector in a

    document.getElementById('#map') // bad      document.getElementById('map') // good 

statement. It's not a jQuery. Just a quick reminder for someone in a hurry.

回答12:

I had the same issue but the problem was that zoom was not defined within the options object given to Google Maps.

回答13:

If you're creating multiple maps in a loop, if a single map DOM element doesn't exist, it breaks all of them. First, check to make sure the DOM element exists before creating a new Map object.

[...]  for( var i = 0; i 

回答14:

If you happen to be using asp.net Webforms and are registering the script in the code behind of a page using a master page, don't forget to use the clientID of the map element (vb.net):

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """... 

回答15:

In order to solve it you need to add async defer to the script.

It should be like this:

See here the meaning of async defer.

Since you'll be calling a function from the main js file, you also want to make sure that this is after the one where you load the main script.

回答16:

• Setup ng-init=init() in your HTML

• And in the controller

  use $scope.init = function() {...} instead of google.maps.event.addDomListener(window, "load", init){...}

Hope this will help you.

回答17:

Actually easiest way to fix this is just move your object before Javascript code it worked to me. I guess in your answer object is loaded after javascript code.

// Here