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&.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
});
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)});