JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://rawgit.com/nathan-muir/fontawesome-markers/master/fontawesome-markers.min.js"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
  width: 500px;
  height: 400px;
}

JavaScript

function initialize() {
    var myLatLng1 = new google.maps.LatLng(37.787776, -122.405309);
    var myLatLng2 = new google.maps.LatLng(37.788005, -122.405147);

    var mapOptions = {
        zoom: 20,
        center: new google.maps.LatLng(37.787901, -122.405197)
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    var marker1 = new google.maps.Marker({
        map: map,
        icon: {
            path: fontawesome.markers.MAP_MARKER,
            scale: 0.65,
            strokeColor: 'transparent',
            fillColor: '#000000',
            fillOpacity: 1
        },
        clickable: true,
        position: myLatLng1
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    var contentString = 'infoWindow is opened'

    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        pixelOffset: new google.maps.Size(0, 0)
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map, marker1);
    });

    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map, marker2);
    });

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });
}

initialize();