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

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

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

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

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

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

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

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

Год, геокодезип ответ правильный. Поэтому измените свой код следующим образом: (если у вас все еще проблемы, или, возможно, кто-то еще в будущем)

<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" />тег, а второй div не показывался и, похоже, не находился в DOM. как только я изменил его на два тега open & close, <div id="map1"></div>он заработал. НТН

Также будьте осторожны, чтобы не писать

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

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

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

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

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

    document.getElementById('map') // good

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

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

Если вы создаете несколько карт в цикле, если один элемент 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);
}

[...]

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

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, вы также должны убедиться, что это после того, где вы загружаете основной скрипт.

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

Например:

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

Я знаю, что немного опоздал на вечеринку, просто хотел добавить, что ошибка также может произойти, когда 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
     }
}

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

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

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

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

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

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

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

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

Проверьте, что вы не переопределяете window.self

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

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

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

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

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

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

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

Моя ошибка была в использовании

zoomLevel

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

zoom

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

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

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

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

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

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