JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css">
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map_canvas"></div>

JavaScript

var lastIndex = 0;
var map;

var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
    zoom: 7,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

google.maps.event.addListener(map, 'click', addMarker);

var resultIcon = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: "red",
    strokeColor: "black",
    strokeWeight: 10
};
   
new google.maps.Marker({
    position: chicago,
    map: map,
    icon: "http://www.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-dist/images/marker.png",
    zIndex: 10,
    optimized: false
});
    
    
function addMarker(event) {
    var marker = new google.maps.Marker({
        position: event.latLng,
        icon: resultIcon,
        zIndex: 5,
        optimized: false,
        map: map
    });
}
    
addMarker({latLng:new google.maps.LatLng(41.99, -87.625)});