Member-only story
How to Add Google Maps to Website With Marker with Example
Hello friends, in this tutorial I will explain step by step with an example how to add google Maps to website with a marker. This is a very important part of website development because everyone wants to embed Google Maps on their sites so that users or visitors can navigate to their desired locations by zooming on the map.
Before getting started with the example, make sure that you have the basic knowledge of HTML, CSS, and JavaScript.
Also read, Get user location from the browser using JavaScript and Geolocation API
Required steps to add Google map to website with marker
Step 1:- Create an HTML page as shown below
<!DOCTYPE html>
<html>
<head>
<title>Add Map</title>
<link rel="stylesheet" type="text/css">
</head>
<body> <h3 align="center">My Google Map for New Delhi</h3>
<!--The div element for the map -->
<div id="map"></div>
</body>
</html>Understand the above code:-
- Declare a div tag to display the area of the map on the web page.
Step 2:- Get an API key from Google Cloud Console
Step 3:- Design the map using CSS inside the style tag under the head section as shown below.
