API Google MAP Uncaught TypeError: Невозможно прочитать свойство offsetWidth 'null

Я пытаюсь использовать API Google MAP 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

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

Есть ли у вас какие-либо подсказки?

ОТВЕТЫ

Ответ 1

Эта проблема обычно возникает из-за того, что отображение 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>

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

Год, правильный ответ 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>

Ответ 6

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

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

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

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

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

Ответ 7

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

Ответ 8

У меня были одинарные кавычки в моем

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

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

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

Это помогло мне.

Ответ 9

Также старайтесь не писать

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

правильно:

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

Ответ 10

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

Ответ 11

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

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

    document.getElementById('map') // good

утверждение. Это не jQuery. Просто быстрое напоминание о том, что кто-то спешит.

Ответ 12

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

Ответ 13

Если вы создаете несколько карт в цикле, если один элемент DOM карты не существует, он разбивает их все. Прежде всего, убедитесь, что элемент DOM существует до создания нового объекта Map.

[...]

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

[...]

Ответ 14

Если вы используете веб-формы asp.net и регистрируете script в коде позади страницы с использованием главной страницы, не забудьте использовать идентификатор клиента элемента карты (vb.net):

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

Ответ 15

Чтобы решить проблему, вам нужно добавить async defer в script.

Это должно быть так:

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

Смотрите здесь значение async defer.

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

Ответ 16

  • Настройка ng-init = init() в вашем HTML

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

    использовать $scope.init = function() {...} вместо google.maps.event.addDomListener(окно, "load", init) {...}

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

Ответ 17

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

Например:

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

Ответ 18

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

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

Ответ 19

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

Ответ 20

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

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

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

Ответ 21

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

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

Ответ 22

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

оригинальный отредактированный пост

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

❗️ Примечание для реакции >= 0,9

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

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

Ответ 23

Я не смог использовать

zoomLevel

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

zoom

Ответ 24

добавить асинхронную отсрочку в начале вызова карты API-ключа.

Ответ 25

В случае, с которым я имел дело, карта div была условно отображена в зависимости от того, было ли местоположение опубликовано. Если вы не можете быть уверены, будет ли на странице отображаться div холста карты, просто убедитесь, что ваш document.getElementById возвращает элемент, и вызывайте карту только в том случае, если он присутствует:

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

Ответ 26

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

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

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