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>';