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,
chicago = new google.maps.LatLng(41.879535, -87.624333),
mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
addCircle = function(ev){
return new google.maps.Marker({
position: ev.latLng,
map: map,
zIndex: -99,
icon: { path: google.maps.SymbolPath.CIRCLE, strokeWeight: 10 }
});
},
addIcon = function(ev){
var icon = new google.maps.MarkerImage(
"http://www.mapsmarker.com/wp-content/plugins/leaflet-maps-marker/leaflet-dist/images/marker.png",
new google.maps.Size(32, 38)
);
return new google.maps.Marker({
position: ev.latLng,
map: map,
zIndex: 10,
icon: icon
});
};
google.maps.event.addListener(map, 'click', addCircle);
addIcon({latLng:chicago});
addCircle({latLng:new google.maps.LatLng(41.99, -87.625)});