JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<div id="home" data-role="page" data-title="Home">
    <div data-role="header" data-position="fixed" data-id="vs_header">
        <h1>Home</h1>
        <a href="#maps" data-icon="info">maps</a> 
    </div>
    <div data-role="content" id="index-page">
        <div>
            <p>dsfgsjdg dskfjgskdfsdbf</p>
        </div>
    </div>
</div>

<!-- Page: maps -->
<div id="maps" data-role="page" data-title="Fleet">
    <div data-role="header" data-position="fixed" data-id="vs_header" data-dom-cache="false">
        <h1>Fleet</h1>
        <a href="#home" data-icon="info" data-iconpos="notext">Home</a>
    </div>
    <!-- header -->
    <div data-role="content" id="map" style="width:100%; height:100%; padding:0; max-height:1600px;">
        <div id="googlemaps1" class="map_canvas"></div>
    </div>
</div>

CSS

.map_canvas{
                padding-top:0px;
                padding-bottom:-1px;
                padding-left:0px;

                height:auto;
                position:absolute;
                width:100%;
                height:95%;
                max-height:1600px;
                max-width:1600px;
                overflow:hidden;
                display:block;
            }

JavaScript

var map, geocoder, initCenter;
function initialize() {
    geocoder = new google.maps.Geocoder();
    initCenter = new google.maps.LatLng(37, -97);
    var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
        myOptions = {
            zoom:10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: mapCenter
        },
        map = new google.maps.Map(document.getElementById("googlemaps1"), myOptions);
}

$(document).on("pageshow", "#maps", function() {
    if ($("#googlemaps1").html() === '') {
        initialize();
    }
});