JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvAUvH_ANE1LP_FI5G10rx7AxutcK6V2I&amp;language=tr"></script>
<div id="map" data-zoom="14"></div>
<input type="text" id="contact_lat" value="38.391521"><br>
<input type="text" id="contact_lng" value="27.165835">

CSS

#map {width: 100%; height: 300px}
input {width: 100%}

JavaScript

let lat = $('#contact_lat').val();
let lng = $('#contact_lng').val();
let latlng = new google.maps.LatLng(lat,lng);
let map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: $('#map').data('zoom'),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
    position: latlng,
    map: map,
    draggable: true
});

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("contact_lat").value = this.getPosition().lat();
    document.getElementById("contact_lng").value = this.getPosition().lng();
});