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

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?

score 322 · Accepted Answer

この問題は通常、マップ div にアクセスする必要がある 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>

score 109 · Accepted Answer

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

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

score 36 · Accepted Answer

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

score 26 · Accepted Answer

Googleはサンプルで使用id="map_canvas"しid="map-canvas"、IDを再確認して再確認します:D

score 23 · Accepted Answer

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

score 11 · Accepted Answer

これを機能させるのに失敗したシナリオを追加します。<div id="map>マップをロードしていたのは次のとおりです。

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

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

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

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

score 7 · Accepted Answer

この問題がまだ発生している可能性のあるさらに多くの人のために、私は自己終了<div id="map1" />タグを使用していましたが、2 番目の div は表示されておらず、dom にあるようには見えませんでした。2つのopen&closeタグ<div id="map1"></div>に変更するとすぐに機能しました。h番目

score 6 · Accepted Answer

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

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

正しい：

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

[...]

score 1 · Accepted Answer

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

例えば：

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

score 1 · Accepted Answer

HTML で ng-init=init() をセットアップします
そしてコントローラーで

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

これがあなたを助けることを願っています。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

実際にこれを修正する最も簡単な方法は、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>

score 0 · Accepted Answer

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

zoomLevel

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

zoom

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

26 に答える 26

Related

Reference