Playing with Google Maps

I think that this is the first ‘technical’ post I am writing since I started blogging… or perhaps the second or third lol…

Why this post?

Well, in fact, I was googling a bit to look for some code which will allow me to Include Google Map into my posts, if ever I find the need to. There are some good tutorials and examples on the web, without forgetting the essential Google Map API documentation.

After successful implementation of what I initially needed, I wanted to share the code, together with simple explanations.

The final working map…

Click on the markers to display more information and related post.

http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAI7Vxz9pxU2d5YuBAdVSblRQYmiTvB5o1FvWmH2lC4aTV_0LGDRSWGihr1otmY9mGb1poZe1O-ZqmqA
http://www.yashvinblogs.com/googlemaps.js

First tryout…

The most simplest way to include a google map onto any of your web page is to include the google map iframe into the page itself, nothing more easy than that!

Go to the Google Map Page and then, look for the location you want to display.

For instance, Type “Port Louis, Mauritius” into the search bar to locate it on the map.

Click on the LINK as shown below to get the direct URL to this location or the Iframe code.

Now, just paste the iframe code into your html page, thats all, no need for any google map api or even html knowledge!

A bit more technical way of including google api

Now read this, if you want something more technical and precise, for instance adding markers and info windows on your google map (Just like I did above)

1. Sign up for a google map api key
2. Copy paste the code below into the head section of your web page.

http://maps.google.com/maps?file=api&v=2&key=yourkeyhere

    //
    function load() {
      if (GBrowserIsCompatible())
      {
	var map = new GMap2(document.getElementById("map"));
	// This is the actual url that has been copied from the Google Map page
	// http://www.google.com/maps?f=d&saddr=-20.168736,
	// 57.507591&daddr=-20.167653,57.508155&hl=en&
	// geocode=&mra=mi&mrsp=1&sz=18&sll=-20.168731,57.507581
	// &sspn=0.002991,0.005686&ie=UTF8&t=h&ll=-20.167639,57.508026
	// &spn=0.002991,0.005686&z=18
	// where 17 is the zoom level
	map.setCenter(new GLatLng(-20.168731,57.507581), 17);
	// Adding the small overview map at the bottom
	map.addControl(new GSmallMapControl());
	// Removing the unwanted map types from the display,
	// leaving only the Satellite mode ON
	map.removeMapType(G_HYBRID_MAP);
	map.removeMapType(G_NORMAL_MAP);
      }
    }
    //]]>
    
Modify the body of your page
[...]body onload="load()" onunload="GUnload()" [...]

Adding Markers

Now, if you wish to mark some buildings or your car, lol, add the following code into the javascript function:

var markerDCDMC = new GMarker(new GLatLng(-20.168736, 57.507591));
map.addOverlay(markerDCDMC);

The code above will add a marker at the longitude and lattitude specfied.

If you wish to display an info box like in my final map when you click on the marker, add this:

var WINDOW_HTML_DCDM = 'your html code here into a div';

GEvent.addListener(markerDCDMC, "click", function() {
markerDCDMC.openInfoWindowHtml(WINDOW_HTML_DCDM);
});

You can add various markers on the same map, just take care to handle the code properly.

Disclamer (lol):
Hope this post will come useful for some of you, but please note that there may be other ways to do this, and perhaps, the way I showed you is not the correct way.
Anyway, as someone said : "Tous les chemins mènent à Rome"

Thats all from me for today, see you later at the same url for another story taken from another page of my life...