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>
<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>
// 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.

More from Medium

Way to learn Node Js

Web Application Development

Google places autocomplete example using maps JavaScript API -

My first blog, How to start with Web Development in 2022 ?