Google My Maps Tutorial: How to Create Custom Maps (Share with Friends or Use on Websites)

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).

WhfwVkZCYQtsN2Z1kBqnxcNFxenSwBKQdHBA8fWmK8xlP jYrjqnLdE61lYW4kP6IFK9rh0RLi91uBD8Pn0x4x7Mh7DPRhzv7U9W9qvN A20SEM185oN6w7ehy3 P7G6uK74QyLe

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.

ADtrnR7VDVuQo IfHhGrW thbC62XLV81RITG DHN63MWorav0tyhQ0 kxFqa o0m7k6HOl9j8 1c9uhA36fudNlXaipSuVXIEHmCMPuhIjq9ybTnjGwfXWUj

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)

5q3IktmKXBDY6CrkhENlSohMQlxt2JLmA1XYCOEk1EF5fbUNj5zrBfRjq3J4O gwq26y I3zyLEJpYZVLPXF8IDzjpM0qXdhyC7XrAlTUNSr5eplMOfgNvhtD84BYRiVpTFzHvoH
screenshot from google my maps tutorial

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)

Jgm4bTlUipBh7PM6PVFMGVQfm NSIxWm93pOnFapo 7N2AMzDKUUK evWhGTUpPCCbeo7SJ0NVhXY94w KNK4n0HpXK1NkuoAYnG0

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)

v lk9rB3p7qLz j9 KUeSytyPDNhkzRL3jl1 igrlOTmIr M2GsjaobEChnAbjWXb6qx 6YdamgAy Q8Ezgf 6IKOm1k26frao MK9MtQZKwVsDBEVvaRgXzPH02tWlVZ9pWvTaI

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)

YU FXZfZY4gB8Y3mpuBpN dkDu5qeG

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).

rHOX9Zo8nWsp8D6PuifpjeDat TfmPE8O1THB7OLe4ieyJ5Kewhq6ep4 Ku8vki3BvIbLdcEKiiIlO40V

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)

oAlblbo fUSx7RopvFutNIL pgt5q6yi08QbcTo96M54ZTX89AZmnDfy jvZEglDxrkU0a

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’

qetAd0WJjutV3Em7wLhJgXbqXOSJGI10UiNx3cn7VULanm0qPJz80OQ ejhh1tBDDh16wsE8cmr 5g3xm4cHEs0S4Fk BE NNBJJ4z8He6h5tm3aHUS9aBeiqgOO5zAkPIo1UTXP
ICmhY4CuXzyp325IgR3tIX7qBnalLYLIfm8 VJFBGEBEglqaLEUDub F7qLfqc gZLzhdlV tKRNQNeQFodPdeOCd7SSBGEbDvPEOgRjearMhUs8 eqO Ymi 1QtUoFibJ6HNNCU

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)

ObO1oD9Xo4Rq5KLF xrBo756BzQ7Uqax3q6E23E6OWos grW8xMoqC5GZoRD M 7dt1ZdssvmVn4fl6j1 yCZ LrgBsx4pahU5gsaO8TPDUewlS0adIawgwzoIuBtLl4WLHfaR9

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)

xdm5bKSCzY0yTGF24EYGv2DXiptiwdBtj DmMnZcHvNCq2CDmlzon5ghuiLGTBzBAmDWWzgY zqqACXG67rrY1kR4wlbanFRD7EGKQcTDF c N6LqoFTyneLrv4z5EH8VgW7vdLY

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.

D 2wfoujOQVivTJV8diyaxe9Kvr fzUm9OMUThj7 uL1FshB6rmEBIvRs73bCJPZ 6ev4ri0JaV FarXggAJSX7Icep 263JlTHM7WfadkUSMB81TjY4O7cS1pgDQ24ptUwQkYXO

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).

FOaTjoKw97aDQv0ZlJt2xs6BtHYGbpHzvQoY6BTZr0MgEBe20Sw1tJkUF t6xdMcHBHa Z9SsddF8uKKUeMxQw9uUCACQB2uR9iqHaLPEz4omgAxS3LbumHjtIXyy X KPnZr10

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.

IoHHB v0NhCgSEhtpS3eRk2OOd9URC47LNraiiMPw DXv 4ojD8n1I XfIlALb9VOUTqpheoLFX4ORpuDSJryqbZLdRdB8DylmwgyReMuY9bCu1 ntYBu Fmt0WhxvW5S P1wu8K

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) 

k8Ogqq CFpyCFtxj 1X LpRqNiKFyMox96onJ57C2rX84Jqw0J0njjwzKFKwdEb6k7Q1 eShfZZqb0ewuOoOY xSwkWK czpdjl0KBBJvolIpVn2V2YSMMFi1Jibcpp0bq XqKv
w7GlR2ZiQBeOKxwIqFikGrNVVLpvhIwpbojv2RzJRA4nUX7yx3gN89OfDP9DUGD4nHqk14dbhfzOc6hqG63YeS EM5SSx2LBPocJFQdnOlUp45GRyXFGYPEC y8YAlsb1 KJNcym

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.

a7qphMLEfJ2iRt9LtXa7JcSnkBY4jdZWLCehmrvuGa2CGgbGrKKmblSiNKINzGD2pLstpnHl5VAOAB9GRatqibsJMW6NuOgc1xYi2DuxCgjpu9C0k9MV4r6x070aOvxTNS iUst

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)

sePJdF2e2MxtBf 3AmXGVqHUxS JZF

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)

3oBbAk Pdk7QHZrvJ z8 HMQXmUdovvNrCRRLeQ0Shv0j6 VwtZkVPoQ2 PAr5do4 vC RJ pZKrendhQkM5N7e8dqPrdan4hEXI3N8sTEycp029JB09ayzVWTDIK3FEMyrXuC3J

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.

PPQBH4JHlJC69l6L0bXr r1qmVxeta9IQmcbUeTEiCtCtp0IAHQSYyMvAfRLjMfou6tf mkA x40UFyfNJ9XAihpYa7v66p1Oqi775glK4X8WnIsrY2Fnj53 EnF VNlJ3SlSlV8

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users