Ошибка карты Google: ноль

Question

У меня есть программа, для которой я хочу использовать карты Google.Проблема в том, что я получаю сообщение об ошибке, в котором говорится, что это ноль, где а - это переменная, используемая в API карты Google.Вот как я называю свою карту Google:

//Creates a new center location for the google map
    var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);

    //The options for the google map
    var myOptions = {
        zoom: 7,
        maxZoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

А вот как выглядит мой HTML-тег:

<div id = "map_canvas"></div>

Я получаю широту и долготу при загрузке страницы через URL.Эти значения передаются правильно, поэтому я знаю, что это не проблема.Я думаю, что это связано с var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); не правильно.Любые предложения?

РЕДАКТИРОВАТЬ: Вот сообщение об ошибке:

a является нулевым изLatLngToPoint (a = null) yg (a = null, b = Object {zoom = 7, maxZoom)= 12, больше ...}) d (d = документ Default.aspx? Lat = 30.346317 & lng = 105.46313, f = [function ()]) d (a = undefined) d () [Break On This Error] функция Qf(a) {a = af [9]; вернуть a! = i? a: ...); функция sg (a) {a [ic] && a [ic] Vb}

Answer 1

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

<div id="map_canvas" style="width: 500px; height: 500px;"></div>

Также убедитесь, что ваша переменная карты определена в глобальной области видимости и что Вы инициализируете карту после загрузки DOM.

Answer 2

Возможно, вы не слушаете событие onload, которое срабатывает, когда страница полностью загружена. В результате ваш скрипт работает, но созданный вами div еще не существует. Используйте jQuery для прослушивания этого события, например:

$(document).ready(function () {
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});

Если вы не хотите использовать jQuery, добавьте прослушиватель событий в body.onload

Answer 3

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

1.Вы используете неправильный идентификатор для ссылки на карту.

Проверьте свои идентификаторы (или классы) и убедитесь, что элемент, на который вы ссылаетесь, действительно существует.

2.Вы выполняете скрипт до того, как DOM будет готов.

Вот пример jQuery.Обратите внимание, что мы инициируем инициализацию на готовом документе, а не на DOMReady.Я взял на себя смелость завернуть скрипт в закрытие.

(function($) {
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
  }
  $(document).ready(initialize);
})(jQuery)

Вы также можете использовать:

google.maps.event.addDomListener(window, 'load', initialize);

, если вы предпочитаете решение Google.

Answer 4

У меня точно такая же проблема, и я исправил ее для меня.

Дело в том, что у меня было 2 карты Google на моем веб-сайте - одна в нижнем колонтитуле, а другая на странице контактов, но я назвал их в одном файле JS так:

var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);

Но дело в том, что объект с id="map-canvas" был расположен только на странице контактов. Поэтому сначала вы должны проверить, существует ли этот элемент на странице следующим образом:

if ($("#map-canvas-footer").length > 0){
    var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);        
}

if ($("#map-canvas").length > 0){
    var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}

Я надеюсь, что это может помочь кому-то еще;)

Answer 5

Это происходит, когда карта еще не загружена. Вы должны построить свою карту после загрузки JavaScript API Карт. Выполнение функции для инициализации карты только после полной загрузки API, передачи ее параметру «обратного вызова» в начальной загрузке API Карт.

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

Это на самом деле в Документах API Карт здесь . Надеюсь, это поможет!

Answer 6

Убедитесь, что ваш холст div (Div связан с картой) существует. Иногда, если мы переименуем атрибут id в div. Тогда это создает проблему, так как не получает холст div.

Answer 7

Я получил эту ошибку один раз. Убедитесь, что скрипт карты выполняется только на страницах, использующих карту. Вы можете проверить, существует ли карта, используя «если». Примерно так:

if ($('mapClass').length>0) { // here you run the google maps functions }

Увидимся

Answer 8

Я исправил это, удалив свое свойство "style" из тега "div" и объявив его правильно в файле css

Answer 9

Решено, ошибка на карте Google, убедитесь, что вы получаете объект var map = document.getElementById ('map-canvas'), возвращающийся правильно с помощью alert (map). Проверьте имя идентификатора контейнера div, как указано в getElementByid.

Я также застрял с тем же типом ошибки, исправил это путем проверки getElementByid ('map-canvas'). Пример кода введите описание ссылки здесь