I have been messing around with Google Maps API at work, trying to create a nice overlay showing all the cities in which we provide services. It’s still a work in progress, but I decided to have some fun with it.
So I created this little map of Montclair State University. I noticed that for example Google Maps can’t geolocate Richardson Hall. So I annotated few of the most notable buildings by using hard coded coordinates. Enjoy!
I might update this later on to include notations for other buildings. Heh… If I remove the insulting stuff maybe I can pitch this idea to either Dr. Bredlau or Dr. Deremer, and perhaps get a nice Google Map included on the cs web page. I could create custom bell-tower icons and all. :P
Here are few tips for creating your own Google Map:
- You can get the basic page skeleton directly from the Google Maps API page
- The tutorial on that page will walk you through how to create simple maps and overlays.
- If you want to display a hybrid map you must include this line in you load() function:
map.setMapType(G_HYBRID_TYPE);
Make sure that you call the map.setCenter function first – otherwise it won’t work. This drove me absolutely crazy today.
- The map.setCenter method takes magnification as the last parameter:
map.setCenter(new GLatLng(40.86229,-74.196194), 17);
If you pass 1, the map will display the whole world. The higher the number, the closer you get. I think the highest value you can use is around 20.
- If you want to do geocoding, here is how it works. The getLatLng method in the GClientGeocoder class takes two parameters. First one is a string representing address. The second is the function pointer. When you execute the method, it will execute the function you pass in and either call it with a valid point value or null if the address is not found. The example in the tutorial uses an anonymous inline function – here is an example that might be a little bit cleaner:
var address = "Montclair, NJ";
geocoder.getLatLng( address,
function(point)
{
if (!point) // if address is not found
{
alert(address + " not found");
}
else
{
var marker = new GMarker(point);
map.addOverlay(marker);
}
});This code will display a marker on the map pointing at Montlcair. Instead of inlining the function you can just pass a pointer if you feel like it.
The Maps API a little convoluted, but I’m slowly getting the hang of it. There is some really cool stuff that can be done with it. I’m thinking about creating a some collaborative map where MSU students could tag their own favorite spots on the map, and include notes about certain areas. It could be really cool. Hell, it would be awesome if the satellite images were more up to date. :P
[tags]google maps, google maps api, maps, api, javascript, montclair, msu[/tags]
Pingback: Guit Search