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

1 comment:

  1. Nice post. I understand something harder on various blogs everyday. It will always be stimulating to see content from other writers and practice a little something from their website. I’d want to use some together with the content on my weblog regardless of whether you don’t mind. Naturally I’ll supply you with a link on your own internet blog. Thank you sharing ➤ 휴게텔


    ReplyDelete