JSFiddle - React, Tailwind, and code Playground

by Beardy

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6UOeoHoyxbCrMZw7uVIQPm7pYdhC6cV0&amp;sensor=false&amp;extension=.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6UOeoHoyxbCrMZw7uVIQPm7pYdhC6cV0&sensor=false"></script>

<button class="btn preview">Preview</button>
<div class="block space" id="map"></div>

CSS

#map{
	min-height:440px;
}
.block{
	background:#fff;
	padding:3%;
	width:94%;
	margin:0 0 20px;
    position:relative;
    float:left;
}

JavaScript

var map;
google.maps.event.addDomListener(window, 'load', init);
function init() {
	var mapOptions = {
		zoom: 2,
		center: new google.maps.LatLng(40.697299 , -73.809815),
	};
	var mapElement = document.getElementById('map');
	var map = new google.maps.Map(mapElement, mapOptions);
}


	$(document).ready(function(e) {
		$('.mapcentre').click(function(){	
			map.setZoom(12);
		});
	});