CODEWITHSUNDEEP
javascriptarraysgoogle-maps-api-3
Kalvin Klien
Kalvin Klien

Reputation: 921

Google Maps - Array

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>

Upvotes: 0

Views: 1260

Answers (2)

Kalvin Klien
Kalvin Klien

Reputation: 921

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>

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

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.

Upvotes: 1

Related Questions