JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<input id="P102_LATITUDE" /><input id="P102_LONGITUDE" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

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

JavaScript

var map;

function initialize() {
var myLatlng = new google.maps.LatLng(51.9,-2.08);

var myOptions = {
 zoom: 13,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var marker = new google.maps.Marker({
 draggable: true,
 position: myLatlng,
 map: map,
 title: "Your location"
});

google.maps.event.addListener(marker, 'dragend', function (event) {
 document.getElementById("P102_LATITUDE").value = this.getPosition().lat();
 document.getElementById("P102_LONGITUDE").value = this.getPosition().lng();
});
google.maps.event.addListener(map, 'click', function(event) {
 marker.setPosition(event.latLng); 
 document.getElementById("P102_LATITUDE").value = marker.getPosition().lat();
 document.getElementById("P102_LONGITUDE").value = marker.getPosition().lng();
});
}

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