JSFiddle - React, Tailwind, and code Playground

by Iftakharul Alam

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=true&amp;v=3"></script>
<div id="googleMap" style="width:500px;height:380px;"></div>
	<textarea name="" id="mapSearchInput" cols="30" rows="10"></textarea>

JavaScript

var myCenter=new google.maps.LatLng(23.795396,90.428466);
		function initialize() {
			var mapProp = {
				center:myCenter,
				zoom:8,
				panControl:true,
				zoomControl:true,
				mapTypeControl:true,
				scaleControl:false,
				streetViewControl:true,
				overviewMapControl:true,
				rotateControl:true,    
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

			var marker = new google.maps.Marker(
			{
				map:map,
				draggable:true,
				animation: google.maps.Animation.DROP,
				position: myCenter
			});
			google.maps.event.addListener(marker, 'dragend', function() 
			{
				geocodePosition(marker.getPosition());
			});
			google.maps.event.addListener(map, 'dblclick', function(e) {
				var positionDoubleclick = e.latLng;
				marker.setPosition(positionDoubleclick);
				geocodePosition(marker.getPosition());
		        // if you don't do this, the map will zoom in
		        e.stopPropagation();
		    });

			function geocodePosition(pos) 
			{
				geocoder = new google.maps.Geocoder();
				geocoder.geocode({latLng: pos}, 
					function(results, status) 
					{
						if (status == google.maps.GeocoderStatus.OK) 
						{
							$("#mapSearchInput").val(pos);
						} 
					});
			}
		}
		google.maps.event.addDomListener(window, 'load', initialize);