javascript - Google Maps APIv3 - 通过地理编码添加标记

Question

所以我得到了这个脚本，我试图在其中向我使用 Javascript 创建的 map 添加标记。我认为我非常接近正确(是的，正确)但我不确定我做错了什么而且我似乎无法破译我遇到的错误。

我做的第一件事是将 google API key 添加到我的网站。

然后，我在脚本中做的第一件事是加载搜索和 map API:

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

“ map ”API 加载后，将调用 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 函数只是获取用户的当前位置并将其放入 map 中:

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。

有人知道我做错了什么吗？

Answer 1

首先，Google Maps API 3 不需要 API key (除非我们指的是最近为每日 map 浏览量超过 25,000 次的网站引入的 key ，这些网站可能需要付费使用)。听起来您将 API 2 所需的 key 与 API 3 的代码混在一起了。

其次，这都是错误的。 'i' 是 postcodes 数组的变量，它与结果数组没有关系

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