Monday, September 3, 2007

Google Maps ~ Embedding in webpages:

This is a great idea for courses that involve reference to maps. "The Google Maps API (Application Programming Interface) lets you embed Google Maps in your own web pages with JavaScript." Embedding a fully interactive map is easy. The interactivity on your embedded version is identical to the original: your page visitor can see/close the address box, drag to move the map, zoom in/out, toggle between map/satellite/hybrid views.

How do you do this? When you look at their sign-up site, it seems more complicated than it is. Here's the simple version:

First, you have to sign up and get a "Maps API key". Keep track of that key somewhere.It gives you permission to embed any Google Map in a webpage. (Sign-up is quick. You need one key per website you use.)

How to embed a map:
1. Navigate to the location you want to show on Google Map.
2. On the top right corner of the map, there is a [link to this page]. Click it to get a snippet of HTML. From there you can use "customize" if you want to select a map size. (Default size is shown in my example below.)
3. Copy and paste the HTML code to your web page.

Easy, right? You can also go beyond basics to add a number of features: define areas, add text, add links, add controls, pop-up info/event windows, overlays, driving directions, and more. Google supplies "mapplet" codes for these. The maps do NOT include advertising at this time. (Google will give 90 days notice if they change this policy.)

Here's an example (the place I work, Columbia Square Adult Learning Centre):

View Larger Map

No comments:

Post a Comment