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

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 the following tutorial.

https://developers.google.com/maps/documentation/javascript/tutorial

do you have any clues?
