Wednesday, June 11, 2008

Embed Google Maps

There are two ways that we use Google Maps to promote our work, and I'll touch on both below. The first method involves creating homemade map on the Google Maps website (no programming knowledge necessary), and the second method incorporates the Google Maps API (some programming knowledge needed).

The Home Made Google Map (click on the bubble below)


View Larger Map

In order to create your own Google Map and embed it on your website or blog, follow these steps:

  1. Go to http://maps.google.com
  2. Just underneath the Google Logo in the upper left hand corner of the screen, click on "My Maps"
  3. Under My Maps, click on "Create New Map"
  4. On the Map, you can click on the Blue Balloon icon and click again anywhere on the map to set a Placemark
  5. Give the Placemark a Name and Description
  6. Once you have set your Placemarks (and possibly other Lines and Shapes), go to the far left column on the page, in the middle of that column, and enter a Title and Description for the map and be sure to click Save.
  7. Go to the upper right hand corner of the map and click on "Link to this Page"
  8. Copy the code in the second field, the field titled "Paste HTML to embed in website"
  9. Paste that code into your Blog or Website to get something like what you see above.

Using the Google Maps API

(click on the image below to go to the School website for a live example)



For the School website, we used the Google Maps API to connect the Placemarks on the map to our database of SketchUp Training Classes that we hold around the country. Our database of classes is constantly changing, so this would be a pain to remake the map by hand each time we changed the schedule. Check out the Google Maps API blog for ideas and help incorporating Maps API onto your site, or feel free to contact us.

0 comments: