JSFiddle - React, Tailwind, and code Playground

by lav kushwaha

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

JavaScript

var myOptions = {
  zoom: 11,
  center: new google.maps.LatLng(36.236797, -112.956333),
  disableDefaultUI: true,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
  },
  mapTypeId: 'terrain',
  draggableCursor: 'crosshair',
  draggingCursor: 'move'
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);

var marker;

function placeMarker(location) {
  if (marker) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }

  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()


  });
  infowindow.open(map, marker);

}

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});