JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<script src="http://maps.googleapis.com/maps/api/js?key=&amp;sensor=false"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" data-theme="a" id="main">
    <div data-role="header">
        	<h1>Home</h1>

    </div> <a href="#map" data-role="button" data-theme="d" data-corners="false" data-inline="true">Show Map</a>

</div>
<div id="map" data-role="page" data-theme="a">
    <div data-role="content">
        <div id="map-canvas"></div>
    </div>
</div>

CSS

#map-canvas {
    width: 100%;
    height: 100%;
}
.ui-content {
    padding: 0;
}
.forMap {
    position: absolute;
    top:0;
    left:0;
}

JavaScript

$(document).one("pageshow", "#map", function () {
    $(".ui-content", this).css({
        height: $(window).height(),
        width: $(window).width()
    });
    var mapOptions = {
        center: new google.maps.LatLng(36.4875, -4.9525),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
    };
    var map = new google.maps.Map($("#map-canvas")[0],
    mapOptions);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(36.4875, -4.9525),
        map: map,
        title: 'Hello World!'
    });
    google.maps.event.addListenerOnce(map, 'idle', function (e) {
        $("#map-canvas").append($("<a href='#' data-role='button' data-rel='back' class='forMap'>Back</a>").hide().fadeIn(700));
        $(".forMap").buttonMarkup({
            mini: true,
            inline: true,
            theme: "e",
            iconpos: "notext",
            icon:"home"
        });
    });
    google.maps.event.addListener(map, 'dragstart', function (e) {
        $(".forMap").animate({
            "opacity": 0.3
        }, 300);
    });

    google.maps.event.addListener(map, 'dragend', function (e) {
        $(".forMap").animate({
            "opacity": 1
        }, 700);
    });
});