web-dev-qa-db-ja.com

Google MAP APIの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>

私がこのコードを実行すると、ブラウザはこれを言います。

捕捉されないTypeError：nullのプロパティ「offsetWidth」を読み取ることができません

私は このチュートリアル で与えられた指示に従うので、私にはわかりません。

何か手がかりがありますか。

javascriptgoogle-maps-api-3
197
jaeyong

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

初期化コードはonload関数内またはHTMLファイルの末尾のタグの直前に配置する必要があります。そのため、DOMは実行前に完全にレンダリングされます（2番目のオプションは無効なHTMLに対してより敏感です）。

注意してください、 matthewsheets で指摘されているように、これはそのidを持つdivがあなたのHTMLにまったく存在していないために起こる可能性があります。レンダリングされていません）

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

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

言い換えれば、あなたのIDが一致することを確認してください。 ;）

107
matthewsheets

googleはサンプルでid="map_canvas"とid="map-canvas"を使用しています。IDを再確認し、再確認してください。D

25
dpineda

年、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>
23
wf9a5m75

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

22
JamesFrost

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

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

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

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

すべてうまくいった！これが誰かに役立つことを願っています。

9
Nikola

この問題を抱えている可能性がある他の人たちのために、私は自己終了<div id="map1" />タグを使用していました、そして2番目のdivは表示されず、ドームにいるようには見えません。 2つのオープンタグとクローズタグ<div id="map1"></div>に変更するとすぐにうまくいきました。 hth

7
changokun

私は私の中に一重引用符がありました

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

二重引用符で置き換えます

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

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

6
VB.Net Programmer

書かないように気をつけて

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

正しい：

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

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

5
Johnny5k

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

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

    document.getElementById('map') // good

ステートメント。それはjQueryではありません。急いでいる人へのちょっとしたメモです。

4
Keeprock

私は同じ問題を抱えていたが、問題はズームがグーグルマップに与えられたオプションオブジェクトの中で定義されなかったということだった。

3
torresomar

ループ内に複数のマップを作成している場合、単一のマップ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);
}

[...]
2
Zack Katz
  • HTMLにng-init = init（）を設定してください。

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

    google.maps.event.addDomListener（window、 "load"、init）{...}の代わりに$ scope.init = function（）{...}を使用してください

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

1
Akash Saxena

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

これは次のようになります。

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

非同期遅延の意味については、 こちら を参照してください。

メインのjsファイルから関数を呼び出すことになるので、これがメインのスクリプトをロードしたものの後であることも確認したいと思います。

1
Avi Levin

たまたまasp.net Webフォームを使用していて、マスターページを使用してページの背後のコードにスクリプトを登録している場合は、マップ要素のクライアントID（vb.net）を忘れずに使用してください。

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

私はパーティーに少し遅れていることを知っています、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
     }
}
1
mr_j

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

例えば：

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

これを修正するための実際に最も簡単な方法はそれがうまくいった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>
0
Laltzi

map api key callの開始を遅らせる非同期を追加します。

0
Ghadir Farzaneh

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

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

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

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

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

0
Yeke

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

オリジナル編集記事

このブログ記事をフォローしながら ReactJSを使用する際にもこのエラーが発生しました 。 sahatのコメント はここ に役立ちました - 下のsahatのコメントの内容を参照してください。

act️Reactに関するメモ> = 0.9

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

言い換えれば、Reactの最新版のrootNodeパラメータをthis.getDOMNode（）に置き換えてください。

0
Meredith

window.selfをオーバーライドしていないことを確認してください

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

0
Mike R Emo

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

zoomLevel

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

zoom
0
strattonn