Multiple infowindows - tearing my hair out

Posted by thewinchester on Stack Overflow See other posts from Stack Overflow or by thewinchester
Published on 2010-05-20T02:31:48Z Indexed on 2010/05/20 2:40 UTC
Read the original article Hit count: 309

Ok, I'll admit I'm nowhere near the best programmer on the planet - and I'm used to the answer staring me right in the face but not making sense of it.

Problem

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.

Steps so far

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


                                    });

© Stack Overflow or respective owner

Related posts about google-maps-api-3

Related posts about jQuery