Display multiple markers on a map with their own info windows

Question

I need to display multiple markers on a map, each with their own infowindow. I have created the individual markers without a problem, but don\'t know how to create the infow

Answer 1

The problem is in your call to addListener()

While you loop through your recordset and write out the javascript again and again and again and again for adding a marker to the map, you only call the event listener once. Also, you never actually create any objects of the InfoWindow type, so you never have anything to call open() on.

The quick and dirty solution is to add this after you create your marker but before you end your While loop.

var infowindow = new google.maps.InfoWindow({ 
    content: '<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>' 
});
google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
});

But don't do this -- you're using VB to write totally redundant Javascript for you, when you could be using VB to fetch what you need, and then let Javascript do the work that you need done with the data.

The better way to do what you are trying to do is to rewrite your VB to create an array of Javascript objects, each one containing a park's information. Then use Javascript to loop over that array and set up the markers and their associated infoWindows for you.

Outlining the proposed solution:

// Create an array to hold a series of generic objects
// Each one will represent an individual marker, and contain all the 
// information we need for that marker.  This way, we can reuse the data
// on the client-side in other scripts as well.
var locations_array = [<%
While (
    (Repeat1__numRows <> 0) 
    AND (NOT locations_haslatlong.EOF)
) 
%>
{ 
latitude: <%=(locations_haslatlong.Fields.Item("llat").Value)%>,
longitude: <%=(locations_haslatlong.Fields.Item("llong").Value)%>,
title: "<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>",
infoWindowContent: "<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>"
},
<% 
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  locations_haslatlong.MoveNext()
  Wend
%>];

var x = locations_array.length;
while (--x) {
    // Grab an individual park object out of our array
    var _park = locations_array[x]
    var myLatlng = new google.maps.LatLng(_park.latitude,_park.longitude);
    var marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        title: _park.title,
        icon: 'http://google-maps-icons.googlecode.com/files/park.png',
        clickable: true,
    }); 
    var infowindow = new google.maps.InfoWindow({ 
        content: _park.infoWindowContent
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}