Web Design Blog : Toolkit Websites

Web Design Blog

Toolkit's Guide to: Google's My Maps


Adding a Google Map to your website is a great way for people to be able to see where your business is located. Most people have a smart phone these days that can then click on the Google Map and get directions and even an approximation of how long it will take them to reach you.

Sometimes, when you add your post code or address to Google Map's, it may not be as accurate as you'd like it to be. Or, it might be perfect but you want to show a radius of an area you cover, pinpoint different branches of your business in different locations in one map, or you may want to customise the way it looks or the colour of it. That's where My Maps comes in.

Once you've gone to My Maps you will need to click on the blue button that says "Create a New Map." Once there, you will need to add your address and post code into the search bar as normal, where it will then drop a pin onto the map in that location as seen below. You can reposition the pinpoint to be more accurate if you wish, and then you will need to click on the pinpoint and click on "Add to Map" to set the location.


You will need to click on the wording that says "Untitled Map" to give it a name such as "Our Business Location" or something similar. Once you're happy, you will need to get the code to embed the map onto your website by following these steps

1. Firstly you will need to make the map public in order to share it. Click on the share button, and follow the instructions in order to make it public, then save.


2. Then click on the three dots and select "Embed on my Site"


3. Copy and paste the code that it provides you with. This is the code you can paste into the HTML source of your website page, to add your map to the page!

In order to create a map with multiple pinpoints for different locations, once you've added the first location at the beginning of the process, use the search bar again to add your next address and keep doing that and adding each one to the map until you're finished. You can then embed the map as normal following the steps above.




To add a radius to a map, instead of a pinpoint, simply use the tools provided and then click on the radius to style it by changing the colour, shape etc.




We hope this helps!