JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<button id="zoomOut">-</button>
<button id="zoomIn">+</button>
<button class="tilt" rel="0">Tilt 0</button>
<button class="tilt" rel="45">Tilt 45</button>

<select id="mapType">
    <option value="ROADMAP">ROADMAP</option>    
    <option value="SATELLITE">SATELLITE</option>  
    <option value="HYBRID">HYBRID</option>  
    <option value="TERRAIN">TERRAIN</option>  
</select>

<p id="txtZoom"></p>
<p id="txtMapType"></p>
<p id="txtPosition"></p>

<div id="mapWrapper">
    <div  id="map"></div>
</div>

CSS

#mapWrapper {
    display:block;
    clear:both;
}
#map {
    width:600px;
    height:480px;
}
button {
    font-size:30px;
}
button.tilt {
    display:none;
}
button.tilt.active {
    display:inline-block;
}
}

JavaScript

var options = {
    //center: new google.maps.LatLng(52.3730442, 4.8932450),
    center: new google.maps.LatLng(37.339085, -121.8914807),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 20
}
var map;

/*
MapTypeId.ROADMAP displays the default road map view. This is the default map type.
MapTypeId.SATELLITE displays Google Earth satellite images
MapTypeId.HYBRID displays a mixture of normal and satellite views
MapTypeId.TERRAIN displays a physical map based on terrain information.
*/

$(document).ready(function()
{
    loadMap();
    
    $('#zoomOut').click(function(){
        options.zoom -= 1;
        loadMap();
    });
    $('#zoomIn').click(function(){
        options.zoom += 1;
        loadMap();
    });
    $('#mapType').change(function(){
        
        switch($(this).val()) {
            case 'SATELLITE':
            {
                $('button.tilt').addClass('active');
                options.mapTypeId = google.maps.MapTypeId.SATELLITE;
                break;
            }
            case 'HYBRID':
            {
                $('button.tilt').addClass('active');
                options.mapTypeId = google.maps.MapTypeId.HYBRID;
                break;
            }
            case 'TERRAIN':
            {
                $('button.tilt').removeClass('active');
                options.mapTypeId = google.maps.MapTypeId.TERRAIN;
                break;
            }
            default: {
                $('button.tilt').removeClass('active');
                options.mapTypeId = google.maps.MapTypeId.ROADMAP;
            }
        }
        
        loadMap();
    });
    
    $('.tilt').click(function(){
        if(typeof map != 'undefined') {
            var angle = parseInt($(this).attr('rel'));
            map.setTilt(angle);
        }
    });
});

function loadMap()
{
    $('#txtZoom').html('Zoom: ' + options.zoom);
    $('#txtMapType').html('MapType: ' + options.mapTypeId);
    
    map = new google.maps.Map(document.getElementById('map'),...