Sometimes you need to add a map to your location in your site so that the users can reach you easily. what i like about Google maps is their API, it is very structured , easy to understand and the documentation is excellent.
So follow me in the next few steps:
1.You need to register a key
go to http://code.google.com/apis/maps/signup.html , and enter your site URL. your key will be generated and you will find a lot of ways to include Google Maps , here we will include Google Maps into web pages using Javascript.
for example
<script src=http://maps.google.com/maps?file=api&v=2&&key=YourKey type="text/javascript"></script>
2.Documentation
i totally recommend you to keep an eye on the documentation
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html
3. Map.html
<html>
<head>
<title>My First Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAt_j1jxA-
OrN2zgFscf196hQ81ypfsrwFppodUYGd3WJUYwK81BQMmvl7uCUsxJJdrC9XnVo-dI7fZQ" type="text/javascript"></script>
<!—Google.js is the file that will define RenderMap(DivID)-->
<script src="Google.js" type="text/javascript"></script>
<script type="text/javascript">
function LoadMap () {
RenderMap('GoogleMap');
}
window.onload=LoadMap;
</script>
</head>
<body>
My Map will be in this Div
<div id="GoogleMap" style="width:500px;height:500px;">
</div>
</body>
</html>
4. Google.js
function RenderMap(DivID)
{
var MapDiv = document.getElementById(DivID);
var GoogleMap = null;
if (GBrowserIsCompatible()) {
GoogleMap = new GMap2(MapDiv);
//Add Navigation Control and Zoom Control on the Map
GoogleMap.addControl(new GSmallMapControl());
GoogleMap.addControl(new GMapTypeControl());
//Enable Scrolling on the Mouse Wheel
GoogleMap.enableScrollWheelZoom();
//Next we will add a marker to our company
//Company Latitude And Longitude
//You can get your Latitude And Longitude From Google Earth , i entered random values
var CompanyLongLat = new GLatLng(29.449790329784214, 28.9599609375);
//Company Marker On The Map
var CompanyMarker= new GMarker (CompanyLongLat) ;
//we need to add a "left click" event to the marker
//when the user click on the marker , a balloon will appear that has the address information
GEvent.addListener(CompanyMarker,"click", function() {
var AddressInfo= 'My Address Information';
CompanyMarker.openInfoWindowHtml(AddressInfo);
});
//Finally , add the Company Marker to the map
GoogleMap.addOverlay(CompanyMarker);
GoogleMap.setCenter(CompanyMarker.getLatLng(),10);
}
}
That is all , Enjoy
