JSFiddle - React, Tailwind, and code Playground

by Younes Eshani

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map_canvas" style="width: 500px; height: 250px;"></div>
<label>Lat:</label><input id="lat" name="lat" />
<br>
<label>Lng:</label>
<input id="long" name="long" />

CSS

<style> html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%
}

</style>

JavaScript

var map;
var marker;

function initialize() {
  var myLatlng = new google.maps.LatLng(37.2529974,55.1703095);

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

  marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Set lat/lon values for this propert"
  });

  google.maps.event.addListener(marker, 'dragend', function(event) {


    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("long").value = event.latLng.lng();
  });

  google.maps.event.addListener(map, 'click', function(event) {


    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("long").value = event.latLng.lng();
    marker.setPosition(event.latLng);
  });
}
google.maps.event.addDomListener(window, "load", initialize());