map marker array with InfoBox

Question

I'm pulling my hair out with this one. My overall aim is to display an info box which obtains its information from my marker array called store_pins.

For testing purposes I am just displaying an alert when one of the map markers is clicked which should display item 5 from the array. Eventually I will display an InfoBox containing an image and text.

I have a listener at the bottom of my code which works when the markers are clicked. The trouble is the information from my array is not being passed, and instead of displaying the text, all I am getting is [object Object] displayed in the alert.

Any clues to where I am going wrong would really be appreciated.

<script type="text/javascript">

    var map;
    var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";


    google.maps.event.addDomListener(window, 'load', initialize);
    
    function initialize() {
        var map_center = new google.maps.LatLng(55.144178,-2.254122);
        var store_pins = new Array();
        var pin_marker = new Array();

        
        store_pins = [
            ['Bellingham Co-Op', 55.144178, -2.254122,'pin','bellinghamcoop.jpg','Staff at Bellingham Co-Op'],
            ['Leicester Tigers - Kingston Park', 55.018754, -1.672230,'rugby','kingparktigers.jpg','Stu with the Leicester Tigers Rugby Team'],
            ['The Hawick PSA Team', 55.421825, -2.797123,'rugby','hawickpsa.jpg','The Hawick PSA Team'] // REMEMBER NO COMMA ON LAST ENTRY!!!
        ];

    var myOptions = {
        zoom: 3,
        minZoom: 3,
        center: map_center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
        map = new google.maps.Map(document.getElementById("trackingT-map"), myOptions);
    
        // Main Loop
        
        
        for(i=0;i<store_pins.length;i++)
        {
        var pos = new google.maps.LatLng(store_pins[i][1], store_pins[i][2]);
        var pinIcon = {
            url: 'icons/shirtpin.png',
            //The size image file.
            size: new google.maps.Size(50, 55),
            //The point on the image to measure the anchor from. 0, 0 is the top left.
            origin: new google.maps.Point(0, 0),
            //The x y coordinates of the anchor point on the marker. e.g. If your map marker was a drawing pin then the anchor would be the tip of the pin.
            anchor: new google.maps.Point(25, 20)
        };
        var pinShape = {
            coord: [0,0,50,55],
            type: 'rect'
        };

        pin_marker[i] = new google.maps.Marker(
            {
                position:   pos,
                map:        map,
                title:      store_pins[i][0],
                icon:       pinIcon,
                shape:      pinShape,
                zIndex:     107
           } 
        );

        descr = store_pins[i][5];
            
        // Popup Box
            google.maps.event.addListener(pin_marker[i], 'click', function(descr) {
                alert(descr);
            });
            
        // Popup Box End
            
} 
};
</script>

Answer 1

When you call alert(descr), it's trying to print the object itself instead of the information you want. You should move descr = store_pins[i][5]; into your pin_marker[i] options block:

pin_marker[i] = new google.maps.Marker(
            {
                position:   pos,
                map:        map,
                title:      store_pins[i][0],
                icon:       pinIcon,
                shape:      pinShape,
                zIndex:     107
                descr: store_pins[i][5] //add it here
           } 
        );

Then, in your onclick listener, you can just print out the information like this:

        google.maps.event.addListener(pin_marker[i], 'click', function() {
            alert(this.descr);
        });