Google Maps Add Marker Using Maps Javascript API and HTML

Properties of Google maps add marker using maps javascript API

<!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>Google Map Marker for Guwahati Zoo Road</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=AIzaSyBh1__iOLq4pmTZES2w8Ss1dWFs2ITWCys&callback=initMap&v=weekly" async ></script>
<script type="text/javascript"> // Initialize and add the map function initMap()
{
const myLatLng = { lat: 26.1752316, lng: 91.7744502 };
const map = new google.maps.Map(document.getElementById("map"), { zoom: 15, center: myLatLng, });
// add a custom marker
new google.maps.Marker({ position: myLatLng, map, title: "Hello World!", });
}
window.initMap = initMap;
</script>
</body>
</html>

Google maps custom marker example

<script type="text/javascript"> // Initialize and add the map function initMap() 
{
const myLatLng = { lat: 26.1752316, lng: 91.7744502 };
const map = new google.maps.Map(document.getElementById("map"), { zoom: 15, center: myLatLng, });
// add a custom marker
const image = "custommarker.png"; new google.maps.Marker({ position: myLatLng, map, title: "Hello World!", icon: image, }); } window.initMap = initMap;
</script>

--

--

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.