Google Maps custom marker using Overlay

HTML

<script src=" https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

SCSS

#map_canvas{
  background: #fafafa;
  width: 100%;
  height: 400px;
}

.custom-marker{
  margin: -10px 0 0 -10px;
  transition: all ease .5s;
  &:before{
    display: block;
    position: relative;
    content: '';
    width: 20px;
    height: 20px;
    background: #bada55;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
  .custom-marker-inner{
    position: absolute;
    bottom: 36px;
    left: -15px;
    z-index: 3;
    &:before{
      content: '';
      display: block;
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 50% 50% 0 50%;
      box-shadow: 1px 1px 2px rgba(0,0,0,.2);
      transform: rotate(45deg);
    }
    .custom-marker-avatar{
      content: '';
      display: block;
      width: 44px;
      height: 44px;
      line-height: 44px;
      font-weight: 600;
      font-size: 12px;
      background-size: cover;
      border-radius: 50%;
      position: absolute;
      top: 3px;
      left: 3px;
    } 
  }
}

JavaScript

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

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

CustomMarker.prototype.onAdd = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    // Generate marker html
    div = this.div = document.createElement('div');
    div.className = 'custom-marker';
    div.style.position = 'absolute';
div.innerHTML = '<span><input type="text" value="asfd" style="padding:10px;font-size:18px;" /></span>';
    var innerDiv = document.createElement('div');
    innerDiv.className = 'custom-marker-inner';

    div.appendChild(innerDiv);

    if (typeof(self.args.marker_id) !== 'undefined') {
      div.dataset.marker_id = self.args.marker_id;
    }

    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click");
    });

    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
}; 

CustomMarker.prototype.draw = function() {
  if (this.div) {
    let position = new google.maps.LatLng(this.latlng.lat, this.latlng.lng);
    var pos = this.getProjection().fromLatLngToDivPixel(position);
    this.div.style.left = pos.x + 'px';
    this.div.style.top = pos.y + 'px';
  }
};

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

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 10,
  center: myLatlng,
  streetViewControl: false,
  fullscreenControl: false
});

var marker1 = new CustomMarker(
  myLatlng,
  map,
  {}
);



// Init position changes
var positions = [{lat: -34.397, lng: 150.644},{lat: -34.42, lng: 150.69},{lat: -34.31, lng: 150.68},{lat: -34.34, lng: 150.69}];
marker1.latlng = {lat: -34.397, lng: 150.644};
marker1.draw();/*
setInterval(function(){
  console.log('timeout');
  marker1.latlng = positions[Math.floor(Math.random() * (3 - 0 + 1)) + 0];
  marker1.draw();
},...