次のコードで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に対してより敏感です）。

注意：matthewsheetsで指摘されているように、HTMLにそのIDがまったく存在しないdivが原因である可能性もあります（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>

上記の推奨事項を試してもこの問題が引き続き発生する可能性がある他の人にとっては、初期化関数でマップキャンバスに誤ったセレクターを使用すると、関数が存在しないものにアクセスしようとするため、同じ問題が発生する可能性があります。マップIDが初期化関数で一致していることを再確認し、HTMLまたはこの同じエラーがスローされる可能性があります。

つまり、IDが一致していることを確認してください。;）

centerまたはzoomマップオプションで指定しない場合にも、このエラーが発生する可能性があります。

使用グーグルid="map_canvas"及びid="map-canvas"D：サンプルにおいて、二重チェックし、再ダブルチェックIDを

年、geocodezipの答えは正しいです。したがって、次のようにコードを変更します：（まだ問題が発生している場合、または将来的に他の誰かが）

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

これを機能させるために失敗シナリオを追加しました。私は<div id="map>マップをロードしていた：

var map = new google.maps.Map(document.getElementById("map"), myOptions);

divは最初は非表示で、明示的に幅と高さの値が設定されていなかったため、サイズはでしたwidth x 0。このdivのサイズをCSSでこのように設定したら

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

すべてがうまくいきました！これが誰かを助けることを願っています。

まだこの問題が発生している可能性のある他の人のために、自己終了<div id="map1" />タグを使用していて、2番目のdivが表示されず、dom内にないようでした。2つのopen＆closeタグ<div id="map1"></div>に変更するとすぐに機能しました。hth

また、書かないように注意してください

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

正しい：

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

私は単一引用符を持っていました

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

そしてそれらを二重引用符で置き換えました

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

これは私にとってはトリックでした。

IDが同じであること、divに幅と高さがあり、コードが異なることを確認したにもかかわらず、IDを（3か所すべてで）「map-canvas」から「map」に変更すると修正されましたウィンドウの読み込み呼び出しの後まで実行されます。ダッシュではありません。「マップ」以外のIDでは機能しないようです。

また、ハッシュ記号（＃）をセレクター内に配置しないでください。

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

    document.getElementById('map') // good

ステートメント。これはjQueryではありません。急いでいる人のためのただの簡単なリマインダー。

同じ問題がありましたが、問題は、Googleマップに与えられたオプションオブジェクト内でズームが定義されていないことでした。

ループで複数のマップを作成する場合、単一のマップDOM要素が存在しないと、すべての要素が壊れます。まず、新しいMapオブジェクトを作成する前に、DOM要素が存在することを確認してください。

[...]

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);
}

[...]

asp.net Webformsを使用していて、マスターページを使用するページのコードビハインドでスクリプトを登録している場合は、マップ要素（vb.net）のclientIDを使用することを忘れないでください。

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

それを解決するasync deferには、スクリプトに追加する必要があります。

次のようになります。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

ここで非同期遅延の意味を参照してください。

メインのjsファイルから関数を呼び出すので、メインスクリプトをロードする場所の後にあることも確認する必要があります。

&libraries=placesAPIを最初にロードするときに、Placesライブラリパラメータを必ず含めてください。

例えば：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

私はパーティーに少し遅れていることを知っています。ページにdivが存在しない場合にもエラーが発生する可能性があることを追加したかっただけです。Googleマップの関数呼び出しをロードする前に、最初にdivが存在するかどうかを確認することもできます。何かのようなもの

function initMap() {
    if($("#venuemap").length != 0) {
        var city= {lat: -26.2041, lng: 28.0473};
        var map = new google.maps.Map(document.getElementById('venuemap'), {
       etc etc
     }
}

• HTMLにng-init = init（）を設定する

• そしてコントローラーで

  google.maps.event.addDomListener（window、 "load"、init）{...}の代わりに$ scope.init = function（）{...}を使用します

これがお役に立てば幸いです。

これを修正する実際に最も簡単な方法は、JavaScriptコードが機能する前にオブジェクトを移動することです。あなたの回答オブジェクトはJavaScriptコードの後に​​読み込まれると思います。

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

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

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

私の場合、この種の問題はhttps://developer.mozilla.org/en/docs/Web/HTML/Element/scriptを使用して解決されましたdefer

<script src="<your file>.js" defer></script>

ただし、ブラウザのこのオプションのサポートを考慮する必要があります（私は問題を見たことがありません）

上書きしていないことを確認してください window.self

私の問題：self = thisvarではなく、コンポーネントを作成して作成しましたself = this。キーワードを使用しない場合var、JSはその変数をウィンドウオブジェクトに配置するため、window.selfこのエラーの原因となった上書きを行いました。

これは以前に削除された投稿を編集したもので、リンクされた回答の内容が回答自体に含まれています。この回答を再公開する目的は、この問題に遭遇したReact 0.9+ユーザーのPSAとして機能することです。

元の編集された投稿

このブログ投稿をフォローしているときにReactJSを使用しているときにもこのエラーが発生しました。sahatさんのコメントはここに助け-以下sahatさんのコメントの内容を参照してください。

❗️Reactの注意点> = 0.9

v0.9より前は、DOMノードは最後の引数として渡されていました。これを使用していた場合でも、this.getDOMNode（）を呼び出すことでDOMノードにアクセスできます。

つまり、Reactの最新バージョンでrootNodeパラメーターをthis.getDOMNode（）に置き換えます。

私の失敗は使用することでした

zoomLevel

正しいオプションではなく、オプションとして

zoom

マップAPIキーの呼び出しの開始時に非同期遅延を追加します。

私が扱っていたケースでは、場所が公開されているかどうかに応じて、マップdivが条件付きでレンダリングされました。マップキャンバスdivがページ上にあるかどうかわからない場合は、単にdocument.getElementById要素が返されていることを確認し、存在する場合にのみマップを呼び出します。

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

ここでの問題は、 keyパラメーターの：

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

その方法はうまくいきます。