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