JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?&amp;sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>	
<div id="map_canvas">
</div>

CSS

#map_canvas{height:450px;width:870px;margin:0 auto;border: 1px solid red;}

JavaScript

function showAddress() {
			var map,marker,infoWindow, geocoder;
			var markerPoint = new google.maps.LatLng(12.397,78.644);
			var mapOptions = {
				center: new google.maps.LatLng(12.397,73.644),
				zoom:5,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);
			google.maps.event.addListener(map,'click',function(e) {
				getAddress(e.latLng);
			});
			
		
		function getAddress(latLng) { 
			
			if(!geocoder) {
				geocoder = new google.maps.Geocoder();
			}
			var geocoderRequest = {
				latLng:latLng
			}
			geocoder.geocode(geocoderRequest, function(results, status) {
				if(!infoWindow) {
					infoWindow = new google.maps.InfoWindow();
				}
				infoWindow.setPosition(latLng);
				var content = "<h2>Position :" +latLng.toUrlValue()+ "</h2>"
				if(status == google.maps.GeocoderStatus.OK) {
					for(var i =0;i <results.length; i++) {
						if(results[0].formatted_address) { 
							content += i + ". " +results[i].formatted_address + "<br />";
							
						}
					}
					
				}
				else {
					content += "<p>Either you clicked on Ocean or a Politically disputed Area. Status = " + status + "</p>"
				}
				infoWindow.setContent(content);
				infoWindow.open(map)
			});
		}
		}

$(function() {
showAddress();
})