v=3.31

by Wolf

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCT_vdwMeK-WojV-Hy8jIT3pJ49BuvSAuM&amp;language=ja&amp;libraries=places,geometry&amp;v=3"></script>
<div id="map"></div>

CSS

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

      #map {
        width: 100%;
        height: 100%;
      }

JavaScript

let map = new google.maps.Map(document.querySelector('#map'), {
  center: {
    lat: 35.658581,
    lng: 139.745433
  },
  zoom: 16,
  styles: [{
    featureType: "all",
    elementType: "labels",
    stylers: [{
      visibility: "off"
    }]
  }]
});

class Layer extends google.maps.OverlayView {
  constructor() {
    super()
  }
  onAdd() {
    let div = document.createElement('div');
    let panes = this.getPanes();
    div.style.position = 'absolute';
    div.style.top = '0px'
    div.style.left = '0px'
    div.style.border = "1px solid red";
    div.style.boxSizing = 'border-box';
    div.style.width = '100px'
    div.style.height = '100px'
    panes.overlayLayer.appendChild(div);
  }
  draw() {
    let projection = this.getProjection();
    let divPixel = projection.fromLatLngToDivPixel(new google.maps.LatLng(35.658581, 139.745433));
    this.style.left = divPixel.x + 'px';
    this.style.top = divPixel.y + 'px';
    console.log(divPixel)
  }
}

let layer = new Layer()
layer.setMap(map)