In this video, I'm going to explain how to create a map with multiple markers without using any plugin and with a totally free tool: Google My Maps. Before we dive into the tutorial, I'd like to ask you all that if you like the content you're about to see, please give it a thumbs up and subscribe to the channel. You can also activate the bell to receive notifications of future videos. If you have any questions or doubts, feel free to leave them in the comments. Let's get started!
Creating a Custom Map
The first thing we need to 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 need to find the address where we want to place our first marker. Once we find the location, we simply click on “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 Marker Information
Google My Maps also allows us to customize the information about the marker. 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 markers.
Customizing Map Type
Google My Maps allows us to customize the type of map we want to display. To do so, simply go to the “Base Map” section and select the type of map that suits our needs.
Sharing the Map
To embed the map on our website, we first need to give it sharing permissions. In the “Share” section, we give the map a title and make sure it is viewable by anyone. Then, we copy the provided iframe.
Inserting the Map into your Website
Next, we go to the web page where we want to insert the map. In my case, I'm going to do it using an HTML widget in Elementor, but this action can be done with any layout builder. 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 HTML code of the iframe. This allows us to customize the appearance of the map to our preferences.
Ready to Show Off 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 will be able to see the information you have customized for each point.
I hope you found this tutorial useful and that you can easily create your own custom maps. 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.
