23 March 2013

How to display multiple markers on google maps?

Few months ago, I had a task of integrating Google Maps, after many attempts, I was successful in implementing it

After following simple steps you can integrate it very easily

First of all, include following scripts in your HTML page

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"> </script>



Now add following tag in your page

<div id = "map_canvas" style = "width:300px;height:300px;"></div>

Now just add following chunk of code

<script>
$(document).ready(function(){
var location = [{"latitude":33.82353,"longitude":-117.9659037,"html":"1721 W. Katella Ave Ste P Anaheim92804","popup":false},{"latitude":33.8749591,"longitude":-117.9659037,"html":"119 W. Orangethorpe Ave Fullerton92833","popup":false}]  
var map;
var lat = location[0]["latitude"];
var long =  location[0]["longitude"];

var myOptions = {
center: new google.maps.LatLng(lat, long),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < location.length; i++) {     
marker = new google.maps.Marker({position: new google.maps.LatLng(location[i]["latitude"], location[i]["longitude"]), map: map});      google.maps.event.addListener(marker, 'click', (function(marker, i) {        
return function() {           
infowindow.setContent(location[i]["html"]);           
infowindow.open(map, marker);        
}       })(marker, i));   }  }); 
</script>

Note the variable : locations, here you need to pass lat, long explicitly or you can form this json string through your own php code

If still any issues, then feel free to put your queries

No comments:

Post a Comment