demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Map of the SAIT campus, supplied by Google Maps

Embedding A Google Map On A Web Page

html / multimedia

Estimated reading time: 1 minute, 30 seconds

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:

  1. The result is fixed in width and height; i.e. not .
  2. 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">
</object>

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 &amp; 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.