Wednesday, May 6, 2009

Google Maps - just the basics please

My Spiderweb Logic CMS has had Google Maps integrated into it for a couple years, so I havent had to focus on this for a bit. However, someone just asked me how to integrate Google Maps into their website. This is never a 2 sentence explanation. Here are the basics:

First figure out what you want.

I want GOOGLE MAPS imbedded IN my website:

You will need to use the API to build your map. Reviewing the official documentation will help with "how do I" questions specific to your website.


1) COPY/Paste code for your website

This is the best method:
They give you a bunch of javascript. Put it between the head tags.

Don't forget to create a "div" tag in the body with the id of "map" to contain your map.

2) Get a Google API Key for your website (even if it is localhost)

3) Replace the ABCDEFG in the above template with your google key.

4) Find the longitude/latitude of the location you want to center on.
Get longitude and latitude. If you are doing things dynamically both Yahoo and Google provide geocoding apis. But for one-time use, that link is the best.

5) Replace longitude and latitude numbers in the sample code with the actual longitude and latitude for your location.
ref: map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

It should now work.
You can alter the zoom in/out features by changing the 13 to a different number. You can alter the width and height by altering the width/height of the div tag.

You might also find the tutorial helpful here:
list of events:

I want to link to a GOOGLE MAP defined with my specific location(s):

This means that your map stays at Google. You just link to it from your website. However, you can configure a map specific to your needs - with your location preferences.

1) Log into your Google account. (Get one if you dont already.)

2) Get to the Google "maps" product

3) Create a new map and set your preferences. Put in a name and description. Dont forget to save.

4) Go back in edit mode and drag markers/balloons to your locations. Save.
NOTE: When you are editing your map you can zoom in to help put in your markers.

5) Get a link to your map. (Click on the "collaborate" link on left to get the URL. Copy/paste the full URL noted to the "href" of a link.) example map