Google Maps Tutorial - Preliminary
I've been playing around with Google Maps for fun lately. In order to teach myself the basics I assigned myself a simple project. I'm going to develop a Google Maps taxi application. Here are the requirements:
- Text box: where you can enter an address you want to center on
- Left click: will place markers on the map that indicate boundary points
- Boundary: you can click as many markers as you want. If you click back to the original marker the boundary region will close.
- Reshape: you can reshape the boundary region by moving the markers.
- Place taxi: right clicking on the map will place a taxi.
- Reverse geocoding: a text bubble will pop up that indicates the actual address of the taxi (e.g. 123 Main street).
- Inside/Outside: the marker indicating the taxi will change color depending on whether it is inside or outside the region specified by the boundary.
That's it!
The purpose of this application is for a taxi operator to be able to specify boundary regions for different taxis on the map, which the taxi operators can use to see if they are inside or outside their regions. I guess to make this more useful the application should be able to get the boundary points from a database sitting on some server, but that would make the google maps part of the problem simpler, while making it more of a AJAX problem, so I wont go there.
Google maps exposes a nice Javascript API, so we can do all of the things I mentioned above with client side Javascript code.
So lets get started.
API Key. First step is to get the Google Maps API key from Google: http://code.google.com/apis/maps/
Generate First Map. To create to create a map you need to create a GMap2 object, and then using the "setCenter" method you can specify the center and zoom as in the code snippet below.
-
zoom = 15;
-
map = new GMap2(document.getElementById("map_canvas"));
-
var center = new GLatLng(37.4419, -122.1419);
-
map.setCenter(center, zoom);
See the end result in this sample web page. Use view source feature of you web browser to see the full source code.
N.B. If you are going to use the above source you need to modify the "key=<put your key here>"
I anticipate each of the 7 items listed above will be a separate post. The first post coming soon will be adding a text box to specify the map center.
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
[...] promised part 1 of the Google Maps tutorial. See the original post for the plan for this series of [...]