JSFiddle - React, Tailwind, and code Playground

by megaadriano

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Overlay Simple</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
}
div.htmlMarker img{
    border:1px solid white;
}

JavaScript

var overlay;

function initialize() {
    var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
    var mapOptions = {
        zoom: 11,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    
    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    
    function HTMLMarker(lat,lng){
        this.lat = lat;
        this.lng = lng;
        this.pos = new google.maps.LatLng(lat,lng);
    }
    
    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove= function(){}
    
    //init your html element here
    HTMLMarker.prototype.onAdd= function(){
        div = document.createElement('DIV');
        div.className = "htmlMarker";
        div.innerHTML = '<img src="https://i0.wp.com/sebigascotica.com.br/wp-content/uploads/2018/08/raizen-biogas.jpg?fit=566%2C315" style="width:60px;height:40px">';
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }
    
    HTMLMarker.prototype.draw = function(){
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        panes.overlayImage.style.left = position.x + 'px';
        panes.overlayImage.style.top = position.y + 'px';
    }
    
    //to use it
    htmlMarker = [];
    htmlMarker[0] = new HTMLMarker(gmap.getCenter().k, gmap.getCenter().D);
    htmlMarker[1] = new HTMLMarker(gmap.getCenter().k+.05, gmap.getCenter().D+.05);
    htmlMarker[0].setMap(gmap);
    htmlMarker[1].setMap(gmap);
}