JSFiddle - React, Tailwind, and code Playground

by notarazi

HTML

<!-- Example 1c: Basic Google Map using jQuery ready() method to initialize/display the map
-->
<!-- From: http://opengeocode.org/tutorials/googlemap/googlemaps_1.php
-->
<!DOCTYPE html>
<html>
<head>
	<title>Basic Google Map Template</title>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>		<!-- Google Maps API -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	<!-- Google CDN for jQuery -->
	<script>
	var map;	// Google map object (global variable)
	
	// Initialize and display a Google map when the web page is loaded
	$(function() {  
		// Create a Google coordinate object for where to center the map
		var latlngDC = new google.maps.LatLng( 38.8951, -77.0367);	// Coordinates of Washington, DC (area centroid)
		
		// Map options for how to display the Google map
		var mapOptions = { zoom: 12, center: latlngDC  };
		
		// Show the Google map in the div with the attribute id 'map-canvas'.
		map = new google.maps.Map( document.getElementById('map-canvas'), mapOptions );
	});

	</script>
	<style>
	/* style settings for Google map */
	#map-canvas
	{
		width : 500px; 	/* map width */
		height: 500px;	/* map height */
	}
	</style>
</head>
<body>
<!-- Dislay Google map here -->
<div id='map-canvas' ></div>
</body>
</html>