JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Getting Started with Google Maps  -->
<!-- blog.kevinchisholm.com  -->

<!-- load google maps api (adding an event listener) -->

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- a placeholder for the map -->
<div id="mapHolder"></div>

CSS

#mapHolder {
    height:900px;
    width:600px;
    margin:0 auto;
}

JavaScript

var successHandler = function(position)  {  
	var latitude = position.coords.latitude;
	var longitude = position.coords.longitude;	

	var	map = new google.maps.Map(document.getElementById("mapHolder"),{
		zoom: 17,
		center: new google.maps.LatLng(latitude, longitude),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	var marker = new google.maps.Marker({
		map: map,
		position: new google.maps.LatLng(
		latitude,
		longitude
		),
		title: ("Google Maps Marker for: " + latitude + ", " + longitude)
	});

	google.maps.event.addListener(marker, "click", function() {
		//create a new InfoWindow instance
		var infowindow = new google.maps.InfoWindow({  
		  content: 'You clicked the marker.<br >The map is zoomed-in,<br >and switched to the the<br ><b>"Satellite"</b> map type.'  
		}); 

		//show the info window
		infowindow.open(map, marker);
		//switch to SATELLITE view
		map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
		//zoom in
		map.setZoom(20);
		//make sure the map is centered on the user's location
		map.setCenter(marker.getPosition());
	});	
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successHandler);	
}