Skip to main content
All CollectionsWebsite BuilderWebsite Elements
Website Builder: How to Add a Map
Website Builder: How to Add a Map

Show your location by adding a map into your website

Updated over 2 weeks ago

In Hostinger Website Builder, there are several ways to add a map to your site:

Using the Map Element

Within the editor, open the Add elements panel on the left. Choose the Map element and drag it to the preferred place on your website:

Click on the element to see more options (edit, duplicate, hide, delete, resize):

Click on Edit map and insert the preferred address; you can copy it from Google Maps.

Instead of using the map element, you may also insert a dedicated map section into your website 💡

Using Google My Maps

If you run a business in several locations and want to mark all of them on the map, you can do that with My Maps by Google.

Step 1 - Create the Map

Open Google My Maps, and click on Create a new map. Click on Untitled map, and add the name and description of your map. You can also choose the map appearance by clicking on Base map:

In the search bar, insert your address and place a marker on the preferred area on the map:

Click on Add to map:

This way, you can mark more addresses on the map:

Step 2 - Embed the Map on Your Website

Once you've created your map, it is time to embed it into your website. The first step is to make it visible for everyone – click on Share:

Toggle the options Anyone with this link can view and Let others search for and find this map on the Internet. Click on Share on Drive:

Finally, click on Done:

Now, you're ready to get a code. Click on the ellipsis button at the top of the settings window, and click on Embed on my site:

You'll get the code of your map. Copy it and paste it into your website using the embed code element. If you want the map to be bigger or smaller, resize the code element or change the width and height numbers in the code within the embed code element:

And that's it!

Did this answer your question?