JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;ext=.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="map_canvas"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

var currentMark;

function initialize() {
  infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50),
    pixelOffset: new google.maps.Size(0, 0)
  });
  // create the map
  var myOptions = {
    zoom: 9,
    center: new google.maps.LatLng(43.4529192156, -116.22985867),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  map.addListener('click', function(e) {
    console.log(infowindow.get("pixelOffset").toString());
    infowindow.setContent("<input type='button' value='change pixelOffset' id='btn' /><input id='xval' value='20' size='2' /><input id='yval' value='20'  size='2' />");
    infowindow.setPosition(e.latLng);
    infowindow.open(map);
    infowindow.addListener('domready', function() {
      google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
        var size = new google.maps.Size(parseInt(document.getElementById('xval').value), parseInt(document.getElementById('yval').value));
        console.log("size=" + size.toString());
        infowindow.set("pixelOffset", size);
        infowindow.open(map);
      })
    });
  });
  google.maps.event.trigger(map, 'click', {
    latLng: new google.maps.LatLng(43.4529192156, -116.22985867)
  });
}
google.maps.event.addDomListener(window, 'load', initialize);