Tech Tips on Computers, Internet, Blogging, Web Development, Social Media, Android and more

Full width home advertisement

Post Page Advertisement [Top]

share Google Maps link or embed Google Maps to websites 1
Google Maps is one of the most popular application used for locating a place, finding directions, sharing etc. And nowadays, with the popularity of Android Smartphones, it is very easy to search for location and get direction to our destination using our smartphones. In this post, we'll see how to embed Google Maps on websites, blogs, discussion boards etc. We will also see how to share Google Map location to a friend so that he can locate the place or find direction to the place you shared.

There are two basic ways to share Google Map location with others. One is using the link and the other is to embed the Google Maps code to websites, blogs etc.

Sharing Google Maps using the link

share Google Maps link or embed Google Maps to websites 2
When your target users click on this link, it will take them to Google Maps in a browser or open Google Maps app on mobile, showing the location. 

Sharing Google Maps by embedding on website, blogs etc.

 This is a slightly different method as we will be using the Google Map embed code to show the map snippet on a website or blog page. Viewers will be able to see the map directly on the page instead of taking them to Google Maps. 


To embed Google Maps on blogs or websites:
  • Go to Google Maps: https://www.google.com/maps/
  • Search for the location you want to share
  • Click on the location once
  • Click on the “gear” icon on the bottom right hand side corner
  • Click on “Share and embed maps”
  • You get two options here- “share link” or “embed
  • Choose “embed
  • Choose size of the map
  • Copy the embed code. It starts with an <iframe HTML element tag
  • Paste the code to a website or blog post 
  • Publish and your viewers should be able to see the location right there on the website page
share Google Maps link or embed Google Maps to websites 3
 Note: If sharing via a blog, then make sure you are in edit mode (HTML source code edit mode). Else it will just display the code text.

A sample location on Google Map embedded on this blog post looks like this.

To embed a Google Map on Blogger blog,  we need to copy the embed code from Google Maps and paste it in "HTML" window and not in the "COMPOSE" window.




 

No comments:

Post a Comment

Bottom Ad [Post Page]