[解決済み】Google MAP API Uncaught TypeError: nullのプロパティ'offsetWidth'を読み取れませんでした。

質問

Google MAP API v3 を以下のコードで使おうとしています。

<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>

このコードを実行すると、ブラウザにはこのように表示されます。

Uncaught TypeError: null のプロパティ 'offsetWidth' を読み取れませんでした。

で示された方向に従っているので、全く分かりません。 このチュートリアル .

何か手がかりがあるのでしょうか？

解決方法は？

この問題は、通常、地図にアクセスする必要のあるJavaScriptが実行される前に、地図Divがレンダリングされないことが原因です。

初期化コードをonload関数内に置くか、HTMLファイルの一番下、タグの直前に置くと、実行前にDOMが完全にレンダリングされます（2番目のオプションは、無効なHTMLに対してより敏感であることに注意してください）。

で指摘されているように matthwsheets これは、その ID の div が HTML 内にまったく存在しないことが原因である可能性もあります (div がレンダリングされないという病的なケースです)。

のコードサンプルを追加します。 wf9a5m75 の投稿を参考にして、すべてを1つの場所にまとめています。

<script type="text/javascript">

function initialize() {
    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);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>