Google MAP API Uncaught TypeError: Cannot read pro

Question

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

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }
</style>

<script type="text/javascript">

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

</script>

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

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?

Answer 1

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.

Answer 2

Here the problem was the API link without the key param:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

That way works fine.

Answer 3

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 <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( 'map' + '-' + i.toString() );

  // Element doesn't exist, don't create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

Answer 4

Also take care not to write

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

correct:

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

Answer 5

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() & """...

Answer 6

This is an edit of a previously deleted post to contain the content of the linked answer, in the answer itself. The purpose for re-publishing this answer is to function as a PSA for React 0.9+ users who have also stumbled into this issue.

original edited post

---

Also got this error while using ReactJS while following this blog post. sahat's comment here helped - see the content of sahat's comment below.

❗️ Note for React >= 0.9

Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling this.getDOMNode().

In other words, replace rootNode parameter with this.getDOMNode() in the latest version of React.