Using Google Maps with Blogger

In a previous post, entitled A Grave Too Far, you may have noticed a Google Map. How many people noticed, though, that it wasn’t a simple static image? How do you embed an active, or “live”, map that can be scrolled, magnified, etc?

There are basically two ways that a Google Map can be embedded in a blog post. The easiest, and the most common, is to simply display a static image captured from Google Maps.

Just position and size the relevant view in Google maps. Remove any unwanted location markers using the menu in the top right-hand corner, close the left panel down, and use Ctrl+Alt+PrtSc (under Windows) to capture the browser’s image. You’ll need to edit the captured image to remove peripheral detail of the browser window, but you can then insert the result into your blog as with any other image.

In the example below, I’ve also added a link below the image, entitled ‘View larger Map’, that will take the reader to the full-blown map if they so choose. The URL to associate with this link is provided for you in the Google Map — Simply click the ‘SHARE’ option in the left-hand panel, and copy the URL from the ‘Share link’ box.

View Larger Map.

This is also the mechanism you would use if you wanted to embed the map into a Word document as there is no way, currently, of embedding a live map there.

In a blog post, though, you have another option. This time, copy the HTML from the ‘Embed map’ box in that Google Maps ‘SHARE’ window. Put a recognisable place-marker in your blog text at the position you want the embedded map (e.g. “[GoogleMap]”) before switching from the Compose view to the HTML view. This may look a bit scary now as you’re looking at the raw HTML for your post. Search for your place-marker and replace it completely with that HTML from Google Maps. Return to the Compose view.

View Larger Map

You’ll notice that a very similar ‘View Larger Map’ link is provided automatically below the embedded map. In fact, the main visible difference between this live map and the static image is the presence of the navigation and magnification control in the corner.

Some tips: In Google Maps, you are allowed to customise the embedded map before copying its HTML (see option at the bottom on the ‘Link’ page) but the default ‘Medium’ size works best for a blog post. When editing your blog, don’t replace the place-marker until you have finished your other edits. When there are other pictures in the blog post then I have had great trouble literally chasing them around the Compose window, and trying to keep them from moving of their own accord. This is a Blogger issue and not the author’s fault. Finally, the embedded map that you’ll see in the Compose window, and during any preview, is just a snapshot rather than a live map, and it will not respond to your cursor. Don’t worry, though, as it will work in the published edition.

You’ll agree that the live map is much richer than the static image. However, Google Maps only provides modern-day maps at the current time. In principle, other sites could use a similar mechanism to access historical maps, and this would prevent the plethora of copies floating around the Internet; many of which have no citation of the original source, and no attribution for where it was taken from. Google have set a good precedent here which could be adopted on a greater scale.

**** Updated 24 Feb 2017 **** The option to share had moved again.