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 infowindows for each.

I am generating a map using the V3 API within an ASP-based website, with markers being created from a set of DB records. The markers are created by looping through a rs and defining a marker() with the relevant variables:

            var myLatlng = new google.maps.LatLng(lat,long);
            var marker = new google.maps.Marker({
                    map: map,
                    position: myLatlng,
                    title: 'locationname',
                    icon: 'http://google-maps-icons.googlecode.com/files/park.png'
            });

This is creating all the relevant markers in their correct locations.

What I need to do now, and am not sure of how to achieve is give each of them their own unique infowindow which I can use to display information and links relevant to that marker.

Source

                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
                <script language="javascript">
                $(document).ready(function() {

                     //Google Maps 
                        var myOptions = {
                          zoom: 5,
                          center: new google.maps.LatLng(-26.66, 122.25),
                       mapTypeControl: false,
                          mapTypeId: google.maps.MapTypeId.ROADMAP,
                       navigationControl: true,
                       navigationControlOptions: {
                         style: google.maps.NavigationControlStyle.SMALL
                       }

                        }

                        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                      <!-- While locations_haslatlong not BOF.EOF -->
                            <% While ((Repeat1__numRows <> 0) AND (NOT locations_haslatlong.EOF)) %>
                      var myLatlng = new google.maps.LatLng(<%=(locations_haslatlong.Fields.Item("llat").Value)%>,<%=(locations_haslatlong.Fields.Item("llong").Value)%>);
                      var marker = new google.maps.Marker({
                       map: map,
                       position: myLatlng,
                       title: '<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>',
                       icon: 'http://google-maps-icons.googlecode.com/files/park.png',
                       clickable: true,
                      }); 
                      <% 
                      Repeat1__index=Repeat1__index+1
                      Repeat1__numRows=Repeat1__numRows-1
                      locations_haslatlong.MoveNext()
                      Wend
                      %>           
                            <!-- End While locations_haslatlong not BOF.EOF -->

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

                      google.maps.event.addListener(marker, 'dblclick', function() {
                      map.setZoom(14);
                      });


                                    });

Sean Vieira · Accepted Answer · 2011-02-15T21:10:11.593

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

Thank you, this has put me on the path to enlightenment (and better understanding of using Arrays too). It just looks like some of the JS output I'm getting is a little buggy which is causing the map not to load. Firebug is reporting the following problem: missing } after property list, Line 85 I've chucked a copy of the resultant source code at: http://sites.google.com/site/forestproductswa/ The only difference about this line is that the result of the field used to populate infoWindowContent at that line has a space in it. Everything looks perfect otherwise, and all balanced. — thewinchester, May 21 '10 at 08:31
@thewinchester, apologies, I had a typo in the array-generation portion. (When we populate `title` and `infoWindowContent` we are expecting strings, and should therefore put quotes around the data. I'd left them out of my original answer.) I've edited my answer. — Sean Vieira, May 21 '10 at 12:17
Just trying to figure out the 'right' way to do this- looks awesome. ...I think you mean: locations_array[x] — therealsix, Feb 15 '11 at 20:56

score 0 · Answer 2 · answered Jun 29 '10 at 16:18

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/

score 0 · Answer 3 · answered Sep 16 '10 at 18:04

0

Here is a great solution.

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

answered Sep 16 '10 at 18:04

Colin Wiseman

11

score 0 · Answer 4 · answered Dec 05 '18 at 07:03

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/

score 0 · Answer 5 · answered Nov 23 '11 at 15:24

0

This seems pretty good.

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

answered Nov 23 '11 at 15:24

Sarkie

272
3
18

Display multiple markers on a map with their own info windows

5 Answers5

Linked