If you’re new to website-building, adding a map to the webpage can seem like a daunting task. But in reality, it is as easy as it gets. All you need to do is make a few additions to the website’s HTML code and you’re set! Of course, using a third-party widget is also an option, but a good widget comes at a price. Instead, why not just save the money and invest it into the website in some other form? For now, check out these top 3 ways to add a Google Map to your website.
Read Also: Top 5 ways to download a video from X (formerly Twitter) in 2023
In This Article
Why should you add a Google Map to your website?
If you own a small business and use a basic website to market it, one of the best things you can do is add the map location of your business to it. Instead of posting the address, a map is more interactive and immediately gives people directions to your store or office. If your business has multiple stores or offices within a city, you can add multiple maps to the website and help people select the location that is nearest to them.
If you’re designing a website for an event, such as a wedding or a retirement party, adding the location to the venue is the most crucial aspect of the entire exercise. You want to position the map at a place where visitors to the website cannot miss it. Adding a Google Map location ensures that no one gets the wrong directions to the venue. Simply by clicking on the map, people will be able to open it on their devices and easily find the directions with a couple of taps.
Embed or add a Google Map to your website in HTML
Step 1: Go to Google Maps and search for the location you want to add to your website.
Step 2: Click on the location and hit the Share icon in the left panel.
Step 3: Switch to the Embed tab and copy the HTML code.
Step 4: Open the HTML file for your website and paste the code where you want the map to display.
Step 5: Remove the ‘<’ sign in ‘<iframe’ at the beginning of the code and replace it with ‘[um-’. Similarly, replace ‘></iframe>’ at the end with ‘]’.
Step 6: Save your changes. Load your website in a web browser to view the map.
Add a Google Map to your website using CSS
Use this method to make the map fit the screen on any device.
Step 1: Go to Google Maps and search for the location you want to add to your website.
Step 2: Click on the location and hit the Share icon in the left panel.
Step 3: Switch to the Embed tab and copy the HTML code.
Step 4: Open the HTML file for your website and paste the code where you want the map to display.
Step 5: Add a ‘responsive-gmap’ class around ‘iframe’ to make the Google Map responsive on your website. Here is the code for it.
<div class=”responsive-gmap”>
<iframe src=”google maps URL” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>
</div>
Step 7: Add the following code to your website’s .css file.
.reponsive-gmap{
overflow: hidden;
padding-bottom: 50%;
position: relative;
height: 0;
}
.responsive-gmap iframe{
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
}
Step 8: Save the changes and load the website to view the map.
Use a map widget
If you don’t want to tweak any of the code around, simply use a map widget for your website. Here’s how.
Step 1: Open your website building software and go to your page.
Step 2: Go to Contacts and select Add widget.
Step 3: Click on Map.
Step 4: Enter your API key in widget settings and hit Save.
Step 5: Search for the location you want to add to your website. Enter a description for the location.
Step 6: Choose a position for the widget and select what kind of map you want on the website (satellite, terrain, traffic).
Step 7: Hit Save.
Frequently Asked Questions (FAQs)
How do I add a map to my website?
To add a map to your website, open the location on Google Maps, copy its HTML code and paste it into your website’s HTML file.
How do I add a Google Map to my website using the website builder?
You can use a map widget for this task. Open the website builder and find the ‘Add widget’ option in the Contacts section. Then, add a widget for the map, enter your API key, and hit save. Search for a location within the message, make sure it is accurate, and hit Save.
What are some good third-party widgets to add a location to my website?
Snazzy Maps, Powr, and Elfsight are some of the best map widgets for adding a location to your site.
Read Also: 2 Easy Ways To Create a Word Cloud in Microsoft Word (2023)
Conclusion
These are the top 3 ways to add a Google Map to your website. To make sure the map is displayed perfectly on all devices, you should use the CSS method. Responsive maps are much better than just pasting the embedded link in the HTML code. If you found this article helpful, let us know in the comments!
