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

Here is a great solution.

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Answer 2

This seems pretty good.

http://www.usnaviguide.com/v3maps/v3multipleinfowindows.htm

Answer 3

Here is something that works (RoR / Rails / Ruby on Rails):

<script type="text/javascript">
  function initialize() {
    var myOptions = {
      zoom: 12,
      center: new google.maps.LatLng(48.842, 2.34),
      // HYBRID ROADMAP SATELLITE TERRAIN
      mapTypeId: google.maps.MapTypeId.SATELLITE
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);

<% @tiles.each do |tile| %>
var image_id<%= tile.id %> = '<%= tile.photo.url(:icon) %>';
var myLatLng_id<%= tile.id %> = new google.maps.LatLng(<%=h tile.lat %>,<%=h tile.long %>);
var tileMarker_id<%= tile.id %> = new google.maps.Marker({
    position: myLatLng_id<%= tile.id %>,
    map: map,
    clickable: true,
    icon: image_id<%= tile.id %>
});

var infowindow_id<%= tile.id %> = new google.maps.InfoWindow({ 
    content: '<a href="<%= tile.photo.url(:original) %>"> <img src="<%= tile.photo.url(:large) %>" height="400" ALIGN="left" border="None"></a>'
 //'Tile: <%= tile.id %><BR/> User: <%= tile.user_id %>'
});
google.maps.event.addListener(tileMarker_id<%= tile.id %>, 'click', function() {
      infowindow_id<%= tile.id %>.open(map,tileMarker_id<%= tile.id %>);
});

<% end %>

}

There was a problem in the VB/... code that was answered before, the infowindow object must be unique per clickable marker. Demo on: http://www.geodepollution.org/

Answer 4

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);
    });
}

Answer 5

I tried the code from Sean Vieira, I was struggling to get the infowindow show me same corresponding markers Info.

If you have same problem try: Here we are setting info (you can keep any name ) and then latter will use it.

var marker = new google.maps.Marker({
            map: map,
            position: myLatlng,
            title: _park.title,
            info :    _park.infoWindowContent,    // note info here  
            clickable: true,
        });  

next see Content, so we are using the info we want to set to Marker

 google.maps.event.addListener(marker , 'click', function() {

            infowindow.setContent(this.info);
            infowindow.open(map,this);
        });

This worked for me.

Ref: https://tommcfarlin.com/multiple-infowindows-google-maps/