JSFiddle - React, Tailwind, and code Playground

by Wolf

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  </head>
  <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&region=IN&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

let map;
function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 28.217999, lng:94.727753},
    zoom: 5,
    //mapId: '6ba630b884f27e4680a805cd'
  });
  
  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });
}

// Adds a marker to the map.
function addMarker(location, map) {
  
  // Creates a marker on the clicked position
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  
  // Creates a new Infowindow
  var infowindow = new google.maps.InfoWindow();
  
  // Creates an element button with and event on 
  // click to close and delete the marker
  var button = document.createElement("button");
  button.innerHTML = "Close marker"; 
  
  button.addEventListener("click", function(){
    infowindow.close();
    marker.setMap(null);
    marker = null;
  });
 
  // Attaches the button to the Infowindow
  infowindow.setContent(button);
  
  // Opens the infowindow when the marker is clicked
  marker.addListener('click', function(){
    infowindow.open(map, marker);
  });
}