40 How to easily add interactive Google Maps to your Blogger posts Monday, February 2, 2009 /

Adding Google Maps integration to your web projects can offer visitors a more interactive experience of your website and assist the understanding of where events or business takes place.



In a recent project, I decided to utilize Blogger to create a website for a local business, and found that including Google Maps was of great benefit for visitors to understand where the business is located. However, of the many tutorials on the web which explain how to add Google Map functionality to our websites, I was unable to find clear instructions for how maps can be added to a Blogger powered blog.



Luckily I discovered two simple and highly useful techniques for adding Google Maps to blog posts with no editing of the template required.



In this post, I'll explain just how easy it is to add interactive Google Maps to your blog posts, which can offer your readers further insight into events, business or other local information which are relative to your site or blog posts.

An Overview of Google Maps and Blogger

Bloggers write for many different reasons: some to log their daily activities or keep in touch with friends and family; others to publicize their business, or earn an income online by providing useful and informative articles.



No matter what the genre of our subject matter, there may well be times when area maps relevant to our posts may enhance the experience for our readers. A family blogger for example could illustrate their holiday destination, while a business blog could demonstrate the location of their shops.



While Blogger's recent "Geotagging" feature proves useful to many Bloggers, there are times when nothing less than an actual map will do. And when you consider the interactivity offered by Google Maps (2d maps, sattelite views and even driving directions), the prospect of adding such a feature to our blogs becomes even more enticing!



Here, for example, is a map of Downing Street in London, England:





View Larger Map



Using this map, you can easily switch between the 2-dimensional map, a satellite view and even the terrain of the ares. You can move the map in any direction to see the surrounding area; zoom in and out for a closer/distant view, and incredibly you can link to driving directions too!



Such interactive elements can add a huge amount of interest to your posts, and can assist reader's interaction with your site, whether this be a deeper understanding of the locations you write about, or to help potential customers find out where your business is based.



There are two main methods you could use to add customizable Google Maps to your blog posts:

• Paste code for an Iframe generated by Google Maps


• Using the Google Maps creator from KabaWeb.com

Neither of these options requires you to edit your Blogger template in order to add these maps to your posts (or even your sidebar, if you prefer this location). Whats more, these can be added simply by copying and pasting a section of code to your posts.



Let's go through each of these methods in turn and explain the circumstances in which these would be most useful.

Adding an Iframe generated by Google Maps

I personally find this to be the easiest and most reliable method of adding Google Maps to Blogger posts.



To begin, simply visit the Google Maps website and type in the location you wish to display:

For example, if I wanted to display a map of The White House, I would type: "The White House, Washington DC, United States". The search results would then be displayed in a screen like this (click on the image for a larger preview):

If nescessary, we can narrow down the location by clicking one of the links on the left in order to get a more accurate map.



Once we have the map we would like to embed in our Blogger post, we need to retrieve the code required to display it.



To do this, click on the "Link"icon at the top right of the map:

In the pop-up, click "Customize and preview embedded map". This enables us to tweak the dimensions of the map to ensure it fits well within our blog post.



If you are using a default Blogger template, I would advise you to use the "Small" option which will measure 300px in width. This ensures the map will not overlap the space you have available for your blog posts which could mess up the overall layout of your blog.



In cases where you use a widened posts column, you could choose a larger map size or even specify your own dimensions. As a guide, the medium map size is 425px wide while the large embed is 640px. Your selection will automatically generate a new preview which gives a good idea of how well this will fit into your Blogger template design.

Finally, copy all of the code in the third section of this page to your clipboard. We will paste this into our Blogger post shortly.

How to embed the iframe code in your Blogger posts

To add your iframe code to a post, simply crewate a new post and paste the iframe code where you would like your map to appear within the post.



There are no hard and fast rules about how to embed the iframe code in your posts, though I do have some suggestions based on my own experiences:

• Using Blogger in Draft to write your posts makes the process easier! Just ensure the compose settings are set to "Interpret typed HTML", then you can use either the "Compose" or "Edit HTML" version depending on your personal preferences.


• If you prefer to use the regular Blogger post editor, ensure you paste the iframe code when using the "Edit HTML" tab, not the rich text composer. Unless you paste the iframe code in the Edit HTML page, your maps will not display properly.


• It can be easier to write your entire post, then paste the iframe code afterwards, where you would like your map to be displayed. This ensures you don't accidentally delete any of the code when editing, which would render your maps useless.

You should be able to preview how your post will appear after pasting the iframe code into your post, regardless of whether you use Blogger in Draft or the regular post editor, so be sure to check how everything looks before hitting the publish button!

When using Google's simple embedded maps may not be perfect for your needs

Using this simple embed code does not offer complete control over how your maps will appear. If you prefer to use a custom marker or more than one reference point on your maps, you would need a more advanced solution and extensive HTML code.



For a more customized option, I would advise you to check out KabaWeb's Google Maps creator which offers a simple interface for such advanced usage of Google Maps.

Using KabaWeb's Google Maps Creator

KabaWeb's Google Maps Creator allows greater control over how your maps and any information about the locations are displayed. Here for example is a map of 10 Downing Street in London with my choice of marker and a more personalized information bubble:

Using this version of an embedded Google Map is slightly more complicated that using the code generated by Google, though it is most useful to have greater control over the content of your maps.

Generating a Google Maps API key

In order to use the Google Maps Creator, you will need access to your own Google Maps API key, which you can generate from the API sign-up page.



To generate your key, you should accept the terms and conditions for use, then add your blog's URL where prompted. Your API key will be specific to your site, so you cannot use the same key elsewhere. This also means you cannot preview how the maps will appear within your posts (as the URL for preview pages will be different from that where your posts are published).



Once your API key has been generated, copy this long string of numbers and letters to Notepad or your favorite text editor. You will need to access this again soon.

Generating your maps

Once you have your API key saved, you can then generate your maps on the Google Maps Creator page.

Here you can set the following options depending on your requirements:

• Your map's name


• The location you wish to display. The preferred format for accuracy seems to be STREET-NAME, TOWN, COUNTRY.


• Map height and width: the default setting for width is 700px, too wide for most Blogger post sections. Be sure to reduce this to accomodate the settings for your own template


• Zoom size: unless you prefer to display a town or country view, you can leave the default setting of 14px


• Map Control: This chooses whether to display controls to the left of the map which visitors can use to zoom in and out


• Show map types bar: This chooses whether to display the switch to toggle between map, satellite and hybrid views.


• Show overview inset: This chooses whether to display the inset in the bottom right of the map, which offers a quick overview.


• Info Text: This is the text displayed in the balloon overlay. You can use plain text or HTML code to style how your informative text will appear.

Once you have changed the settings for your preferences, click the "Generate this map" button, which will update the map preview beneath to show how your embedded map will appear.

Embedding the map in your Blogger post

Once you have generated the map you wish to display, you can use the code provided to paste into your Blogger post (or an HTML/JavaScript widget in your sidebar).



To find the correct code, scroll right down the page until you see the section marked "Portable Code". This is the section of code which is best to use with Blogger powered blogs.



Copy the entire section of code in this box to your clipboard, then switch over to your Blogger post editor.



Be sure you have completely written your blog post before pasting the code for your map, especially if you are using the regular post editor (not Blogger in Draft). When attempting to use this version of an embedded Google Map, I have encountered errors when attempting to edit the post after embedding the code.



If you are using the regular post editor, switch to the Edit HTML tab and paste your code where you would like your map to appear. Then replace "YOURKEY" in the third line with the API key you obtained from the Google Maps developer pages. Then finally, publish your post.



Be sure not to switch back to the "Compose" tab after pasting the code for your map! If you do, the code will become corrupted and your maps will not display properly in the page.



When using Blogger in Draft to compose your posts, it is not necessary to switch to the "Edit HTML" tab. However, it is still advisable to paste the code only after you have finished writing your post, and do not switch between the different post editors.



Once you have published your post, you can take a look at your new maps in your blog posts!

Final thoughts

While Blogger's new Geotagging feature offers an interesting way to add locations to our posts, it is often the case where nothing less than a map will suffice in the understanding of our post content! Using the methods described above, you can easily add interesting and interactive Google Maps to your Blogger posts, ensuring your readers have a deeper understanding of the locations mentioned in your posts.



If you know of other simple methods to add maps to Blogger posts, please feel free to let us know by leaving your comments below.