Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Add Google Maps to a Website?
In this article, we will be exploring Google Maps and how to add or embed google maps into our HTML template/website. Once the Google Maps are embedded into the website we can pin a location in it to display the user the current position of the store or a company.
Steps to Embed Google Maps
Below are the steps that need to be followed to embed Google Maps into your HTML pages:
We need to generate an API key to be able to use Google maps privately.
Creating the HTML container to place Google Maps.
Adding the external script provided by Google inside the HTML document.
Write the JavaScript code to initialize the map inside the container.
We will be exploring the above points in detail below:
Generating the API Key
We can fetch the location data from Google Maps, but before proceeding with this we would require the Google Maps key to be generated. This key will authorize the collection of the data from google maps. You need to follow the below simple steps to generate this key:
Click & visit the following link to open the Google Cloud Console.
Create or select an already created Project.
Click continue for enabling the API and enable the Maps JavaScript API.
Once enabled now we need to create credentials for the same.
Now navigate to the credentials section of the menu located in the left sidebar.
Click on the "Create Credentials" button below the navigation bar and choose "API Key" to start generating the credentials.
Once the credentials are created you will get an API key.
You can use this key to embed Map in your website.
Creating the HTML Container
Now we will be creating an HTML container for placing the google maps. We will be using simple div elements for this example. You need to follow the following steps:
Create a new HTML page.
Add an empty div tag inside the body section with a unique ID.
Style the div to set appropriate dimensions for the map.
Adding Google Maps Script
You need to add the Google Maps JavaScript API script to your HTML document. This script should be placed after the DOM elements. Replace <YOUR_API_KEY> with your actual API key:
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly" async> </script>
JavaScript Implementation
After the HTML is setup, initialize JavaScript to bring the map inside the container. The initMap() function is required as it's the callback function specified in the Google Maps script URL.
Complete Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Set the size of the div element that contains the map */
#map {
height: 400px;
width: 400px;
}
h2 {
color: #308d46;
}
</style>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<h2 style="color: grey;">
Add Google Map to your Webpage
</h2>
<!--The div element for the map -->
<div id="map"></div>
<!--Adding script by google -->
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly" async></script>
<script>
// Initialize and add the map
function initMap() {
// The location of TutorialsPoint office
const tutorialsPoint_office = {
lat: 17.43827944602866,
lng: 78.39530424154626
};
// Create the map, centered at tutorialsPoint_office
const map = new google.maps.Map(
document.getElementById("map"), {
// Set the zoom of the map
zoom: 17.56,
center: tutorialsPoint_office,
});
}
</script>
</body>
</html>
Output
The above code will display a Google Map centered at the TutorialsPoint office location with zoom controls and navigation features enabled by default.
Key Points
Always replace
<YOUR_API_KEY>with your actual Google Maps API keyThe
initMap()function name must match the callback parameter in the script URLSet appropriate dimensions for the map container div
The
asyncattribute loads the script asynchronously for better performance
Conclusion
Embedding Google Maps in your website requires an API key, proper HTML structure, and JavaScript initialization. This provides users with interactive maps and location services for better user experience.
1K+ Views
