Google Maps API InfoWindow只顯示所有標記的第一個位置

Question

我一直在玩谷歌地圖API添加多個標記和樣式。我有這一切工作正常，但我無法工作的是每個標記的InfoWindow。我設法讓InfoWindow工作一點，但它只顯示所有標記的第一個位置/地址。

請注意，地址/位置將使用CMS系統添加，並且不會手動添加。

下面是我一直在努力與代碼：

$(document).ready(function() { 
    var map; 
    var elevator; 
    var myOptions = { 
     zoom: 3, 
     center: new google.maps.LatLng(50, -30), 
     mapTypeId: 'terrain' 
    }; 

    map = new google.maps.Map($('#map_canvas')[0], myOptions); 

    var styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}]; 

    map.setOptions({styles: styles}); 

    var addresses = [ '10007','75008','28008','21465','SE91AA',]; 


    for (var x = 0; x < addresses.length; x++) { 
     $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) { 
      var p = data.results[0].geometry.location 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 
      var pinColor = "academia.png"; 
      var pinImage = new google.maps.MarkerImage("/assets/images/pin-green.png", 
      new google.maps.Size(22, 31)); 

      var contentString = '<div>'+ addresses[0] +'</div>'; 


      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       clickable: true, 
       icon: pinImage, 
       title: addresses[0], 
       }); 

    google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString)); 

     }); 

    } 

    function getInfoCallback(map, content) { 
     var infowindow = new google.maps.InfoWindow({content: content}); 
     return function() { 
       infowindow.setContent(content); 
       infowindow.open(map, this); 
      }; 
    } 


    } 

Answer 1

隨着adresses[i]（I使用i代替x）我添加formatted_address從返回JSON。而我在玩弄這些部件只是加..請參考下面的代碼：

$(document).ready(function() { 
     var map; 
     var elevator; 
     var myOptions = { 
      zoom: 3, 
      center: new google.maps.LatLng(50, -30), 
      mapTypeId: 'terrain' 
     }; 

     map = new google.maps.Map($('#map_canvas')[0], myOptions); 

     var styles = [{ "featureType": "water", "stylers": [{ "color": "#46bcec" }, { "visibility": "on" }] }, { "featureType": "landscape", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "road", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road.highway", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#444444" }] }, { "featureType": "transit", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "stylers": [{ "visibility": "off" }] }]; 

     map.setOptions({ styles: styles }); 
     var iterator = 0; 
     var addresses = ['10007', '75008', '28008', '21465', 'SE91AA']; 

     for (var i = 0; i < addresses.length; i++) { 
       MarkMe(); 
     } 

     function MarkMe() { 
      var add = addresses[iterator]; 
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + add + '&sensor=false', null, function (data) { 
       var p = data.results[0].geometry.location 
       var o = data.results[0].formatted_address 
       var latlng = new google.maps.LatLng(p.lat, p.lng); 
       var pinColor = "academia.png"; 
       var pinImage = new google.maps.MarkerImage("/images/pin-green.png", 
       new google.maps.Size(22, 31)); 

       var content = '<div style="width: 150px;">' + o + '<br/>' + add + '</div>'; 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        clickable: true, 
        icon: pinImage, 
        title: o + '<br/>' + add, 
       }); 
       function getInfoCallback(map, content) { 
        var infowindow = new google.maps.InfoWindow({ content: content }); 
        return function() { 

         infowindow.setContent(content); 
         infowindow.open(map, this); 
        }; 
       }; 
       google.maps.event.addListener(marker, 'click', getInfoCallback(map, content)); 

      }); 
      iterator++; 
     } 
    }) 

它工作在我的身邊，只是定製你的願望。希望我幫..

Answer 2

你在這行有問題

var contentString = '<div>'+ addresses[0] +'</div>';

您要添加的address[0]即第一個元素的數組，所以它總是顯示相同的元素。

替換爲以下它，

var contentString = '<div>'+ addresses[x] +'</div>';