Wednesday 14 September 2016

How to personalise and embed google maps to your blog

How-to-personalise-and-embed-google-maps-to-your-blog-text-over-image-of-map

If you have seen websites with interactive Google maps on them and wondered how they do it, then this is the post for you. I will show you step by step how to personalise and embed google maps to your blog. I have struggled in the past to do this but now I have worked it all out and it is so easy. I am on Blogger, making the map will work with all platforms including WordPress just the embedding will be different.

I have a terrible memory for these things as I just do not use them often enough so I thought I would do a step by step guide that even I could follow.

Below is an example of an interactive map that I have personalised. This example is taken from my post Bute Park ~ Pontcanna Fields A Toddler Explores. It is an interactive map with a route marked on it and waypoints numbered. There is so much more that you can do but this is for starters.




How to personalise and embed google maps to your blog

Making your map


1. 

First of all make sure you are logged onto your google account. Then go into Google Maps. In the left hand corner there is a drop down menu. Click on it and then click on Your Places

How-to-personalise-and-embed-google-maps-to-your-blog-arrow-pointing-at-menu



arrow-pointing-at-your-places


2.


Then click on MAPS

arrow-pointing-at-maps

3.


At the bottom of the screen click on CREATE MAP

arrow-pointing-at-create-map


4.


Type into the search box where you want your map to be centred. In this example it's Pontcanna Fields in Cardiff.


arrow-pointing-at-search-box

5.


Zoom in and start your route. Along the top there is a route button click on this and choose your type of route. I chose Add Walking Route.


arrow-pointing-at-route-button


arrow-pointing-at-add-walking-route


6.


Your curser will be a + so click where you want the route to start (A) and trace your route clicking at regular points. These are called waypoints. I found the route would automatically follow a path but quite often the wrong path so be patient. When you have got to the end double click (B). This is your route. Now to add markers.



arrow-pointing-at-A-the-start-of-the-route

arrow-pointing-at-B-the-finish-point-of-the-route


7.


Click on the add layer button and the marker button will highlight. Click on this and you get a + curser place your marker, rename it and click save.

arrows-pointing-at-add-layer-and-the-marker-button

The markers are interactive so when embedded into your post they are clickable and the name and description will appear. Click on one of mine in the example above to see what appears.

arrow-pointing-at-point-1-to-rename-the-marker

8.


When they are all placed click individual styles and you get a drop down menu. For numbers click Sequence of numbers. Press enter to save.






9.


At any time you can change the name of your map. Just click on the title "Untitled Map" a window will open where you can personalise the map by changing the name and adding a description.



To Embed your map


1.


Click on the three dots at the top and then on embed on my site. You will be given a code to put on your blog page. Highlight and copy this code.






2.


On Blogger open your post and on the task bar click on HTML tab, paste your code in and then click on the Compose tab again. Your map is now on your blog post.







I hope this has helped you understand how to personalise and embed Google maps to your blog. If you have any comments or queries I would love to hear from you.




SHARE:

No comments

Post a Comment

© Teddy Bears And Cardigans. All rights reserved.
Blogger Templates by pipdig