JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<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"> <a href="#map" class="ui-btn showMap">Map</a>

</div>
<div id="map" data-role="page" data-theme="a">
    <div data-role="header">
        	<h1>Map</h1>
 <a href="#main" class="logo ui-btn-left">Back</a>
	<a href="#info" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b"></a>

    </div>
    <div role="main" class="ui-content"></div>
</div>
<div id="mapPH" class="hidden">
    <div id="map-canvas"></div>
</div>

CSS

.hidden {
    position: absolute;
    top:-999;
    z-index: -9999;
}
.ui-content {
    padding: 0;
}

JavaScript

function canvasHeight(canvas) {
    var canvasPage = $(canvas).closest("[data-role=page]").length !== 0 ? $(canvas).closest("[data-role=page]") : $(".ui-page").first(),
        screen = $.mobile.getScreenHeight(),
        header = $(".ui-header", canvasPage).hasClass("ui-header-fixed") ? $(".ui-header", canvasPage).outerHeight() - 1 : $(".ui-header", canvasPage).outerHeight(),
        footer = $(".ui-footer", canvasPage).hasClass("ui-footer-fixed") ? $(".ui-footer", canvasPage).outerHeight() - 1 : $(".ui-footer", canvasPage).outerHeight(),
        newHeight = screen - header - footer;
    $(canvas).height(newHeight);
    $(canvas).width($(window).width());
}

function loadMap(canvas) {
    var mapOptions = {
        center: new google.maps.LatLng(36.4875, -4.9525),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_BOTTOM
        }
    };
    var map = new google.maps.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.addListener(map, 'tilesloaded', function () {
        $("#map .ui-content").append($("#mapPH #map-canvas"));
        $("#mapPH").remove();
    });
}
$(document).one("pagecontainershow", function () {
    canvasHeight("#map-canvas");
    loadMap("#map-canvas");
    $(".showMap").one("click", function () {
        $("#map .ui-content").append($("#mapPH #map-canvas"));
        setTimeout(function () {
            canvasHeight("#map-canvas");
        }, 500);
        $("#mapPH").remove();
    });
});

$(window).on("throttledresize orientationchange", function () {
    canvasHeight("#map-canvas");
});