JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Google Map</title>
</head>
<body>
  <h1>My Google Map</h1>
  <div id="map"></div>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initMap">
    </script>
</body>
</html>

CSS

#map{
      height: 400px;
      width: 100%;
    }

JavaScript

function initMap() {
   var options = {
      zoom:10,
      center: { lat:40.730610, lng:-73.935242} //Coordinates of New York 
   }
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({
   position:{lat: 40.6782, lng: -73.9442}, // Brooklyn Coordinates
   map:map, //Map that we need to add
   icon:'https://img.icons8.com/fluent/48/000000/marker-storm.png',
   // adding custom icons (Here I used a Flash logo marker)
   draggarble: false// If set to true you can drag the marker
});

var information = new google.maps.InfoWindow({
   content: '<h4>The marker is at Brooklyn</h4>'
});

marker.addListener('click', function() {
   information.open(map, marker);
});

}