Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question
    
so, if it helped you, could please accept my answer? thanks. –  RASG Oct 31 '12 at 19:09

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.