Google Maps APIv3 - добавление маркеров через геокод - PullRequest
Новая
       18

Google Maps APIv3 - добавление маркеров через геокод

1 голос
/ 10 декабря 2011

Итак, у меня есть этот скрипт, в котором я пытаюсь добавить маркеры на карту, которую я создал с помощью Javascript. Я думаю, что я почти готов понять это правильно (да, правильно), но я не уверен, что делаю неправильно, и я не могу расшифровать ошибку, которую я получаю.

Первое, что я делаю, это добавляю ключ API Google на свой сайт.

Затем первое, что я делаю в своем скрипте, это загружаю API поиска и карт: 

(function ($) {
  $("document").ready(function() {
    google.load("maps", 2, {"callback": mapsLoaded});
  });
})(jQuery);

После загрузки API 'maps' вызывается метод mapsLoaded: 

function mapsLoaded() {
  //Create the options for the map and imediately after create the map.
  var myOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("result_map"), myOptions);

  showUserLocation(map);

  var image = '../misc/planbMarker.png';
  var postcodes = document.getElementsByClassName('result-postcode');
  var geocoder = new google.maps.Geocoder();
  for(var i = 0; i < postcodes.length; i++) {
    var address = postcodes[i].value;
    geocoder.geocode({'address': address}, function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[i].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}

Функция showUserLocation просто получает текущее местоположение пользователя и помещает его на карту: 

function showUserLocation(map) {
  //Define the user's initial location
  var initialLocation;
  //Define the variable to see if geolocation is supported.
  var browserSupportFlag =  new Boolean();
  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }
  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed. Defaulting to Aberdeen.");
      initialLocation = new google.maps.LatLng(57.149953,-2.104053);
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Aberdeen.");
      initialLocation = new google.maps.LatLng(57.149953,-2.104053);
    }
    map.setCenter(initialLocation);
  }
  //Put a marker on the user's current position different than the markers for the venues.
  navigator.geolocation.getCurrentPosition(function(position) {
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
    map: map,
    title:"Hello World!"});
  });  
}

Теперь ошибка, которую я получаю при запуске: Uncaught TypeError: Cannot call method 'appendChild' of null at maps:1, затем: Uncaught TypeError: Object #<Object> has no method '__gjsload__', и примерно через 5 секунд это также появляется в консоли javascript: 

Error in event handler for 'undefined': TypeError: Cannot call method 'postMessage' of null
at chrome/RendererExtensionBindings:100:18
at chrome-extension://bmagokdooijbeehmkpknfglimnifench/contentScript.js:128:13
at [object Object].dispatch (chrome/EventBindings:182:28)
at chrome/RendererExtensionBindings:99:24
at [object Object].dispatch (chrome/EventBindings:182:28)
at Object.<anonymous> (chrome/RendererExtensionBindings:149:22)

В отношении идентификатора и, как еще один возможный признак, когда возникает эта ошибка, Chrome отображает пустую страницу (если вы переходите к просмотру исходного кода, вся разметка есть, но страница пуста). Я использую Drupal 7.10.

У кого-нибудь есть идеи, что я делаю не так?

1 Ответ

3 голосов
/ 11 декабря 2011

Во-первых, Google Maps API 3 не требует ключа API (если мы не ссылаемся на недавно введенный ключ для сайтов с более чем 25 000 ежедневных просмотров карт, которые, возможно, должны будут платить за использование). Похоже, вы смешиваете ключи, необходимые для API 2, с кодом для API 3.

Во-вторых, это все неправильно. 'i' - переменная для массива почтовых индексов, она не имеет отношения к массиву результатов 

for(var i = 0; i < postcodes.length; i++) {
    var address = postcodes[i].value;
    geocoder.geocode({'address': address}, function(results, status){
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[i].geometry.location
...