Preload Google Maps - jQuery Mobile

by Alex Azuero

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">
    <div role="main" class="ui-content" style="padding: 1em;"><a href="#map" class="ui-btn ui-btn-icon-left ui-icon-check showMap">Map</a>
    </div>
</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-rel="popup" class="ui-btn ui-btn-icon-notext ui-icon-info ui-btn-b ui-corner-all"></a>

    </div>
    <div role="main" class="ui-content"></div>
    <div data-role="popup" id="info">
        <p>Made by <a href="http://stackoverflow.com/users/1771795/omar" rel="external">Omar</a>

        </p>
    </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;
}
.forMap {
    position: absolute;
    top:0;
    right:0;
}

JavaScript

var mapData = {};

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
        }
    };
    mapData.map = new google.maps.Map($(canvas)[0],
    mapOptions);
    mapData.marker = new google.maps.Marker({
        position: new google.maps.LatLng(36.4875, -4.9525),
        map: mapData.map,
        title: 'Hello World!'
    });
    google.maps.event.addListenerOnce(mapData.map, 'idle', function (e) {
        console.log("idle");
        $("#map .ui-content").append($("#mapPH #map-canvas").append($("<a/>", {
            class: "ui-btn ui-mini ui-btn-inline ui-btn-b ui-corner-all forMap"
        }).text("Hello").on("click", function () {
            alert("Hello!");
        }) /**/ ));
        $("#mapPH").remove();
    });

    google.maps.event.addListener(mapData.map, 'dragstart', function (e) {
        $(".forMap").animate({
            "opacity": 0.3
        }, 300);
    });

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

   ...