JSFiddle - React, Tailwind, and code Playground

by Aman Adhikari

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body>Lat:
    <input id="lat" name="lat" val="40.713956" />Long:
    <input id="long" name="long" val="74.006653" />
    <br />
    <br />
    <div id="map_canvas" style="width: 500px; height: 250px;"></div>
</body>

CSS

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

JavaScript

var map;

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

        var myOptions = {
            zoom: 8,
            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("lat").value = event.latLng.lat();
            document.getElementById("long").value = event.latLng.lng();
        });
    }
    google.maps.event.addDomListener(window, "load", initialize());