Love ’em or loathe ’em, Google is hard to ignore when they have so many useful web services on offer to use with your blog. One of the favorites, of course, is Google Maps, where it takes only a few seconds to cut and paste a fully functioning Google Map into your web page.
So let’s give it a go with an embed. I’m just going to head on over to Google Maps and get me a map. Back in a mo…
Well, that was quick. I decided to select a map of one of the places I grew up — a suburb of Glasgow, Scotland called Jordanhill (boy that seems a million miles away these days). Here is the HTML Google generated for me:
Name:gmap
Value:<iframe width="600" height="450" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="https://maps.google.com/
?ie=UTF8&ll=55.886721,-4.33651&spn=0.011553,0.027466
&z=15&output=embed"></iframe><br /><small><a href="https:
//maps.google.com/?ie=UTF8&ll=55.886721,-4.33651&
spn=0.011553,0.027466&z=15&source=embed" style="
color:#0000FF;text-align:left">View Larger Map</a></small>
That’s a bit of a mouthful, for sure, but we really don’t worry about what it all means since a quick cut and paste job is all that’s necessary. We could paste it directly into a post, and be done with it, but in my own experience, if we edit the post later, WordPress (or at least the TinyMCE editor in WordPress) likes to mess up the HTML for we, which can be a real pain.
In any case, it’s much nicer to keep the HTML safely tucked away in a global embed, where we can use it, and reuse it to our heart’s content with a tidy little shortcode tag:
[gmap]
That’s all there is to it:
View Larger Map
But, wait, there’s more. Take a closer look at the map’s HTML code. There are a number of attributes available, like height, width and zoom that can be modified. We could go back to Google Maps and use their facilities to adjust a few things (probably wise if we wanted to recenter the map, for example) but alternatively we can add two or three embed parameters to make things a little more flexible:
Name:gmap
Value:<iframe width="%width=600%" height="%height=450%"
frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.com/
?ie=UTF8&ll=55.886721,-4.33651&spn=
0.011553,0.027466&z=%zoom=15%&output=embed">
</iframe><br /><small><a href="https://maps.google.com
/?ie=UTF8&ll=55.886721,-4.33651&spn=
0.011553,0.027466&z=%zoom%&source=embed" style="
color:#0000FF;text-align:left">View Larger Map</a></small>
Width and height are the obvious attributes, but it really makes things more useful if we can control the zoom attribute at the same time, since with a smaller map, it’s usually more useful to zoom out a little. The zoom attribute also turns up in the link back to Google Maps. We want to be able to control that too, so that anyone clicking back to Google Maps doesn’t get a disorienting change in the zoom setting of the map.
Notice how we can set default values for the map’s height, width and zoom values, which should be the size we’re most likely to use, but now we can control the size of the map simply by setting the attribute values when embedding the map:
[gmap width=320 height=240 zoom=10]
Resulting in this pocket sized version of my old home town of Glasgow:
View Larger Map
If we want more control over the positioning and styling of the map, there are a couple of alternatives available:
- Manually wrap the embed value with an HTML <div> and set some style attributes:
Name:gmap_styled Value:<div style="float:right;padding:10px;background-color: lightyellow"><iframe width="%width=600%" height= "%height=450%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https:// maps.google.com/?ie=UTF8&ll=55.886721,-4.33651 &spn=0.011553,0.027466&z=%zoom=15%& output=embed"></iframe><br /><small><a href="https: //maps.google.com/?ie=UTF8&ll=55.886721,-4.33651& spn=0.011553,0.027466&z=%zoom%&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a> </small></div>Now, when we embed this version of the map:
[gmap_styled width=240 height=180 zoom=7]
We get this —>
Note: CSS style purists would suggest using a style class instead of setting individual styles in the wrapper, which is fine, though it does mean we’d have another file to edit. Either way, we can make either the style attributes or the CSS class name an attribute of the embed (the same way as the map’s height, width, and zoom) which would give us even more control over the positioning and styling of our embedded map.
- Alternatively, if we make our map a global embed, we can use the settings to automatically wrap the map with a <div> element and specify a CSS class name for it that way. That way we have the advantage of keeping our styling separate from the embedded Google map code, making it less likely that we will overwrite it, should we forget about it later (something I have done before). The cool thing about doing it this way, is that if we make the wrapper class name an embed attribute (e.g. %class%) instead of a CSS class name, we can specify which CSS style class we want to use when we do the embedding.For example, if we set the map embed’s wrapper class to %class=map-default% (always good to set a default) then we can specify which CSS class we want to use like this:
[gmap class="right-align"]
We can, of course, add multiple CSS classes:
[gmap class="right-align highlight dark"]
Naturally, there are lots of other things we can embed with the Embedder plugin:
Calendars (from Google)
Videos (from YouTube)
Photos (from Flickr)
Even games (from Neave Games)
(Adobe Flash plugin required, click the blue area below to activate.)
The Embedder plugin can help you organize and use them all, and more.