Google Maps API：標記鏈接不起作用

Question

我一直在玩Google Maps API並設法做我想做的事。基本上，我使用HTML中的一些特定參數來創建自定義地圖。地圖運作良好，並標記彈出在正確的位置，但是我有我不能夠解決兩個小問題：

1. 標記的鏈接不起作用 - 我在收到以下錯誤消息我日誌：遺漏的類型錯誤：無法讀取屬性「_ E3」未定義

2. 在頁面加載時在地圖上設置的默認位置，然後再與它的具體位置更新運行的功能時。無論如何，我可以一次加載正確的位置嗎？

下面是HTML代碼的具體參數：

<div id="map" data-map-address="120-124 Curtain Road, London, EC2A 3SQ" data-map-link="http://my-destination-link.com"></div> 

這裏是JavaScript我用它來生成地圖：

var map, 
    geocoder, 
    mapElem = document.getElementById('map'), 
    mapHolder = $('#map'), 
    mapAddress = mapHolder.attr("data-map-address"), 
    mapUrl = mapHolder.attr("data-map-link"), 
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png', 
     new google.maps.Size(123, 123), 
     new google.maps.Point(0,0), 
     new google.maps.Point(11, 96)); 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(51.51121, -0.11982), 
     mapOptions = { 
     zoom: 16, 
     disableDefaultUI: true, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(mapElem, mapOptions); 
} 

function codeAddress() { 
    geocoder.geocode({ 'address': mapAddress}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       url: mapUrl, 
       title: 'Click here to emlarge the map', 
       icon: image 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, 'load', codeAddress); 
google.maps.event.addListener(marker, 'click', function() { 
    window.location.href = marker.url; 
}); 

我會很感激，如果有人能夠幫助我解決這兩個問題。我在網上查找並嘗試了我找到的解決方法，但我無法使其正常工作。

謝謝！

Answer 1

1：我會把你的codeAddress()初始化在onload位內。請勿在初始化時設置中心，但請等待codeAddress()找到並設置位置。

2：你得到那個錯誤是因爲你把標記的eventlistener放在了錯誤的地方。在那裏它不知道變量是什麼。你需要將其放置在創建您的標記（您codeAddress()函數內部

var map, 
    geocoder, 
    mapElem = document.getElementById('map'), 
    mapHolder = $('#map'), 
    mapAddress = mapHolder.attr("data-map-address"), 
    mapUrl = mapHolder.attr("data-map-link"), 
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png', 
     new google.maps.Size(123, 123), 
     new google.maps.Point(0,0), 
     new google.maps.Point(11, 96)); 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var mapOptions = { 
      zoom: 16, 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
    map = new google.maps.Map(mapElem, mapOptions); 

    codeAddress(); 
} 

function codeAddress() { 
    geocoder.geocode({ 'address': mapAddress}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       url: mapUrl, 
       title: 'Click here to emlarge the map', 
       icon: image 
      }); 

      // Add your event listener 
      google.maps.event.addListener(marker, 'click', function() { 
       window.location.href = marker.url; 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 


} 

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

Answer 2

不確定鏈接失敗的原因，但要將地圖加載到正確的位置，必須首先對位置進行地理編碼，並且一旦獲得地圖API的響應，您可以然後用正確的起始位置建立你的地圖。

var map, 
geocoder, 
mapElem = document.getElementById('map'), 
    mapHolder = $('#map'), 
    mapAddress = mapHolder.attr("data-map-address"), 
    mapUrl = mapHolder.attr("data-map-link"), 
    image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png', 
    new google.maps.Size(123, 123), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(11, 96)); 

function initialize(geoLocation) { 
    mapOptions = { 
     zoom: 16, 
     disableDefaultUI: true, 
     center: geoLocation, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(mapElem, mapOptions); 
} 

function codeAddress() { 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 
     'address': mapAddress 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      initialize(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       url: mapUrl, 
       title: 'Click here to enlarge the map', 
       icon: image 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       window.location.href = marker.url; 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 
//Call codeAddress to initialize the geocoding. When that returns it will initialize the map with the geocode location 
codeAddress();