Google Maps JS API
With my involvement in the ongoing work on my undergrad college website, i was asked to churn out a simple piece of code for a dynamic Google map for the location of AIT. I already did this using Static Maps some time ago and it was recieved well. But, there was a huge demand for a dynamic map and after a quick 30 min revision of the JS API i managed this fragment of rather simple code:
[sourcecode language="javascript"]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(18.60700,73.87507);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//marker
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
title:"Army Institute of Technology, Pune, IN"});
marker.setMap(map);
//info window
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Army Institute of Technology</h1>'+
'<div id="bodyContent">'+
'<p style="width:100%"><img src="http://aitpune.com/picture/aitlogo2.gif" style="float:right" hieght="100" width="100"
alt="Onward to Glory"/> Dighi Hills,Alandi Road<br /> ' +
'Pune, INDIA-411015<br /><br />Phone: (020)27157534,27157612<br />Fax: 91-20-27157534<br />E-Mail:
ait@aitpune.com</p>'+
'</div>'+'</div>';
var infowindow = new google.maps.InfoWindow({content: contentString});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
[/sourcecode]
Simple enough really. Nothing to it. Go have a look at the Google Maps JS API 3 tutorial (Google it...) and you should be able to figure it out without any issues. As usual Google's documentation is brilliant.