Monday, October 08, 2007
I recently used Google Maps API on my college website. It was somewhat tedious to read the API documentation and figure out how to code a simple map. So, here I'm writing a basic tutorial for adding a location map on your website.
Start by signing up for an API key. Go through this "Hello World" example of the Google Maps API. For a start, copy this code and run it. The first thing you would need to modify is the following:
The above code would produce the map of the desired location on your browser screen. Now lets see how to add-on some features on your map.
Adding an Info Window:
An info window is a call-out text from a particular location. To add an info window, just add the following line of code in the initialize() method:
Class Reference: GInfoWindow, GInfoWindowTab
Controls are a set of buttons which allow you to perform specific functions. To allow users to switch between different Map Types, viz. Map, Satellite and Hybrid; use the following statement in the initialize() method:
Class Reference: GControl
Adding a Marker:
A marker is used to mark a position on the map. For adding a marker on a specific point add the following lines of code in the initialize() method:
Class Reference: GMarker
These are just a few of the features of the Google Map API. These would be sufficient if you are planning to implement a simple location map on your website. For more advanced features of the Google Maps API, refer to the API Documentation.