[GIS] Google Map – display specific markers popup using a list of markers

google-maps-apijavascriptjquery

I have the following code:

<script type="text/javascript">
window.onload = function() {

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(50.8967,-1.40225),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }); 


            // Creating a global infoWindow object that will be reused by all markers
        var infoWindow = new google.maps.InfoWindow();

        var list = document.getElementById('latestprop');

        var customIcons = {
      2: {
        icon: 'img/markertwo.png',
        shadow:'img/shadow.png' ,
      },
      3: {
        icon: 'img/markerthree.png',
        shadow:'img/shadow.png' ,
      }

    };
    $.getJSON('Feed.php?source=properties', function(data) { 
                console.log(data);
         for (var i = 0; i < data.length; i++ ){

            // Looping through the JSON data

                var datanew = data[i] ;
                //alert (datanew.property_name);
                latLng = new google.maps.LatLng(datanew.lat, datanew.lon);

                    var iconimage = datanew.rooms;
                    var icon = customIcons[iconimage] || {};


                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    icon: icon.icon,
                    shadow: icon.shadow,
                    title: datanew.id
                });

                // add items
                var  available;
                var  propertyimg;
                var  location = "http://cherrybird.fourstudio.co.uk/" ;
                var listItem= document.createElement('div')
                listItem.className = "propertyhot";
                listItem.innerHTML = '<img src="'+ datanew.property_image+'" />'  +'<p>' + datanew.property_name +'<br />' + datanew.property_number +' ' + datanew.street_name +'<br />' + datanew.county +'<br />' + datanew.postcode +'<br />' + datanew.rooms +' Rooms</p><p class' + available + '> Available from:' + datanew.availability + '</p>';
                list.appendChild(listItem);

                (function(marker, datanew) {

                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function(e) {

                    //"Id:" + data[i].Id + "<br /> Property Name/Number:" + data[i].Propertynanu + "<br /> Rooms:" + data[i].Rooms
                        infoWindow.setContent('<img src="'+ datanew.property_image+'" />'  +'<p>' + datanew.property_name +'<br />' + datanew.property_number +' ' + datanew.street_name +'<br />' + datanew.county +'<br />' + datanew.postcode +'<br />' + datanew.rooms +' Rooms</p><p class' + available + '> Available from:' + datanew.availability + '</p>');
                        infoWindow.open(map, marker);
                    });


                })(marker, datanew);


            }
        });



    }



    </script>

What I want to do is dynamically add the list item to the page in divs then allow the user to click each div the relevent infoWindow will display on the map. I have done this with openlayers but now need to do it with Google maps.

I have got as far as adding the the list to page with the following:

// add items


    var  available;
                var  propertyimg;
                var  location = "http://cherrybird.fourstudio.co.uk/" ;
            var listItem= document.createElement('div')
                listItem.className = "propertyhot";
            listItem.innerHTML = '<img src="'+ datanew.property_image+'" />'  +'<p>' + datanew.property_name +'<br />' + datanew.property_number +' ' + datanew.street_name +'<br />' + datanew.county +'<br />' + datanew.postcode +'<br />' + datanew.rooms +' Rooms</p><p class' + available + '> Available from:' + datanew.availability + '</p>';
            list.appendChild(listItem);

The next step is to get it to display the infoWindow for the relevent marker when it is clicked in the list. Can anyone help with this.

Best Answer

create a function to loop through your addresses and create a marker for each one.
then call this function on the click event of your element (div, link, etc).

example:

HTML

<a href="javascript:google.maps.event.trigger(gmarkers['Location 1'],'click');" class="button3">Location 1</a>

<a href="javascript:google.maps.event.trigger(gmarkers['Location 2'],'click');" class="button3">Location 2</a>

<a href="javascript:google.maps.event.trigger(gmarkers['Location 3'],'click');" class="button3">Location 3</a>

JS

function createMarker(latlng, html) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

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

for (var i = 0; i < locations.length; i++) {
    gmarkers[locations[i][0]] =
    createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0] + "<br>" + locations[i][1]);
}

see it working here: http://jsfiddle.net/RASG/X5mhL/

PS: just a quick example. avoid using inline event handlers.

Related Question