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