JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map_canvas"></div>
CSS
html, body, #map_canvas {
width: 100%;
height: 100%;
}
JavaScript
var map;
function initializeMap() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 14,
center: new google.maps.LatLng(42.35210605281608, -83.12983274459839),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'zoom_changed', function () {
map.setZoom(map.getZoom() + 2);
});
}
google.maps.event.addDomListener(window, 'load', initializeMap);