Google Maps HTML Embed with Multiple Locations and Custom Markers (Free!)

While the regular Google Maps feature will not let you do multiple locations and the Google Maps API costs money, there is a 3rd alternative that is FREE and very easy to set up.

Here is how you can obtain a custom Google Maps HTML embed with multiple locations and custom markers:

1 — Make sure you are signed in on Google Maps

You will need a Gmail/Google Account to do this. You should see your profile on the upper-right hand corner of Google Maps once you are logged in:

2 — Click the menu in the upper right

3 — Click “Your Places”

4 — Click the “Maps” tab, then “See All Your Maps”

5 — Click “Create a New Map”

6 — Name your “Layer”

A layer is just a way to “group” 1 or more locations. For now we will just keep it simple with 1 layer.

7 — Type your 1st business address and press Enter

8 — Now click “+ Add to Map”

Don’t worry, we will replace that awful green icon in a second!

9 — Click the paint bucket (“Styles”) icon

10 — Click “more icons”, then “Custom Icon”

You can use one of the icons provided by Google if you like, but I recommend uploading your own logo instead!

11 — Upload an image/logo from your PC

This address will now show your very own custom icon!

12 — Add a 2nd address if you want

13 — Repeat the same steps as before, and you will now see 2 addresses in your list

You can keep adding addresses as you see fit!

14 — Click “Share” and name your map

15 — Make sure all 3 toggles are activated

16 — Click the 3 dots, then “Embed on my site”

17 — Copy and paste the provided HTML into your website

And that’s all! You now have a Google Maps embedded into your site, featuring multiple locations and custom markers!

My name is Andrew, and I am a full-time Software Engineer, part-time website developer. To see some of my work, please check out my business portfolio:

https://vibrantwebs.com/portfolio

If this article was useful to you, feel free to share and/or give me a follow! Thank you