Web Multimedia: Embedding A Google Map

Google maps can be very useful to embed in eMail invitations or to address the locations of businesses on websites. Using "Link" at the top right of the Google Maps site generates the following, overly complicated code:

<iframe width="425" height="350" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="http://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&q=SAIT&sll=51.072439,
-114.070699&sspn=0.011325,0.019698&ie=UTF8&hq=SAIT
&hnear=&ll=51.066852,-114.09263&spn=0.011327,0.019698&z=14
&iwloc=A&cid=17534328178977113185&output=embed"></iframe>
<a href="http://maps.google.com/maps?
f=q&source=embed&hl=en&geocode=&q=SAIT&s
ll=51.072439,-114.070699&sspn=0.011325,0.019698&ie=UTF8&hq=SAI
T&hnear=&ll=51.066852,-
114.09263&spn=0.011327,0.019698&z=14&iwloc=A&cid=175343
28178977113185" style="colour:#0000FF;text-align:left">
View Larger Map</a></small>

There is also the issue that frames work for HTML4 and 5, but not XHTML: the equivalent in XHTML is the <object> tag. However, if you copy the src attribute value, the code can be simplified to:

<object style=”width: 425px; height: 350px;" data="http://maps.google.com/maps?
f=q&source=s_q&hl=en&geocode=&q=SAIT&sll=51.072439
,-114.070699&sspn=0.011325,0.019698&ie=UTF8&hq=SAIT&hnear
=&ll=51.066852,-114.09263&spn=0.011327,0.019698&z=14&iwloc
=A&cid=17534328178977113185&output=embed">
</object>

The result:

There are many, many tricks and hacks for Google Maps, which are the subject of several books. I will tell you that the ll variable values in the URL represent latitude and longitude, and z the amount of zoom.

Using this method will bring all the interactivity one associates with Google Maps into the map on your webpage: scrolling, zooming, etc. While that is wonderful, the interactive map takes some time to load. Sometimes, you simply need a fast image of your location. This is possible by using the Google Static Map API. The simplest required parameters for the API are shown in the URL below:

http://maps.google.com/maps/api/staticmap?center=SAIT,AB&zoom=14&size=400x400
&sensor=false

centre takes either an address (just as you would type into Google Maps) or latitude and longitude data, as used in the object tag above. zoom is the level of zoom, and size is the width and height of the image as presented on your page, up to 640 x 640. sensor is false on the assumption that there is no location awareness on the device you are sending the data to: if you were sending the static map to an iPhone or other device with location awareness, this could be switched to true.

Actually using the URL to produce an image is the simplest thing in the world – just put the URL as the src value in an img tag, remembering to replace & symbols with & where necessary if you want the page to remain valid. For example, this:

<img src=”http://maps.google.com/maps/api/staticmap?center=SAIT,
%20AB&zoom=1&size=550x485&maptype=satellite&sensor=false" alt=”Map of the world
supplied by Google Maps” title=”Map of the world, supplied by Google Maps” />

…produces the image you see above. Much more is possible, including routes, markers, and highlighted areas, and different formats for the image. For further information, consult the site for Google Map's API