0

I am trying to add infobox for Google map markers using the Google Maps Utility Plugin (InfoBox). I am facing problem defining the value of content. All that I get is an "Undefined" instead on actual text.

Please help me find the problem. Thanks.

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

In the code above at userInfox[I], the value of i is "3" for all markers. Not sure why?

xtrawize
  • 1
  • 1
  • Your code seems to be correct...but check if it refers to the `i` value properly...may be its nested.. – Premshankar Tiwari Jul 28 '13 at 09:04
  • possible duplicate of [google map info window multiple addresses via xml](http://stackoverflow.com/questions/13278368/google-map-info-window-multiple-addresses-via-xml) ([working example using function closure](http://www.geocodezip.com/v3_SO_simpleMap_InfoBoxUndefinedContentA.html)) – geocodezip Jul 28 '13 at 11:28
  • I cannot find the problem. The value of "i" is working for addressArray[i], but it fails for the other array that refers to users list. – xtrawize Jul 29 '13 at 05:02

1 Answers1

0

Here's the solution. I was not saving the value of "i". So I always ended up with the last value of the i in the loop.

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);
}
}
xtrawize
  • 1
  • 1