JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

<h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhuIbFbrzWD268pGdDNN4hEuYDUwv3gvs&callback=initMap">
    </script>

CSS

#map {
  height: 400px;
  width: 100%;
}

JavaScript

function initMap() {
	var uluru = {lat: -25.363, lng: 131.044};
	var geocoder = new google.maps.Geocoder();
	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 4,
		center: uluru
	});

	var marker = new google.maps.Marker({
		position: uluru,
		map: map
	});
	
	google.maps.event.addListener(map, 'click', function(event) {
		marker.setPosition(event.latLng);
		geocoder.geocode(
			{
				location: event.latLng,
				result_type: 'street_address'
			},
			function(results, status) {
				if (status === 'OK') {
					console.log(results);
				}
			}
		);
	});
}