Google MAP API Uncaught TypeError: не удается прочитать свойство "offsetWidth" null

Я пытаюсь использовать 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: не удается прочитать свойство "offsetWidth" null

Я понятия не имею, так как я следую направлению, указанному в в этом уроке.

У вас есть какие-либо улики?

188
google-maps-api-3 javascript

24 ответов

эта проблема обычно связана с тем, что div карты не отображается до запуска javascript, который должен получить к нему доступ.

вы должны поместить свой код инициализации внутри функции onload или в нижней части вашего HTML-файла, непосредственно перед тегом, поэтому DOM полностью отображается перед его выполнением (обратите внимание, что второй вариант более чувствителен к недопустимому HTML).

Примечание, как указано matthewsheets это также может быть причиной div с этот идентификатор вообще не существует в вашем HTML (патологический случай div не отображается)

добавление образца кода из wf9a5m75сообщение, чтобы положить все в одном месте:

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

для других, которые все еще могут иметь эту проблему, даже после попытки вышеуказанных рекомендаций использование неправильного селектора для холста карты в функции initialize может вызвать ту же проблему, что и попытка функции получить доступ к чему-то, чего не существует. Дважды проверьте, что Ваш идентификатор карты соответствует вашей функции инициализации и HTML или эта же ошибка может быть вызвана.

другими словами, убедитесь, что ваши идентификаторы совпадают. ;)

106

google использует id="map_canvas" и id="map-canvas" в образцах дважды проверьте и повторно проверьте идентификатор: D

25

год, ответ 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

вы также можете получить эту ошибку, если не указать center или zoom в параметрах карты.

20

просто так я не сценарий в получении этой работы. У меня был <div id="map> в котором я загружал карту с:

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

и div был первоначально скрытый и у него не было явно установленных значений ширины и высоты, поэтому его размер был width x 0. Как только я установил размер этого div в CSS, как это 

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

все работало! Надеюсь, это кому-то поможет.

9

для еще большего количества других, которые все еще могут иметь эту проблему, я использовал самозакрывающийся <div id="map1" /> tag, а второй div не показывался и, похоже, не был в dom. как только я изменил его на два тега open&close <div id="map1"></div> это сработало. hth

7

у меня есть одинарные кавычки в моем 

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

и заменил их двойными кавычками 

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

это сделал трюк для меня.

6

изменение идентификатора (во всех 3 местах) с "Map-canvas" на "map" исправило его для меня, хотя я убедился, что идентификаторы были одинаковыми, div имел ширину и высоту, и код не работал до тех пор, пока после вызова загрузки окна. Это не тире; он, похоже, не работает ни с каким другим идентификатором, кроме "карты".

5

также позаботьтесь не написать

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

правильно:

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

кроме того, убедитесь, что вы не поставив хэш-символ (#) внутри селектора в 

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

    document.getElementById('map') // good

заявление. Это не jQuery. Просто быстрое напоминание для того, кто спешит.

4

У меня была та же проблема, но проблема заключалась в том, что масштаб не был определен в объекте options, предоставленном Google Maps.

3

Если вы создаете несколько карт в цикле, если один элемент DOM карты не существует, он разбивает их все. Во-первых, перед созданием нового объекта карты убедитесь, что элемент 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

Если вы используете asp.net Webforms и регистрируют скрипт в коде позади страницы, используя главную страницу, не забудьте использовать clientID элемента карты (vb.net):

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

для того чтобы решить нужно добавить async defer сценарий.

надо так: 

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

посмотреть здесь значение async отложить.

поскольку вы будете вызывать функцию из основного JS-файла, вы также хотите убедиться, что это после того, как вы загрузите основной скрипт.

1

Я знаю, что немного опоздал на вечеринку, просто хотел добавить, что ошибка также может произойти, когда div не существует на странице. Вы также можете проверить, существует ли div перед загрузкой вызова функции Google maps. Что-то вроде

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
  • настройка ng-init=init () в вашем HTML

  • и в контроллере

    используйте $scope.init = function () {...} вместо google.карты.событие.addDomListener (window, "load", init){...}

надеюсь, это поможет вам.

1

на самом деле самый простой способ исправить это - просто переместить объект до кода 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

в моем случае эти проблемы были решены с помощью defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script

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

вам нужно учитывать поддержку браузерами этой опции, хотя (я не видел проблем)

0

убедитесь, что вы включили библиотеку мест &libraries=places параметр при первой загрузке API.

например:

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

убедитесь, что вы не переопределяя window.self

моя проблема: я создал компонент и писал self = this вместо var self = this. Если вы не используете ключевое слово var, JS поместит эту переменную в объект window, поэтому я переписал window.self что вызвало эту ошибку.

0

это редактирование ранее удаленной записи для содержания связанного ответа в самом ответе. Целью повторной публикации этого ответа является функция PSA для пользователей React 0.9+, которые также столкнулись с этой проблемой.

оригинал отредактированное сообщение

также получил эту ошибку при использовании ReactJS, следуя этот блог. комментарий сахата здесь помогло - см. содержание комментария sahat под.

Note Примечание для React >= 0.9

до v0.9, узел DOM был передан в качестве последнего аргумента. Если вы использовали это, вы все равно можете получить доступ к узлу DOM, вызвав это.getDOMNode ().

другими словами, замените параметр rootNode этим.getDOMNode () в последней версии React.

0

мой провал был использовать 

zoomLevel

как вариант, а не правильный вариант 

zoom
0

здесь проблема заключалась в ссылке API без key param:

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

этот способ отлично работает.

-2