Ошибка API Google MAP: ошибка типа: невозможно прочитать свойство '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>
Когда я запускаю этот код, браузер говорит это.
Uncaught TypeError: Невозможно прочитать свойство 'offsetWidth' из null
Я понятия не имею, так как я следую указаниям, данным в этом уроке.
Есть ли у вас какие-либо подсказки?
25 ответов
Эта проблема обычно связана с тем, что div карты не отображается перед запуском javascript, который должен получить к нему доступ.
Вы должны поместить свой код инициализации в функцию onload или внизу HTML-файла, непосредственно перед тегом, чтобы DOM полностью отображался перед выполнением (обратите внимание, что второй параметр более чувствителен к недопустимому HTML).
Обратите внимание, что, как указано в matthewsheets, это также может быть вызвано тем, что div с таким идентификатором вообще не существует в вашем HTML (патологический случай, когда div не отображается)
wf9a5m75 пример кода из 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 не показывался, и, похоже, не в дом. как только я изменил его на два тега открытия и закрытия <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") );
Это помогло мне.
Изменение идентификатора (во всех трех местах) с "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);
}
[...]
Для ее решения необходимо добавить async defer к сценарию.
Должно быть так:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
Смотрите здесь значение async defer.
Так как вы будете вызывать функцию из основного файла js, вы также должны убедиться, что это после того, где вы загружаете основной скрипт.
Убедитесь, что вы включили библиотеку Places &libraries=places Параметр при первой загрузке API.
Например:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
- Настройте ng-init=init() в вашем HTML
И в контроллере
используйте $scope.init = function() {...} вместо google.maps.event.addDomListener(window, "load", init){...}
Надеюсь, что это поможет вам.
Я знаю, что немного опоздал на вечеринку, просто хотел добавить, что ошибка также может произойти, когда 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
}
}
Если вы используете веб-формы asp.net и регистрируете скрипт в коде страницы, используя главную страницу, не забудьте использовать clientID элемента карты (vb.net):
ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...
В моем случае такого рода проблемы были решены с помощью defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script
<script src="<your file>.js" defer></script>
Вы должны принять во внимание поддержку этой опции браузерами (проблем не возникало)
Это редактирование ранее удаленного сообщения, в котором содержится содержание связанного ответа в самом ответе. Целью повторной публикации этого ответа является функционирование в качестве PSA для пользователей React 0.9+, которые также сталкивались с этой проблемой.
оригинальное отредактированное сообщение
Также получил эту ошибку при использовании ReactJS, следуя этому сообщению в блоге. Здесь помог комментарий сахата - см. содержание комментария сахата ниже.
❗️ Примечание для реакции>= 0,9
До версии 0.9 узел DOM передавался как последний аргумент. Если вы использовали это, вы все равно можете получить доступ к узлу DOM, вызвав this.getDOMNode().
Другими словами, замените параметр rootNode на this.getDOMNode () в последней версии React.
На самом деле самый простой способ это исправить - просто переместить ваш объект до того, как код 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>
Убедитесь, что вы не переопределяете window.self
Моя проблема: я создал компонент и написал self = this вместо вар self = this, Если вы не используете ключевое слово var, JS поместит эту переменную в объект окна, поэтому я переписал window.self что вызвало эту ошибку.
Моя ошибка была в использовании
zoomLevel
как вариант, а не правильный вариант
zoom
В случае, с которым я имел дело, div карты был условно визуализирован в зависимости от того, было ли местоположение опубликовано. Если вы не можете быть уверены, будет ли на странице div холста карты, просто проверьте, что вашdocument.getElementById возвращает элемент и вызывает карту, только если она присутствует:
var mapEle = document.getElementById("map_canvas");
if (mapEle) {
map = new google.maps.Map(mapEle, myOptions);
}
Добавить асинхронную отсрочку в начале вызова карты API-ключа.
Здесь проблема была ссылка API без key пары:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>
Этот способ отлично работает.