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 menu icon in the top left corner of the window (the three lines icons) 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. Note that the result is fixed in width and height; i.e. it is not responsive. To make the map responsive, remove the width and height attributes of the iframe element and use the technique detailed in the article on making YouTube iframes responsive.

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:

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

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. Note that even if the map is made responsive, it does not remain target-centered on resize; I have an article on how to achieve that.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.