How to Add Google Map to Website With Marker with Example

Required steps to add Google map to website with marker

<!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>
  • Declare a div tag to display the area of the map on the web page.
<style type="text/css"> #map { height: 400px; /* The height is 400 pixels */ width: 60%; /* The width is the width of the web page */ } </style>
<!-- Async script executes immediately and must be after any DOM elements used in callback. --> 
<script src="https://maps.googleapis.com/maps/api/js?key=your api key&callback=initMap&v=weekly" async ></script>
<script type="text/javascript">
// Initialize and add the map
function initMap()
{
// The location of delhi
const delhi = { lat: 28.644800, lng: 77.216721 };
// The map, centered at delhi
const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: delhi, });
// The marker, positioned at delhi
const marker = new google.maps.Marker({ position: delhi, map: map, }); }
</script>
  • First of all, we will load the maps javascript API using the script tag as shown below. The callback parameter will execute the initMap() function that will add a map to your page later.
  • The initMap() function initializes and adds the google map to your web page for your desired location when the web page loads.
  • The Below code creates a new Google map object and sets the center and zoom property for the location you want to display. You have to set the latitude and longitude of your location. The more you set the zoom property, you can view the earth’s locations at higher resolutions.
// The location of Delhi 
const delhi = { lat: 28.644800, lng: 77.216721 };
// The map, centered at Delhi
const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: delhi, });
// The marker, positioned at delhi const marker = new google.maps.Marker({ position: delhi, map: map, });
<!DOCTYPE html> 
<html>
<head>
<title>Add Map</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
#map { height: 400px; /* The height is 400 pixels */ width: 60%; /* The width is the width of the web page */ }
</style>
</head>
<body>
<h3 align="center">My Google Map for New Delhi</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=your api key&callback=initMap&v=weekly" async ></script>
<script type="text/javascript">
// Initialize and add the map
function initMap()
{
// The location of Delhi
const delhi = { lat: 28.644800, lng: 77.216721 };
// The map, centered at Delhi
const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: delhi, });
// The marker, positioned at Delhi
const marker = new google.maps.Marker({ position: delhi, map: map, }); }
</script>
</body>
</html>

--

--

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.