Google Maps - Array

Question

Hey guys I just started a new project with google maps. I'm a newbie in both javascript and google maps API.

UPDATED: What I'm trying to do is to add a informationWindow to each marker with different content. So when the marker is clicked, the content for that specific marker pops up.

Right now only the 4th element pops up. I need so that every marker pops up with information.

Is there any other way of doing this?

Thanks in advance,

UPDATED:

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>    


     var myLatlng = new google.maps.LatLng(53.014783, -95.097656);

     var iterator = 0;

     var neighborhoods = new Array(
         new Array("test1","49.165206","-122.665443"),
         new Array("test2","49.14476","-121.98544"),
         new Array("test3","49.162063","-122.667675"),
         new Array("test4","48.455005","-123.54155"),
         new Array("test5","51.038156","-114.035339") 
     );

     var markers = [];

     function initialize()
     {        
        var mapOptions = {
           zoom: 4,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);               


         /*for (var i = 0; i < neighborhoods.length; i++)
         {
             markers[iterator] = new google.maps.Marker(
                 {
                     position: neighborhoods[iterator],
                     map: map,
                     title: 'Hello World!'
                 }
             );        
             iterator++;
         };*/


        var infowindow = new google.maps.InfoWindow({

        });         

        for(var i = 0; i < neighborhoods.length; i++)
        {

            var marker = new google.maps.Marker(
                 {
                     position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
                     map: map,
                     title: neighborhoods[i][0]
                 }
             );

            var test = neighborhoods[i][0];

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

     };   


    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>
    <!--button id="drop" onclick="drop()">Drop Markers</button-->
  </body>
</html>

Is there a reason you can't use a for loop? Is a while loop acceptable? — Snuffleupagus
– Snuffleupagus, Commented Aug 17, 2012 at 21:53
wouldnt that iterate through the array one time and stop looking for the click event? I need some kind of a listener, that would know which marker was clicked. — Kalvin Klien
– Kalvin Klien, Commented Aug 17, 2012 at 21:57
I sort of found an answer to the question: stackoverflow.com/questions/2589813/… Using bindInfoWindow to add info window to the marker. — Kalvin Klien
– Kalvin Klien, Commented Aug 17, 2012 at 22:00

geocodezip · Accepted Answer · 2012-08-18 21:52:37Z

1

Here is an example which I ported to the Google Maps API v3 from Mike Williams' Google Maps API (v2) tutorial that has multiple markers with unique infowindows, it uses function closure to associate the infowindow content with the marker.

answered Aug 18, 2012 at 21:52

geocodezip

162k14 gold badges228 silver badges256 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalvin Klien Over a year ago

Thanks! I did something similar to that by combining a bunch of answers from stackoverflow.

Kalvin Klien · Accepted Answer · 2012-08-20 16:41:14Z

The final version is:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>    


     var myLatlng = new google.maps.LatLng(53.014783, -95.097656);

     var iterator = 0;

     var neighborhoods = new Array(
         new Array("test1","49.165206","-122.665443"),
         new Array("test2","49.14476","-121.98544"),
         new Array("test3","49.162063","-122.667675"),
         new Array("test4","48.455005","-123.54155"),
         new Array("test5","51.038156","-114.035339") 
     );

     var markers = [];

     function initialize()
     {        
        var mapOptions = {
           zoom: 4,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);               

        infowindow = new google.maps.InfoWindow({

        }); 


        for(var i = 0; i < neighborhoods.length; i++)
        {

            var marker = new google.maps.Marker(
                 {
                     position: new google.maps.LatLng(neighborhoods[i][1], neighborhoods[i][2]),
                     map: map,
                     title: neighborhoods[i][0],
                     html: neighborhoods[i][0],
                     animation: google.maps.Animation.DROP
                 }
             );

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

     };   


    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="width: 1000px; height: 700px;">map div</div>    
  </body>
</html>

Collectives™ on Stack Overflow

Google Maps - Array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related