--> Embedding Google Maps in Blogger - [Full Guide] | Experience Lab - Online business creation and development guide for bloggers and startups

Embedding Google Maps in Blogger - [Full Guide]

Integrating maps with your web projects can offer your visitors a more interactive experience of your website and assist with the understan...

Embed Google Maps to Blogger

Integrating maps with your web projects can offer your visitors a more interactive experience of your website and assist with the understanding of events and places. As a Blogger, you might write for many different reasons, but no matter the genre of the subject matter, there will come times when area maps relevant to your posts may enhance the experience for your readers. In an earlier post, we learned how to embed Bing Maps to a website, and to add interactive features with it such as real-time Tweets on Bing Maps. Let's now take a look at embedding the most popular map application to a webpage - Google Maps.

As opposed to Bing Maps, where you get three different map types (road, bird's eye and aerial view), Google Maps offers just two easily-embeddable map types; Satellite view and a 2-D road map view.

There are two ways to embed Google Maps to your website. You can either get the iframe code Generated by Google Maps, or use the Google Maps creator.

Getting the iframe embed code

This is the much simpler method. All you need to do is, go to the Google Maps website, and navigate to the place you want to display on your map. You can do that manually, or search for an address.

Once you have your desired location on the map, click on the Link button on the top-left of the map.

You will now get the quick embed code. But you can customize your map by clicking on the Customize and preview embed link. Here, you can customize the size of your map to embed. Once done, simply copy the code generated, and paste it inside a blog post HTML editor, and you're all done! (see below for a demonstration).

View Larger Map

Google Maps Creator

Now the map embedded above shows me a location on the map, but I can't personalize it. Wouldn't it help out readers more if you could add personal messages or highlight places? You can't do that with a simple embed. For that, you'll have to use the Google Maps Creator.

Step 1: Get Google Maps API key

  • Go to the API signup page

  • Accept the terms and conditions

  • Provide your website URL. Note: The API key is specific to each website, so one key can only be used with only one domain.

  • Once your key is generated, save it somewhere. You'll need it later.

Step 2: Generate Map

Create Map

  • Make changes as necessary, and click on the Generate this Map button. You will see the code below update itself.

  • Customize the code, and replace the YOURKEY part with your API key.

Now, simply paste the code generated into your website's source code, and you're all done! You can get the full code (for full site access) or the portable code (for partial site access).

Got any questions or confusions? Please feel free to ask in the comments section below. Cheers :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,7,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,6,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Embedding Google Maps in Blogger - [Full Guide]
Embedding Google Maps in Blogger - [Full Guide]
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy