Follow by Email

Aug 17, 2007

Hacking Google Maps

So I just recently had a customer who needed a map on his website, that I made for him. And because I have never put a map on website before I figured it would be a challenge, which is exactly what I wanted. So I gladly said I would do it. And within a couple hours of fooling around trying different techniques and searching the web I found te solution. The answer was simple and it is made by my favorite website GOOGLE. Google has feature called Google Maps. And since Google is part of the open source community a lot of times they will release source code and let you edit the features of some of there products. In order to do this you would need to know exactly what you want to edit.


For Example
Editing Google Email
Editing Google Desktop
Editing YouTube
Editing Google Maps
Editing Google AdSense
And tons of other things(if google has made it I bet you could edit it)


So if you want a map in your site is very simple. But first you need a few things.

Things You Need

1: A computer
2: An internet connection
3: A Google Account(if you don't have one it's easy to get one just sign up)
4: Basic Web Development Knowledge
5: A URL or a domain name. You can get one here
6: A fully functional brain

If you have all these things your all set to go. So this is what you would do. You go to the location of the APIs on Google. In this case it would My Account > More > Code > Google Apps > Google Maps API. For a visual example look at the pics down below More > Code Then Google Map's API Then Sign Up


Once your signed up you should have unique ID. You must use this in your site. And using someone else's wont work, because of the different URL. Now Google give you a sample google Map API to build of of. So you just need to copy and paste that code into the site you made. How ever the code is made for the location of Polo Alto. So if you want the map in a different area, you can't just say I want it to be centered on the Yankees stadium. Nor can you use addresses. This is pretty much the hard part of making your API. You need to know the Latitude & Longitude of the location of where you want the map to be centered at.


So how do you know what the Latitude & Longitude is?

I don't believe google provides any tools for finding the latitude and longitude, which is a shame. Because it makes life a whole lot more difficult. However if you do a google search on the web for Latitude and longitude you will get a wealth of tools, a lot of which I found either didn't work, where to complicated or where accurate but not precise. But here are some of the better and easier tools I found.
Address Converter(just type the address of the place you want to find. When I used this tool it got with in the first 30 miles away. So it is ok if you don't care that it is a little off, but sometimes you need it to be precise)
LatLonFinder(this is by far the easiest and funnest one to use. It is pretty much just plain old google maps that you can't do a search with just zoom in and out, and find out the longitude and latitude)
Latitude Longitude Position Finder(this one works the same way as LatLonFinder, but is a little more difficult)
I would suggest book marking the above links so you can have them to use when ever you decide to make a new Map.


Understanding The Code



First let's look at our sample code


So now let's look at the line of code that says map.setCenter(new GLatLng(37.4419, -122.1419), 13);
This is probably the most important lines of code in the google maps API. Pretty much this is the code that tells google where to point the map, and at what zoom level to have it at. So if I wanted to change the location of the map to be centered at the yankees stadium the code would look like this map.setCenter(new GLatLng(40.641967, --74.075399), 13);. Now this map isn't zoomed in close enough, I can't see the roads or anything. So I want to set the zoom level closer. So I would change the 13 to say a 16 in the line of code. So it would look like this map.setCenter(new GLatLng(40.641967, --74.075399), 16);

So now you've just learned how to hack Google Maps API. So now your on your way to making a big difference on how people view your website, or you might be changing the world with a cool new way to use google maps. And hey if google likes your idea enough they might want to have it might graduate and become a major part of google. Now that would be something to tell the kids about.

1 comment:

Lucy in Sky with Diamands said...

In your last blog, you spoke about using M$ Word to make a website. So could I put my map into the site made with M$ Word?