JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<button onclick="zoomIn();">Zoom In</button>
<button onclick="zoomOut();">Zoom Out</button>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    width: 100%;
    height: 100%;
}

JavaScript

var map;
var zoom;
var useragent = navigator.userAgent;

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
    });
    zoom = map.getZoom();
    console.log(zoom);

    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
        google.maps.event.addListener(map, 'zoom_changed', function () {
            if (map.getZoom() > zoom) {
                alert("ZOOMED IN from Level " + zoom);
            } else if (map.getZoom() < zoom) {
                alert("ZOOMED OUT from Level " + zoom);
            }
            zoom = map.getZoom();
        });
    }
}

function zoomIn() {
    map.setZoom(zoom + 2);
    zoom = map.getZoom();
    alert(zoom);
}

function zoomOut() {
    map.setZoom(zoom - 2);
    zoom = map.getZoom();
    alert(zoom);
}

google.maps.event.addDomListener(window, 'load', initializeMap);