JSFiddle - React, Tailwind, and code Playground

by liangyongning

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap" style="width:500px;height:380px;"></div>
<div id="message"></div>

JavaScript

function log(msg) {
	document.getElementById('message').innerHTML += msg + '<br>';
}

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(51.508742, -0.120850),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(51.506742, -0.120850),
        map: map
    });
    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(51.510742, -0.120850),
        map: map
    });
    var infowindow = new google.maps.InfoWindow({
      content: 'Welcome to Google!Thanks for using our products and services (“Services”). The Services are provided by Google Inc. (“Google”), located at 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.By using our Services, you are agreeing to these terms. Please read them carefully.Our Services are very diverse, so sometimes additional terms or product requirements (including age requirements) may apply. Additional terms will be available with the relevant Services, and those additional terms become part of your agreement with us if you use those Services.'
    });
    
    marker1.addListener('click', function () { infowindow.open(map, marker1); });
    marker2.addListener('click', function () { log('marker2 clicked'); });

    var overlay = new MyOverlay(map);
}

function MyOverlay(map) {
  this._div = document.createElement('div');
  this._div.style.background = 'rgba(0, 0, 255, 0.5)';
  this._div.style.position   = 'absolute';
  this._div.style.zIndex     = 1000;
  this._div.style.width      = '100%';
  this._div.style.height     = '200px';
  this.listeners = [];
  this.setMap(map);
}

MyOverlay.prototype = new google.maps.OverlayView();
MyOverlay.events = [
	'mousedown', 'mousemove', 'mouseover', 
  'mouseout', 'mouseup', 'mousewheel', 
  'DOMMouseScroll', 'touchstart', 'touchend', 
 ...