Google map InfoWindow showing all address in the array rather than 1

Question

I have a google map and in my InfoWindow it is displaying all of the addresses in the info window. When i move the php variable out of my foreach array under this it only shows the last item in the array. Have i missed finishing the array or not declaring it properly within the infoWindow function?

Here is my code for support:

UPDATED CODE NOW PULLS IN MARKER_0, MARKER_1 ect instead of address (a,b,c,d).

<script type="text/javascript">
    $(document).ready(function() {
    //create an array to store lat n lon and type
    var lat= [];  
    var lon= [];  
    var type= [];
    var address= []; 

    var restaurant = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|FF0000|000000';
    var bar = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000';

    var x=0;    //to store index for looping  
    var map = null; //create a map and define it's value to null  
    var markerArray = []; //create a global array to store markers  
    var infowindow; //create infowindow to show marker information  


    //looping for getting value from database using php  
    <?php foreach($latlong as $row): ?>
        lat.push(<?php echo $row['lat']; ?>);  
        lon.push(<?php echo $row['long']; ?>);
        type.push(<?php echo $row['type']; ?>);
        address.push("<?php echo $row['address']; ?>");
     x++; 
    <?php endforeach; ?>

        function initialize() {  
            //set center from the map  
            var myOptions = {  
                zoom: 10,  
                center: new google.maps.LatLng(lat[0], lon[0]),  
                mapTypeControl: true,  
                mapTypeControlOptions: {  
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
                },  
                navigationControl: true,  
                mapTypeId: google.maps.MapTypeId.ROADMAP  
            }  
            //make a new map  
            map = new google.maps.Map(document.getElementById("map"), myOptions);  


            //define value and size for infowindow  
            infowindow = new google.maps.InfoWindow({  
                size: new google.maps.Size(150, 50)

            });  

            // Add markers to the map  
            // Set up markers based on the number of elements within the array from database  
            for (var i = 0; i < x; i++) { 
                createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i],address[i], 'marker_'+i);  
                ;
            }  
        }  
    function createMarker(latlng, type, id, address){
        var marker = new google.maps.Marker({  
            position: latlng,
            map: map,
            icon: type,
            id: id,
            address:address
        });
        google.maps.event.addListener(marker, 'mouseover', onMarkerClick);  
        markerArray.push(marker); //push local var marker into global array  
    }

    //create a function that will open infowindow when a marker is clicked  
       var onMarkerClick = function(latlng) {  
          var marker = this;  
          var latLng = marker.getPosition(); 
          infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>');
          infowindow.open(map, marker, marker.address);

        }; 


    window.onload = initialize;     
    });
</script>

and in firebug in my script section the data is outputted like this so i know it's pulling in the right info!

//looping for getting value from database using php

lat.push(lat);
lon.push(lng);
type.push(restaurant);
address.push("A");
x++;
lat.push(lat);
lon.push(lng);
type.push(bar);
address.push("B");
x++;
lat.push(lat);
lon.push(lng);
type.push(restaurant);
address.push("C");
x++;
lat.push(lat);
lon.push(lng);
type.push(bar);
address.push("D");
x++; 

Any help would be much appreciated.

Answer 1

You pass 4 arguments into your createMarker function:

createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i], address[i], 'marker_'+i);  

But then you only use 3 of them,

function createMarker(latlng, type, id){

shouldn't that function declaration be:

function createMarker(latlng, type, address, id){

And then you could add the address as a property to your marker:

var marker = new google.maps.Marker({  
            position: latlng,
            map: map,
            icon: type,
            id: id,
            address: address
        });

which you could then reference like so:

var onMarkerClick = function(latlng) {  
          var marker = this;  
          var latLng = marker.getPosition(); 
          infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>');
          infowindow.open(map, marker, marker.address);
        };