In this article, I’ll show you how to create custom maps using Google my maps. This will enable you to showcase your custom maps to overlay Google maps or basically make it easier for your locations to be spotted by your friends, family, or clients. You can share your custom google maps on your website, with friends or use them on apps.
You’ll be able to do a couple of things like add different locations and features, draw routes, and you can create other map locations as well.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Google My Maps Tutorial
Creating a Custom Google Map with Google My Maps
To be able to create a map using Google my maps, you need to have a Gmail account.
So start off by signing in to Google with your Gmail account then go to Google and search for My maps then go to the my maps URL (01:53).
Go to the create a new map button, in the next window you can choose your map location, it can be in your country or anywhere else in the world.
For this tutorial, we’re going to create a map in Uganda.
Go to the Add marker option (02:38), click anywhere and give it a name and a description (mine is location 1). The description can be for example contact, working hours, or any other information about the location. When you’re done, click Save.
After saving, you have other options you can choose a color, change the icon and you can even use an image for your location.
Click on the Add marker option again and create a new location, zoom into the specific location where you want to add your location, click there, give it a name and description then save. You can give it a different icon and color, or even an image.
To add an image just click the camera icon (📷), then you can upload an image to use or use the camera, or get it from your google drive (04:25)
Back to Add marker, add another location for example a hospital, click where you want it and give it a name, choose an icon and color for it then save (06:06)
With these locations added, you can do more with them for example you can draw a line and label a particular area by using the draw a line option (06:10)
You can add a name for your custom shape as well as its details.
You can change the color for your shape, or add transparency or even a border (06:53)
Note that once you add a shape you can not edit or add anything underneath it.
Go back to the draw a line option to add a new shape. Make sure that when you’re drawing your shapes you connect the start point to the endpoint (07:18).
Give your shape a name and details, change its color and save. Then go back to your draw a line option to draw a route (08:01)
When you’re done drawing your route just click on the last point and give it a name, mine is “Route to main gate of pitch”, you can also add details about the route like how long it is, and you can color it to your preference.
You can also add different routes for example a biking route, racing route, etc.
Measuring Distance Between Locations
There’s a measuring tool you can use to measure the distance between specific areas (09:19). When you’re done measuring you can simply click on the measuring line and it disappears. This measuring tool is not added to the map, it’s just used to show the distance between sections on your map.
Back to the Add Marker option, click to add another location, give it a name and details you want, give it a color and icon of your choice and save.
You can go ahead and use this same process to add different locations on your map. Make sure you zoom in on your map to get the accurate/specific location where to add your pin.
To Read: 3 Ways to Add MAILTO link in Elementor (Email Link in WordPress)
Adding Layers to your Custom Google Map
When you’re using Google My Maps, there’s also an option for you to use Layers. For example, the one we’ve just been working with is the first layer, it’s labeled ‘Untitled layer’ but you can click on it and rename it to ‘our office locations’, then you can click on the Add layer option to create a new layer (11:03). Name it; ‘Our Staff Quaters’
Under the ‘our staff quarters’ layer, go to the Add Marker option to add a new pin, name it SQ 1, add the information about it, give it an icon and color of your choice then save (11:48)
You can add other pins under this layer, just zoom in and click on the specific area where you want to add, then give them different names like SQ 2, SQ 3, with their details (13:10)
You can create as many layers as you want.
You can even change the appearance of your map. Google maps gives you a couple of options you can choose from for your map’s appearance. When you click on the Base map option, you’re given options like map, satellite, mono city, etc. When you choose a particular option the layout of your map changes (13:30)
When you’re done adding your pins and editing their details, you can preview your map (13:35), and you’ll see that all your locations show, and when you click on any pin you can see its details on the left side.
To Read: Create an Instagram Access Token for Elementor with New Instagram API
Setting a Default Map View
To set your current view of the map as the default view, click on the 3 dots and choose set default view. This means that whatever view of your map you’re currently having if you set it as default anyone who gets to that map will view it that way too. For example, if it’s zoomed-in they’ll see it as zoomed-in. (14:35).
Your map by default will be named Untitled map, you can click on it and give it a name, for example, your company name, and you can add your company description too (15:07), don’t forget to save.
To Read: How To Use Google Titan USB Security Key On PC, Android & iPhone
Custom Google Map Sharing Features
The next thing we’re going to do is enable sharing of this map so that anyone who has access can view and share the map as well.
To do this:
Click on the Share option, on the Who has access option click on change then on the Link sharing window that opens up select Public, then save (15:42)
This means whoever has a link isn’t required to sign in to view it. This will also enable you to embed this map on your website because it’s now public.
To Read: How to Create Business Email & Use it with Gmail for Free 2020
Embeding Custom Google Map on Websites
To embed your map on your website, go back to the map and click on the 3 dots then choose the embed on my site option (16:04), copy the HTML code that’s given in the next popup.
With the code copied, go back to your WordPress dashboard, go to Pages and open the page where you want to add the map, for example, go to the About page and Edit with Elementor (16:35),
In your Elementor editor, click the (+) icon to add a new section (16:47).
Go to your Widgets area and search for the HTML widget, drag it to your section (16:49)
Select the widget and in the edit area on the left, under Content paste in your HTML code from google, and automatically the map will display. Save changes and preview.
Your website visitor is also able to zoom in and view the specific locations that you added, as well as click on the specific locations or pins and get details about them. They also have the option to share the map on social media platforms like Facebook, Twitter, etc.
Also Read: Google Site Kit Plugin Setup Tutorial: Connect to Analytics, Search Console, Adsense in WordPress
In Conclusion
With Google My Maps, you can create different custom maps and be able to display them on your website anytime, anywhere, and share them with whomever you wish. Hope this tutorial will be of value to you.
If you have any questions or comments, let me know in the comments section below. Subscribe to my newsletter and youtube channel for more tips and tutorials.
