Google maps marker loading last record

Question

I am trying to add a group of markers to google maps each with a infomation window. I am using a mix of php and javascript to do this, the php gets all the records from the database and then the javascript adds all the markers to the map with the coordinates taken from the database.

Here is what I have so far:

<script type="text/javascript">
        function initialize() {

            var latlng = new google.maps.LatLng(<?=$lat?>, <?=$long?>);

            var settings = {
                zoom: 12,
                center: latlng,
                mapTypeControl: false,
                navigationControl: true,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

            var postcodeLogo = new google.maps.MarkerImage('/images/postcode_marker.png',
                new google.maps.Size(32,37),
                new google.maps.Point(0,0),
                new google.maps.Point(15,34)
            );

            var propertyLogo = new google.maps.MarkerImage('/images/property_marker.png',
                new google.maps.Size(32,37),
                new google.maps.Point(0,0),
                new google.maps.Point(15,34)
            );

            var infowindow = new google.maps.InfoWindow();  

            <?
            foreach ($results as $grid_refs)
            {
            ?>          

                    var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);

                    propMarker = new google.maps.Marker({
                        position: propPos,
                        map: map,
                        icon: propertyLogo,
                        title:"<?=$grid_refs['sd_name']?>",
                        zIndex: 3});

                    var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';

                    google.maps.event.addListener(propMarker, 'click', function() {
                            infowindow.setContent(contentString);
                            infowindow.open(map,this);
                        });

            <?
            }
            ?>


            var positionPos = new google.maps.LatLng(<?=$lat?>, <?=$long?>);

            var positionMarker = new google.maps.Marker({
                position: positionPos,
                map: map,
                icon: postcodeLogo,
                title:"<?=$_GET['searchpostcode']?>",
                zIndex: 3});


        }
    </script>

The positionMarker is where the user enters the postcode they want to search by. The propMarker marks all of the places on the map which then show.

In the code all the information is showing, however on the map each info window opens with the last retrieved record - where I want it to load the information relevant to that marker.

I have looked at this question:

Google Maps infoWindow only loading last record on markers

which will work, but I cant seem to get a js for loop working with the php foreach, I have tried it within the php foreach and outside of.

I THINK what I need is the forearch loop to change the name of the variable and contentString each time it creates a marker, but I can seem to get this working?

Any help much appreciated!

Answer 1

What happens is that you loop round all the markers, but at the very last iteration, that content that you've set into contentString becomes what's then used for all the click events.

Instead, delegate this off to another function (or use a closure), e.g.

            <?
            foreach ($results as $grid_refs)
            {
            ?>          

                    var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);

                    propMarker = new google.maps.Marker({
                        position: propPos,
                        map: map,
                        icon: propertyLogo,
                        title:"<?=$grid_refs['sd_name']?>",
                        zIndex: 3});

                    var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';

                    // add an event listener for this marker
                    bindInfoWindow(propMarker, map, infowindow, contentString);
            <?
            }
            ?>

Then add a new function:

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
}