JSFiddle - React, Tailwind, and code Playground

by PhillipSenn

HTML

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

CSS

#map-canvas {
	height: 600px
}

JavaScript

(function() {
	var Variables = {}
	
	google.maps.event.addDomListener(window, 'load', initialize);
	function initialize() {
		navigator.geolocation.getCurrentPosition(centerTheMap);
	}
	function centerTheMap(arg) {
		var mapOptions = {
			center: new google.maps.LatLng(arg.coords.latitude, arg.coords.longitude)
			,zoom: 18
		};
		Variables.myMap = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
		navigator.geolocation.watchPosition(showWatchPosition);
	}
	function showWatchPosition(arg) {
		var myLatlng = new google.maps.LatLng(arg.coords.latitude, arg.coords.longitude);
		new google.maps.Marker({
			 position: myLatlng,
			 map: Variables.myMap,
			 title:"Hello World!"
		});

	}
	
		
})()