Saturday, May 10, 2014

Google Map V3, Multiple Markers with its InfoWindows (Balloon)


I hope this post will help you because even on google sites I did not find tutorial about this yet.

Lets Rock !!

1:  var markerArr = [  
2:          ['Bondi Beach', -33.890542, 151.274856],  
3:          ['Coogee Beach', -33.923036, 151.259052],  
4:          ['Cronulla Beach', -34.028249, 151.157507],  
5:          ['Manly Beach', -33.80010128657071, 151.28747820854187],  
6:          ['Maroubra Beach', -33.950198, 151.259302]  
7:         ];  
8:   var mapProp = {  
9:      center:new google.maps.LatLng(-33.890542, 151.274856),  
10:      zoom:5  
11:      };  
12:   var map=new google.maps.Map(document.getElementById('MAP_CANVAS') //fill with your id  
13:      ,mapProp);  
14:  //Loop markers  
15:   for (var i = 0; i < markerArr.length; i++) {  
16:    var dot = markerArr[i];  
17:    var myLatLng = new google.maps.LatLng(dot[1],dot[2]);  
18:    var infowindow = new google.maps.InfoWindow({  
19:     }); //Just create InfoWindow Object  
20:     var marker = new google.maps.Marker({  
21:       position: myLatLng,  
22:       map: map,  
23:       title: dot[3],  
24:      html : dot[0] // info window content,  
25:     });  
26:     google.maps.event.addListener(marker, 'click', function() {  
27:      infowindow.setContent(this.html); //yeah got its content  
28:       infowindow.open(map,this);  
29:      });  
30:   }  





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


0 comments:

Post a Comment