JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

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

JavaScript

function initialize() {
  var crosshairShape = {
    coords: [0, 0, 0, 0],
    type: 'rect'
  };
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(23.634501, -102.552784),
    zoom: 5,
    scrollwheel: false,
    panControl: false,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);

  var marker = new google.maps.Marker({
    map: map,
  });

  marker.bindTo('position', map, 'center');
  //marker.bindTo('position', map, 'center');

  map.addListener('dragend', function() {
    var Newlat = map.getCenter().lat();
    console.log(Newlat);
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "load", initialize);