JSFiddle - React, Tailwind, and code Playground

HTML

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

<!-- load google maps api (adding a marker) -->

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

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

CSS

#mapHolder {
    height:500px;
    width:500px;
    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)
	});
}

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