JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map"></div>

CSS

html, 
body,
#map {
  height: 100%;
}

body {
  margin: 0;
}

.marker {
  position: absolute;
  width: 50px;
  height: 50px;
  padding: 5px;
  background: #f00;
  border-radius: 50%;
  cursor: pointer;
}
.marker:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -6px;
  width: 0; 
	height: 0; 
	border-left: 16px solid transparent;
	border-right: 16px solid transparent;
	border-top: 16px solid #f00;
}
.marker img {
  border-radius: 50%;
  max-width: 100%;
}

JavaScript

function CustomMarker(latlng, map, args) {
	this.latlng = latlng;	
	this.args = args;	
	this.setMap(map);	
}

CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {
	var self = this,
  	panes = this.getPanes(),
  	marker = this.marker;
	
	if (!marker) {
	  marker = this.marker = document.createElement('div');
		marker.className = 'marker';
		
    var img = document.createElement('img');
    img.src = self.args.img;
    marker.appendChild(img);
    
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
    if (point) {
      marker.style.left = (point.x - 25) + 'px';
      marker.style.top = (point.y - 25) + 'px';
    }
    
		google.maps.event.addDomListener(marker, "click", function(event) {
			alert('You clicked on a custom marker!');			
			google.maps.event.trigger(self, "click");
		});

		panes.overlayImage.appendChild(marker);
	}
};

CustomMarker.prototype.remove = function() {
	if (this.marker) {
		this.marker.parentNode.removeChild(this.marker);
		this.marker = null;
	}	
};

CustomMarker.prototype.getPosition = function() {
	return this.latlng;	
};

function initialize() {
	var myLatlng = new google.maps.LatLng(-33.9,151.2),
    mapOptions = {
      zoom: 15,
      center: myLatlng,
      disableDefaultUI: true
    };
	
	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var markers = [
  	{
      latLan: new google.maps.LatLng(-33.9,151.2),
      img: 'http://pipkis.ru/upload/000/u1/022/b764cc91.jpg'
    },
    {
     	latLan: new google.maps.LatLng(-33.8939,151.207333),
      img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpxrUwHfsyJPcpZF8k5KuOr8w8KmEVlx_oOrr_o0c3VfgEEbe0'
    },
    {
      latLan: new google.maps.LatLng(-33.895,151.195),
      img: 'http://dg54.mycdn.me/image?t=34&bid=813018847021&id=813018847021&plc=WEB&tkn=*38eSOZUnonujnc3FwZnF19FOPxQ'
    },
  ]
  
  markers.forEach(function(item) {
    new CustomMarker(
      item.latLan, 
     ...