In this video, I am going to explain how to create a map with several markers without using any plugin and with a completely free tool: Google My Maps. Before we dive into the tutorial, I would like to ask you that if you like the content you are about to see, please give it a like and subscribe to the channel. You can also activate the bell to receive notifications of future videos. If you have any questions or concerns, don't hesitate to leave them in the comments. Let's get started!
Creating a Custom Map
The first thing we must do is access Google My Maps and create a new map. Here we have the freedom to work with multiple layers, allowing us to organize our markers efficiently. To create a layer, we simply give it a name and we can create as many as we need.
Adding Bookmarks
Next, we must find the address where we want to place our first marker. Once we find the location, we simply click “Add to map.” This tool offers us several customization options. We can change the color of the marker, choose a different icon and even upload a custom icon if we wish.
Customizing Bookmark Information
Google My Maps also allows us to customize the marker information. We can give it a name, add a description and even upload an image or photo, either from a URL or Google Drive. It is also possible to insert a YouTube video to enrich the information associated with the marker.
Creating Routes (Optional)
If we want to define routes between points, this tool offers us that option. However, in this tutorial, we will focus on creating bookmarks.
Customizing Map Type
Google My Maps allows us to customize the type of map we want to display. To do so, we simply go to the “Base Map” section and select the type of map that suits our needs.
Sharing the Map
To insert the map on our website, we must first give sharing permissions. In the “Share” section, we give the map a title and make sure it is visible to anyone. Next, we copy the provided iframe.
Inserting the Map on your Website
Then, we go to the web page where we want to insert the map. In my case, I am going to do it using an HTML widget in Elementor, but this action can be done with any layout designer. Simply paste the iframe in the desired location.
Adjusting Map Size
If we want to modify the size of the map, we can do so by adjusting the width and height values in the iframe HTML code. This allows us to customize the appearance of the map according to our preferences.
Ready to Show Your Custom Map!
And there you have it, your custom map with markers is ready to be displayed on your website. If you click on the markers, you can see the information you have customized for each point.
I hope this tutorial has been useful to you and that you can create your own custom maps easily. If you liked this content and want to see more tutorials like this, don't forget to subscribe to the Youtube channel and activate the bell to receive notifications. If you have any questions, feel free to leave them in the comments! Until next time.
