Google지도 API InfoWindow는 모든 마커의 첫 번째 위치 만 표시합니다.

Question

나는 여러 마커와 스타일을 추가하는 Google지도 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

내가 돌아 JSON에서 formatted_address 추가 (내가 대신 x의 i를 사용), 다음으로 교체합니다. 희망은 내가 도움이 .. 당신이 원하는대로 그냥 사용자 정의, 그것은 내 옆에 노력하고 있습니다

$(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]를 추가 , 그래서 항상 같은 요소를 보여줍니다.

은 adresses[i]과 함께

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