How to embed a Google Map location on your website
Embedding a map with a location marker on a website is essential for businesses that have a physical location and want to provide website visitors with directions.
Google Maps is one of the most popular map services, and it's easy to embed it onto your website.
In this article, I'll guide you through the step-by-step process of embedding a Google Map with a location marker onto a website.
Embedding Google Maps onto a website
Follow these steps to embed the map:
Step 1: Go to the Google Maps website at https://www.google.com/maps.
Step 2: Search for the location you want to embed on the map. This may be the name of a business, the name or address of the building, the street name, etc.
When typing, Google Maps will give you a list of suggestions related to your search term just below the search box. Click on one which matches the location you are searching for.
Your search location will be displayed on the map and highlighted with a map marker as in the screenshot below. You can zoom the map in or out using the plus (+) and minus (-) icons at the bottom right of the browser window.
Step 3: Click on the "Share" button on the left column.
Step 4: A pop-up modal will open with two tabs:
- Send a link
- Embed a map
Switch to the "Embed a map" tab.
Step 4: Choose the size of the map that you want to embed. There are four options to choose from. Below are the size descriptions for each.
- Small: 400px width by 300px height
- Medium: 600px width by 450px
- Large: 800px width by 600px height
- Custom size: This provides you with the option to enter your custom width and height in pixels. You can preview it by clicking on "Preview Actual Size".
Step 5: Copy the HTML code that is generated. Click on the "Copy HTML" button on the right side.
Step 6: Add the copied code to your website. To do so, open the web page file that you want to add the map into using a text editor and paste the copied Google Maps HTML code into the position where you want the map to be displayed.
Since the website will be viewed on devices of different screen sizes, I recommend you make the map responsive as opposed to being a fixed size. This will make the map look cool on all devices with no horizontal scrolling on smaller devices.
To achieve this, just replace the width attribute value in the copied Google Maps Iframe code with a percentage(%). Eg, change width="800" to something like width="100%".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
}
header {
background-color: #bbb;
color: #fff;
padding: 10px;
text-align: center;
}
h1{
font-size: 30px;
}
@media only screen and (min-width: 768px) {
section {
max-width: 1000px;
margin: 20px auto;
}
}
</style>
</head>
<body>
<header>
<h1>Google Map</h1>
</header>
<section>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.806680117046!2d36.82170031426506!3d-1.2902779990589153!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d895863073%3A0x49317666f44d0ed!2sTimes%20Tower%2C%20Nairobi!5e0!3m2!1sen!2ske!4v1679924374892!5m2!1sen!2ske" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
</body>
</html>
This will make the map fill the width of the parent container whether on a desktop or on a mobile screen.
On opening the web page in a web browser, the map will be displayed with a map marker of the location in the position where you placed the code.
Conclusion
A map is an important component of a website for giving directions to the business's physical address to the website visitors. In this article, you have learned how to add a Google map to a website.
