How to add Google map inside html page without using API key?
Introduction
In this article, we will show you how to add a Google map to your webpage without using an API key. Google Maps is a web mapping service developed by Google that provides a wide range of features, such as street maps, satellite imagery, street views, and more. An API key is a unique code that is required to access the Google Maps API, but there are alternative methods to add a Google map to your webpage without using an API key.
In this approach, we will be using an iframe to add a Google map inside HTML page without using API key.
Example
Step 1 − Go to the Google Maps website and search for the location you want to display on your map −
Step 2 − Click on the share button and then click on the “Embed map” tab −
Step 3 − Copy the iframe code provided −
Step 4 − Paste the iframe code into your HTML (index.html) file.
Step 5 − Add a width and height to the iframe to adjust the size of the map −
Step 6 − The complete HTML code with the map iframe embed is as follows
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Google Map Example</title>
<style>
/* Add styles to the map container */
body{
color: green;
background-color: aliceblue;
font-family: 'Courier New', Courier, monospace;
}
.map-container {
width: 100%;
height: 400px;
margin: 20px 0;
/* Add a border and shadow to the container */
border: 1px solid gray;
box-shadow: 2px 2px 5px #ccc;
}
</style>
</head>
<body>
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29356.8628482995!2d79.90472935404725!3d23.111446763101917!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3981ad83e71be8b7%3A0x7799f27db25a608e!2sGwarighat%2C%20Jabalpur%2C%20Madhya%20Pradesh!5e0!3m2!1sen!2sin!4v1710994119325!5m2!1sen!2sin"
width="100%"
height="100%"
style="border:0;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</body>
</html>Conclusion
This approach is straightforward and easy to implement, but it does have some limitations. The map displayed in the iframe will have a limited set of controls and features compared to a map implemented using the Google Maps API. Additionally, the map displayed in the iframe will not be fully interactive and may not work properly on certain devices or browsers.
