I needed to create a map with three locations for a site I was working on. Then I decided I wanted to make custom icons to match the color in the logo.
I will walk you through the steps to create a location map with custom icons via Google Maps to embed on your website.
Go to Google Maps
Select Create new map. This is also where you would go to make any changes to an existing map by clicking open a map and any changes will be automatic. No need to go back to your site and embed a new code.
On my website, I have created a new page and called it Locations and am just using Wal-Mart locations for the purpose of this post.
Now back to the map. I am going to name my map walmart locations and it will be saved to my Google Drive automatically. Just click where it says untitled map.
Enter a title and brief description then save.
Click the add new marker icon then enter (or copy and paste from new page on your website) the address for the first location. Click the blue search icon on the right.
You will click on the address line on the left to get a popup that asks you to add to map, which will secure that marker.
Follow those steps again for each new location until you have added all of them.
Now I have my locations set. Let’s go ahead and add the map to our site. Click share above you list of addresses.
Click change
Make it public (has to be set to public in order to embed) and save.
Click done on the next screen. To the right of share, click on the three dots then on embed on my site.
Copy the embed code
Back on your website you are going to click on the text tab in page editor. Paste the embed code where you want it.
I will save and preview the draft and see how it looks.
Here is the map on my page.
Now, the way the map is, if the viewer wants to see which marker belongs to which location they have to click on the marker to get a popup. I want to make it a little easier. I’m going to number my locations and create custom icons which correspond to that number.
In the visual tab, I have made my addresses a numbered list.
Custom Icons
Now, to make my custom icons, I went to https://mapicons.mapsmarker.com/
Scroll down to Marker Categories, click on numbers and letters at the bottom, center.
Select Numbers
You have different style options at the top, just click on each one and see which you like best. Choose your color in the center and then generate below that.
Once you are satisfied with the look, click download and it will download to your PC.
You will find the zip file in your download folder.
I moved mine to a new folder but that is up to you. If you click on the zip icon, you then have the option to open with (or you can double click on the icon).
I use WinRAR archiver but if you don’t have something similar you should be given the option to unpack and asked where you want to unpack it. I click on extract to and select a location. My files are now unpacked from zip.
Now that you have your icons made, you will need to go to Imgur
The icon entered into Google maps requires a URL and we will get that from Imgur. No sign up is required.
Click upload images and then browse your computer
If you use ctrl + mouse click, you can select all 3 that you want. Click Open
Then click start upload
Click on first image, the URL you want is on the right under Direct Link. For the second, click on second image and same for the third.
Now let me show you where to put this URL in Google Maps. Click on the little paint bucket icon next to the first address.
Then click on more icons
Copy the link from Imgur and paste in the box, click add icon then ok.
Click more icons again to repeat the process for the second icon and the third.
If you remember, I mentioned earlier that you don’t have to add the embed code again after any changes are made.
Go back to dashboard after you have changed your icons. If you still have your preview open then refresh the page. If you closed it then just open another preview and you will see the changes we made.
