Google Maps infobox Contenu "Indéfini" Erreur

Question

J'essaie d'ajouter infobox pour les marqueurs de carte Google en utilisant le plugin Google Maps Utility (InfoBox). Je suis confronté à un problème définissant la valeur du contenu. Tout ce que je reçois est un "Undefined" à la place sur le texte réel.

S'il vous plaît aidez-moi à trouver le problème. Merci.

<script> 

var addressArray = ['Beatrice, US', '1790 Inman Valley', 'Connaught Place, New Delhi']; 
var userInfox = ['My Name', 'Shannell ', 'XtraWize']; 

var geocoder = new google.maps.Geocoder(); 
var markerBounds = new google.maps.LatLngBounds(); 

function mapInit() { 

    var originLat = '54'; 
    var originLong = '-2'; 
    var latlng = new google.maps.LatLng(originLat, originLong); 

    var mapOptions = { 
     zoom: 2, 
     center: latlng, 
     navigationControl: true, 
     mapTypeControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    addMarkers(); // add the markers and info windows to the map 

} 


function addMarkers() { 
    for (var i = 0; i < addressArray.length; i++) { 

     geocoder.geocode({ 'address': addressArray[i] }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location 
         }); 
       markerBounds.extend(results[0].geometry.location); 
       map.fitBounds(markerBounds); 

       var boxText = document.createElement('div'); 
       boxText.style.cssText = 'border: 1px solid black; background: #DDD; padding: 5px;'; 
       boxText.innerHTML = '<bold>'+ userInfox[i] +' &mdash; Random Text</bold>'; 

       var boxOptions = { 
        content: boxText, 
        disableAutoPan: false, 
        maxWidth: 0, 
        pixelOffset: new google.maps.Size(-140, 0), 
        zIndex: null, 
        boxStyle: { 
         background: 'url(tipbox.gif) no-repeat', 
         opacity: 0.75, 
         width: '280px' 
        }, 
        closeBoxMargin: '2px 2px 2px 2px', 
        closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif', 
        infoBoxClearance: new google.maps.Size(1, 1), 
        isHidden: false, 
        pane: 'floatPane', 
        enableEventPropagation: false 
       }; 

       var ib = new InfoBox(boxOptions); 
       google.maps.event.addListener(marker, 'click', function (e) { 
        ib.open(map, this); 
       }); 

      } 
     }); 
    } 
} 


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

</script> 

Dans le code ci-dessus à userInfox [I], la valeur de i est "3" pour tous les marqueurs. Pas certain de pourquoi?

Answer 1

Voici la solution. Je n'économisais pas la valeur de "i". Donc j'ai toujours fini avec la dernière valeur de l'i dans la boucle.

function addMarkers() { 
for (var i = 0; i < addressArray.length; i++) { 

(function(j) { 

geocoder.geocode({ 'address': addressArray[j] }, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location 
     }); 
markerBounds.extend(results[0].geometry.location); 
map.fitBounds(markerBounds); 
var boxText = document.createElement('div'); 
boxText.style.cssText = 'border: 1px solid black; background: #DDD; padding: 5px;'; 
boxText.innerHTML = j + '<strong>'+ userInfox[j] + ' &mdash; ' + addressArray[j]; 

var boxOptions = { 
    content: boxText, 
    disableAutoPan: false, 
    maxWidth: 0, 
    pixelOffset: new google.maps.Size(-140, 0), 
    zIndex: null, 
    boxStyle: { 
    background: 'url(tipbox.gif) no-repeat', 
    opacity: 0.75, 
    width: '280px'}, 
    closeBoxMargin: '2px 2px 2px 2px', 
    closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif', 
    infoBoxClearance: new google.maps.Size(1, 1), 
    isHidden: false, 
    pane: 'floatPane', 
    enableEventPropagation: false 
    }; 

    var ib = new InfoBox(boxOptions); 
    google.maps.event.addListener(marker, 'click', function (e) { 
    ib.open(map, this); 
    }); 
    } 
    }); 
}) (i); 
} 
}