Maps are extremely useful ways to visualize the locations of business and events on web pages. For this example I'll use the Google Maps service, although there are other options.
First, find your location in Google Maps, and the appropriate zoom level. Then, click on the gear icon in the lower right corner of the window and choose the Share and Embed option. The code generated will look like the following:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d390263.5666142733!2d-97.80223175875516!3d40.16602063073909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390025622921" width="600" height="450" frameborder="0" style="border:0"></iframe>
To apply it to your page, simply copy and paste the code into your HTML. There are two issues associated with using the code as provided, however:
- The result is fixed in width and height; i.e. not responsive.
- If you are using XHTML, the
</iframe>element will render the page invalid, although the code will work.
While I would not worry about validation too much in this particular case, if you were a stickler for correctness in XHTML the problem is solved fairly easily: copying the
src attribute value, the code can be applied to an
<object> element instead:
<object width="600" height="450" data="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d390263.5666142733!2d-97.80223175875516!3d40.16602063073909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1390025622921">
Embedding the map will bring all the interactivity one associates with Google Maps 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, which is made possible by using the Google Static Map API. The simplest required parameters for the API are:
center takes either an address (just as you would type into Google Maps) or latitude and longitude data. zoom is the level of zoom, and size is the width and height of the image. 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.
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" />
…produces the image you see at the top of this article. Much more is possible, including routes, markers, and highlighted areas, and different formats for the image; the responsive issue I will deal with in a separate article.