JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<div id="wrapper">
    Thinline Google zoom experiment
    <a href="#" class="btn">Zoom in</a>
</div>
<div id="map_canvas"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
    font-family: Helvetica, Arial, sans-serif;
    position: absolute;
    z-index: 999;
    background: #000;
    color: #FFF;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
}
a.btn {
    background: #28aae1;
    color: #FFF;
    text-decoration: none;
    height: 100%;
    display: inline-block;
    padding: 0 10px;
    margin-left: 20px;
}
a.btn:hover {
    background: #888;
}
#map_canvas {
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

JavaScript

var zoomedIn = false;

function initialize() {
    var stylez = [
      {
        featureType: "all",
        stylers: [
          { hue: "#0000ff" },
          { saturation: -75 }
        ]
      },
      {
        featureType: "poi",
        elementType: "label",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var latlng = new google.maps.LatLng(51.05246, 3.73577), // Thinline office
    
        mapOptions = {
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Edited"] 
            },
            zoom: 10,
            center: latlng
        },
        
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),
        
        styledMapType = new google.maps.StyledMapType(stylez, {name: "Edited"}),
        
        marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            animation: google.maps.Animation.DROP,
            title:"Hello World!"
        }),
        
        infowindow = null;
        
        map.mapTypes.set("Edited", styledMapType);
        map.setMapTypeId('Edited');
    
    function toggleBounce () {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
    
    function smoothZoom (map, level, cnt, mode) {
		//alert('Count: ' + cnt + 'and Max: ' + level);

		// If mode is zoom in
		if(mode == true) {

			if (cnt >= level) {
				return;
			}
			else {
				var z = google.maps.event.addListener(map, 'zoom_changed', function(event){
					google.maps.event.removeListener(z);
					smoothZoom(map, level, cnt + 1, true);
				});
				setTimeout(function(){map.setZoom(cnt)}, 80);
			}
		} else {
			if (cnt <= level) {
				return;
			}
			else {
				var z = google.maps.event.addListener(map, 'zoom_changed', function(event)...