How to easily add together interactive Google Maps to your Blogger posts


Adding Google Maps integration to your spider web projects tin offering visitors a to a greater extent than interactive experience of your website as well as assistance the agreement of where events or concern takes place.

In a recent project, I decided to utilize Blogger to create a website for a local business, as well as constitute that including Google Maps was of cracking practise goodness for visitors to empathize where the concern is located. However, of the many tutorials on the spider web which explicate how to add together Google Map functionality to our websites, I was unable to detect clear instructions for how maps tin live on added to a Blogger powered blog.

Luckily I discovered ii uncomplicated as well as highly useful techniques for adding Google Maps to weblog posts alongside no editing of the template required.

In this post, I’ll explicate precisely how slowly it is to add together interactive Google Maps to your weblog posts, which tin offering your readers farther insight into events, concern or other local data which are relative to your site or weblog posts.

An Overview of Google Maps as well as Blogger

Bloggers write for many dissimilar reasons: some to log their daily activities or choke along inwards impact alongside friends as well as family; others to publicize their business, or earn an income online past times providing useful as well as informative articles.

No affair what the genre of our dependent area matter, in that location may good live on times when expanse maps relevant to our posts may elevate the experience for our readers. Influenza A virus subtype H5N1 identify unit of measurement blogger for illustration could illustrate their vacation destination, patch a concern weblog could demonstrate the location of their shops.

While Blogger’s recent “Geotagging” characteristic proves useful to many Bloggers, in that location are times when zilch less than an actual map volition do. And when you lot consider the interactivity offered past times Google Maps (2d maps, sattelite views as well as fifty-fifty driving directions), the prospect of adding such a characteristic to our blogs becomes fifty-fifty to a greater extent than enticing!

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

View Larger Map

Using this map, you lot tin easily switch betwixt the 2-dimensional map, a satellite thought as well as fifty-fifty the terrain of the ares. You tin movement the map inwards whatsoever management to catch the surrounding area; zoom inwards as well as out for a closer/distant view, as well as incredibly you lot tin link to driving directions too!

Such interactive elements tin add together a huge amount of involvement to your posts, as well as tin assistance reader’s interaction alongside your site, whether this live on a deeper agreement of the locations you lot write about, or to assist potential customers detect out where your concern is based.

There are ii primary methods you lot could utilization to add together customizable Google Maps to your weblog posts:

Neither of these options requires you lot to edit your Blogger template inwards social club to add together these maps to your posts (or fifty-fifty your sidebar, if you lot prefer this location). Whats more, these tin live on added precisely past times copying as well as pasting a department of code to your posts.

Let’s choke through each of these methods inwards plow as well as explicate the circumstances inwards which these would live on most useful.

Adding an Iframe generated past times Google Maps

I personally detect this to live on the easiest as well as most reliable method of adding Google Maps to Blogger posts.

To begin, precisely see the Google Maps website as well as type inwards the location you lot wishing 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 as well as thus live on displayed inwards a hide similar this (click on the icon for a larger preview):

If nescessary, nosotros tin narrow downward the location past times clicking ane of the links on the left inwards social club to larn a to a greater extent than accurate map.

Once nosotros induce got the map nosotros would similar to embed inwards our Blogger post, nosotros postulate to scream upwardly the code required to display it.

To practise this, click on the “Link”icon at the overstep right of the map:

In the pop-up, click “Customize as well as preview embedded map”. This enables us to tweak the dimensions of the map to ensure it fits good inside our weblog post.

If you lot are using a default Blogger template, I would advise you lot to utilization the “Small” choice which volition stair out 300px inwards width. This ensures the map volition non overlap the infinite you lot induce got available for your weblog posts which could mess upwardly the overall layout of your blog.

In cases where you lot utilization a widened posts column, you lot could pick out a larger map size or fifty-fifty specify your ain dimensions. As a guide, the medium map size is 425px broad patch the large embed is 640px. Your selection volition automatically generate a novel preview which gives a skillful thought of how good this volition gibe into your Blogger template design.

Finally, re-create all of the code inwards the 3rd department of this page to your clipboard. We volition glue this into our Blogger shipping service shortly.

How to embed the iframe code inwards your Blogger posts

To add together your iframe code to a post, precisely crewate a novel shipping service as well as glue the iframe code where you lot would similar your map to appear inside the post.

There are no difficult as well as fast rules almost how to embed the iframe code inwards your posts, though I practise induce got some suggestions based on my ain experiences:

  • Using Blogger inwards Draft to write your posts makes the procedure easier! Just ensure the compose settings are gear upwardly to “Interpret typed HTML”, as well as thus you lot tin utilization either the “Compose” or “Edit HTML” version depending on your personal preferences.
  • If you lot prefer to utilization the regular Blogger shipping service editor, ensure you lot glue the iframe code when using the “Edit HTML” tab, non the rich text composer. Unless you lot glue the iframe code inwards the Edit HTML page, your maps volition non display properly.
  • It tin live on easier to write your entire post, as well as thus glue the iframe code afterwards, where you lot would similar your map to live on displayed. This ensures you lot don’t accidentally delete whatsoever of the code when editing, which would homecoming your maps useless.

You should live on able to preview how your shipping service volition appear after pasting the iframe code into your post, regardless of whether you lot utilization Blogger inwards Draft or the regular shipping service editor, thus live on certain to cheque how everything looks earlier hitting the seat out button!

When using Google’s uncomplicated embedded maps may non live on perfect for your needs

Using this uncomplicated embed code does non offering consummate command over how your maps volition appear. If you lot prefer to utilization a custom marking or to a greater extent than than ane reference scream for on your maps, you lot would postulate a to a greater extent than advanced solution as well as extensive HTML code.

For a to a greater extent than customized option, I would advise you lot to cheque out KabaWeb’s Google Maps creator which offers a uncomplicated interface for such advanced usage of Google Maps.

Using KabaWeb’s Google Maps Creator

KabaWeb’s Google Maps Creator allows greater command over how your maps as well as whatsoever data almost the locations are displayed. Here for illustration is a map of 10 Downing Street inwards London alongside my pick of marking as well as a to a greater extent than personalized data bubble:

Using this version of an embedded Google Map is slightly to a greater extent than complicated that using the code generated past times Google, though it is most useful to induce got greater command over the content of your maps.

Generating a Google Maps API key

In social club to utilization the Google Maps Creator, you lot volition postulate access to your ain Google Maps API key, which you lot tin generate from the API sign-up page.

To generate your key, you lot should convey the damage as well as weather for use, as well as thus add together your blog’s URL where prompted. Your API telephone commutation volition live on specific to your site, thus you lot cannot utilization the same telephone commutation elsewhere. This also agency you lot cannot preview how the maps volition appear inside your posts (as the URL for preview pages volition live on dissimilar from that where your posts are published).

Once your API telephone commutation has been generated, re-create this long string of numbers as well as letters to Notepad or your favorite text editor. You volition postulate to access this ane time again soon.

Generating your maps

Once you lot induce got your API telephone commutation saved, you lot tin as well as thus generate your maps on the Google Maps Creator page.

Here you lot tin gear upwardly the next options depending on your requirements:

  • Your map’s name
  • The location you lot wishing to display. The preferred format for accuracy seems to live on STREET-NAME, TOWN, COUNTRY.
  • Map superlative as well as width: the default setting for width is 700px, likewise broad for most Blogger shipping service sections. Be certain to cut down this to accomodate the settings for your ain template
  • Zoom size: unless you lot prefer to display a town or province view, you lot tin exit the default setting of 14px
  • Map Control: This chooses whether to display controls to the left of the map which visitors tin utilization to zoom inwards as well as out
  • Show map types bar: This chooses whether to display the switch to toggle betwixt map, satellite as well as hybrid views.
  • Show overview inset: This chooses whether to display the inset inwards the bottom right of the map, which offers a quick overview.
  • Info Text: This is the text displayed inwards the balloon overlay. You tin utilization apparently text or HTML code to manner how your informative text volition appear.

Once you lot induce got changed the settings for your preferences, click the “Generate this map” button, which volition update the map preview beneath to present how your embedded map volition appear.

Embedding the map inwards your Blogger post

Once you lot induce got generated the map you lot wishing to display, you lot tin utilization the code provided to glue into your Blogger shipping service (or an HTML/JavaScript widget inwards your sidebar).

To detect the right code, scroll right downward the page until you lot catch the department marked “Portable Code”. This is the department of code which is best to utilization alongside Blogger powered blogs.

Copy the entire department of code inwards this box to your clipboard, as well as thus switch over to your Blogger shipping service editor.

Be certain you lot induce got completely written your weblog shipping service earlier pasting the code for your map, particularly if you lot are using the regular shipping service editor (not Blogger inwards Draft). When attempting to utilization this version of an embedded Google Map, I induce got encountered errors when attempting to edit the shipping service after embedding the code.

If you lot are using the regular shipping service editor, switch to the Edit HTML tab as well as glue your code where you lot would similar your map to appear. Then supervene upon “YOURKEY” inwards the 3rd describe alongside the API telephone commutation you lot obtained from the Google Maps developer pages. Then finally, seat out your post.

Be certain non to switch dorsum to the “Compose” tab after pasting the code for your map! If you lot do, the code volition choke corrupted as well as your maps volition non display properly inwards the page.

When using Blogger inwards Draft to compose your posts, it is non necessary to switch to the “Edit HTML” tab. However, it is all the same advisable to glue the code alone after you lot induce got finished writing your post, as well as practise non switch betwixt the dissimilar shipping service editors.

Once you lot induce got published your post, you lot tin convey a await at your novel maps inwards your weblog posts!

Final thoughts

While Blogger’s novel Geotagging characteristic offers an interesting way to add together locations to our posts, it is oftentimes the illustration where zilch less than a map volition suffice inwards the agreement of our shipping service content! Using the methods described above, you lot tin easily add together interesting as well as interactive Google Maps to your Blogger posts, ensuring your readers induce got a deeper agreement of the locations mentioned inwards your posts.

If you lot know of other uncomplicated methods to add together maps to Blogger posts, delight experience gratis to permit us know past times leaving your comments below.