Saturday, November 6, 2010

Your First Google Map Application

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 , 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=;v=2&amp;&amp;key=YourKey type="text/javascript"></script>

i totally recommend you to keep an eye on the documentation
3. Map.html 

        <title>My First Google Map</title>
        <script src=";v=2&amp;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 () {
        My Map will be in this Div 
        <div id="GoogleMap" style="width:500px;height:500px;">
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

//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'; 

//Finally , add the Company Marker to the map 



That is all , Enjoy