Playing with Google maps API

worldIn my spare time, these days I’m looking at Google maps (Javascript) API, because relatively soon, I will have to realize a web site in which include a custom and interactive map.
In detail the site will be the official web page of an Italian bikers group, which will attempt to enter in the World Records Guinness as the largest bike aggregation of the same model (and I’ll be one of those crazy men! :-)))
The user will be able to subscribe to the event indicating his city and some other details.
And is here that the interactive map comes into play! It will shows the Italian map sprinkled by colored labels anchored to the main cities and indicating the total of subscribers in that city.
The label’s color will vary due to that number (green = few bikers, yellow = so so, red = many bikers).

I’ve already developed a working map, that loads a datasource (in my test a simple .txt file which contains a JSON formatted string) with ajax and then shows the labels on the map (after a Flash like preloader), but it can be improved considerably.
However in the next days I will describe all the necessary steps and know-how to achive the goal.
I will split the… tutorial? description?…ah ah, I don’t know how to call it… let’s say story, into 2 parts:

Part 1

1. Getting a key to use the API
2. Setting up the basic map
3. Positioning the map on a given location
4. Add custom controls for zoom, map type, and navigation
5. Geolocation’s service (find latitude and longitude of a given address)

Part 2

6. Creating a custom overlay object by extending the GOverlay class
7. Display the custom overlay on a given location
8. Handle multiple geolocation requests and overlay together
9. Freeze the map and display a progress bar until geolocation process has finished

The first is the easy part and doesn’t require a good javascript knowledge nor particular html or css skills, the second is not so hard, but requires a pretty good understanding of javascript, prototype, css and ajax.
Stay tuned ;-)