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="start"></div>
<div id="end"></div>
<div id="map"></div>

CSS

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

JavaScript

function initMap() {
  var theLat = 51.508742;
  var theLng = -0.120850;
  var displayMap = document.getElementById("map");
  var myLatlng = new google.maps.LatLng(theLat, theLng);
  var myOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(displayMap, myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
  });
  var positionStart, positionStartNew;
  google.maps.event.addListener(marker, 'dragstart', function() {
    positionStart = this.position;
    document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    if (confirm("Are You Sure You Want To Move this marker?")) {
      positionStartNew = this.position;
      document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
    } else {
      marker.setPosition(positionStart);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);