Menu Close Menu

How To Embed Google Map In Your Article Or Tutorial

Google Map Preview About a year ago, Google introduced a feature in the new Google Maps that enables you to embed a Google Map by copying and pasting an HTML Code Snipt.
Google map is very common requirement in every web project now. Now every website and blog need to google map integration, Here In this article I will show how to add the google map in Blogger blog. Go to Google Maps, and simply type in the address of the location you want to show in your article or tutorial. Once you have found your decided location, click on the link icon in the left hand panel beside print icon. This will show you the embed code. Copy the iframe HTML code snipt paste where you want to show. Your users can sign in to these maps to see relevant content, like their saved places from Google Maps. Conversely, they can also save a location from your embedded map for viewing on Google Maps for desktop or mobile.

 

How to add Google Map in your blogger post page

1.Go to your blogger dashboard.

2. Then click on new post and  go to your blogger post editor.

3. Switch to HTML mode and  paste the HTML iframe code in content area.

4. You can preview the map by switching to normal compose mode or you can also preview the page for check any mistake if every thing is fine you can publish your post.

 

You are done embedding Google maps in your blog post pages. We will now see how to embed Google maps in Blogger custom pages.

 

How to add Google map in blogger custom page

1.Go to your blogger dashboard.

2. Then click on pages at the left side panel and  click on create new page.

3. Switch to HTML Mode and paste the HTML iframe code in the content area

4. You can preview the map by switching to normal compose mode or you can also preview the page for check any mistake if every thing is fine you can publish your post.

 

Demo

 


 

In this tutorial, I’ve shown you how to use embedded Google map Let me know in the comment box below, how much useful this tutorial. Share it and subscribe to our RSS feeds.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.