Google Maps JS: Uncaught TypeError: Невозможно вызвать метод addDomListener из неопределенного

0

Я получаю ошибку "Не могу вызвать метод" addDomListener "неопределенной" ошибки с помощью google.maps.event.addDomListener(window, 'load', initialize); строка кода, где event "undefined". Мой код ниже в основном копируется из примера на сайте developers.google.com.

$(function () {
   var officeMap = $("#map-canvas");
   if (officeMap.length > 0) {
      var map;
      function initialize()  {
         var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 
         };
         map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
   }
});

Скрипт google maps (с ключом API) загружается перед этим в конце тела документа (с использованием Modernizr), выглядя так: https://maps.googleapis.com/maps/api/js?key=myApiKey&sensor= false "(я переключаю" myApiKey "с помощью ключа генерации:))

Указывает ли ошибка, что сценарий Google Maps не загружался первым? Или мой API-ключ недействителен? Или что-то другое?

  • 0
    Возможно, что API не загружен из-за вашего ключа. И вам не нужен ключ для запуска этого кода. Смотрите пример на jsbin .
  • 0
    Почему вы загружаете API в теле? Почему не глава документа? И у вас будут проблемы, если вы не дождетесь, пока событие onload не сработает, прежде чем инициализировать карту (хотя ее можно заставить работать без этого).
Теги:
google-maps
dom

2 ответа

0
Лучший ответ

Образец кода Google верен, но не будет запускаться на большинстве веб-сайтов, если есть загрузка сценария ajax. И да, вы правы, сценарий google не загружается в тот момент, когда вы вызываете функцию.

Взгляните на источник этого сценария google, это не полный javascript sdk, это просто файл прокси/стартер. Я помню, что это не так, как в прошлый раз, когда этот образец кода работает без проблем.

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
 <script>

function initialize() {
   var officeMap = $("#map-canvas");
   if (officeMap.length > 0) {
      var map;

         var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644), zoom: 8 
         };
         map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

   }
}
 </script>
Поделиться
  • 0
    Да, он работает с функцией обратного вызова (в консоли нет ошибок). Но моя карта не имеет содержимого, с высотой 0px: / Есть идеи?
  • 0
    ваш div должен установить ширину и высоту в CSS или стиле
Показать ещё 2 комментария
0

Попробуйте использовать это вместо своего ключа

<script type="text/javascript"      src="https://maps.googleapis.com/maps/api/js?sensor=false">

Мой код

var myCenter=new google.maps.LatLng(-34.397, 150.644);

        function initialize()
        {
        var mapProp = {
          center:myCenter,
          zoom:8,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };

        var map=new google.maps.Map(document.getElementById('maparea'),mapProp);

        var marker=new google.maps.Marker({
          position:myCenter,
          title:'Hi'
          });

        marker.setMap(map);

        var infowindow = new google.maps.InfoWindow({
          content:'',
          boxStyle: {
                  maxHeight:200
                }
          });

        infowindow.open(map,marker);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню