Wednesday, June 10, 2015

How to add Google Maps into Blogger Post

I have recently been getting a lot of comments and e-mails in regards to the various Google maps I have been including in my posts. And yes, it's a neat way to show where in the world your story resides, and where the places in your images can be found. Google maps are great because they are interactive. That means that once you place the map into your post, your visitors can enlarge the map, zoom in, roam and search for places of interest. In this post, I will show you how you can add Google Maps into your Blogger Post, but this also works for WordPress and other webpage tools.


click on the screenshots for a bigger view

1. Open Google Maps

Go to google.com/maps and open the page in your browser.


2. Search for the Point of Interest

In the Search box of Google Maps type in the city or point of interest you want to be displayed in your Google map. You can also search for directions and include them as well.


3. Find the Menu

Next to the Search Box you will find the "Menu" icon (three horizontal lines). Click on it and then click on "Share or Embed Map".


4. Customize your Map

A new window pops up. "Share Link" is opened by default, but you need to click on "Embed map". Then you can use the preset settings. I usually go to "Custom size", and type in a size that fits my needs and my blog. The Preferred size for my blog is 640 width, and then I set the height as much as I like (usually 400px). Copy the code that is under the width and height buttons.



 

5. Place the Google Map in your Blogger Post

Open up your blogger post. Go to HTML, and place the code where you want it to appear. If you are not familiar with HTML, here is a trick. In the "Compose" part of the blogger editor, place a long string of "aaaaaaaa" letters in the place where you want the map to appear. Switch to HTML and find the "aaaaaaaa" string and replace it with the Google Maps code. And yes you can use a different letter :)

And now for the finishing result. Here is the Google map for Sarajevo:



This way, the next time you post a lovely image like the one below, you can include a Google Map to share with us, where exactly it was taken. This method is great for travel posts, when you want to display directions and give a better understanding of the place you have visited.


A Blog Update: You may have noticed the image on the right side of the blog. I have created a new blog page called "Bosnia and Herzegovina" travel guide. You can see it here. It's an overview of all the TRAVEL DESTINATIONS from Bosnia and Herzegovina, that I posted on this blog so far. It's constantly updated. Please check it out, you may discover posts that you have missed previously and that might interest you.

26 comments:

  1. Never thought to do this but if you don't mind the maps scrolling when trying to read the blog then it is great.

    ReplyDelete
    Replies

    1. You don't have to add many. One small one at the end of the post, when it's approproate is not that disruptive.

      Delete
    2. I wasn't meaning to be rude I see it confused Valerie. I do find them distracting if your mouse just happens to be in the wrong place.
      They have their place and are useful.

      Delete
    3. That's ok. You didn't come off rude. :)

      Delete
  2. I wondered what was happening when the maps suddenly zoomed... now I know.

    ReplyDelete
  3. You are a born teacher, Mersad!

    ReplyDelete
  4. thank you, i live in google map, it is my favorite place to go... but i did not know about the settings to add it to the post. to cool....

    ReplyDelete
  5. Mersad, your photos are lovely and you are a great teacher! Thank you so much for your kindness in sharing this. Not everyone is technically inclined, and I am one of those people who is not very technically inclined, so I appreciate not only that you shared this information, but HOW you shared it. :)

    ReplyDelete
  6. Mersad, the more I visit your blog, the more I like it and you. Have a great day.

    ReplyDelete
  7. also if you post your pictures to pinterest you can map them there...that's what i do!

    ReplyDelete
    Replies
    1. That's a cool feature in Pinterest. :)

      Delete
  8. A great tip, Mersad. Thanks for sharing.

    ReplyDelete
  9. I'm a sucker for the maps.

    ROG, ABCW

    ReplyDelete
  10. Thanks for the great tip! I think it is nice for people to put a picture to a location. Thanks!

    ReplyDelete
  11. Thanks for the information, even though I am technically challenged I believe I could do this.
    You photo at the end is magnificent.

    ReplyDelete
  12. I have something more today Many thanks for sharing. I often wonderd what the maps but thought they may have copyright on them. I assume if you use them tht is NOT the case.

    ReplyDelete
    Replies
    1. They don't have copyright. Google is allowing you to share them, otherwise there wouldn't be a share/embed option in the Google Maps settings.

      Delete
  13. Sorry the word learned should be before 'something'

    ReplyDelete
  14. Also, if you are self hosted and want to do this regularly lots of WP themes come with a feature to display maps

    Mollyxxx

    ReplyDelete
  15. Veoma koristan post. Ranije nisam razmišljao o ubacivanju mapa u postove, ali mislim da mi u nekim situacijama može dobro doći.

    ReplyDelete
  16. Mersad, you missed your calling. You should be an educator.

    ReplyDelete
  17. Thanks for the help with map embedding. I couldn't find out how to do it anywhere else and you made it so easy!!

    ReplyDelete
  18. very helpful tips! I really appreciate for this post. Thanks for sharing.

    ReplyDelete
  19. This is excellent information. I got some new idea. Thank you for your post.

    Gleason's New Standard Map Of The World

    ReplyDelete

Subscribe by E-Mail for blog posts in your inbox:

Subscribe

Image Credits

All Rights are Reserved. The images may not be reproduced, copied, transmitted or manipulated without the written permission of the author.