jQM - Gmap Demo

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
<script src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.services.js"></script>
<script src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<!DOCTYPE html>
<title>jQM Complex Demo</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<body>
    
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
             <h3>
               Home Page
            </h3>
        </div>
        <div data-role="content">	
            <a data-role="button" href="#map_page">Display map</a>
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
             <h3>
                Home Page
             </h3>
        </div>
    </div>
    
    <div data-role="page" id="map_page">
        <div data-theme="a" data-role="header">
             <h3>
               Map Page
            </h3>
        </div>
        <div data-role="content" id="content">
            <div id="map_canvas" style="height:100%"></div>
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
             <h3>
                Map Page
            </h3>
        </div>
    </div>
</body>

CSS

#content {
    padding: 0;
    position : absolute !important;
    top : 40px !important;
    right : 0;
    bottom : 40px !important;
    left : 0 !important;
}

JavaScript

$(document).on('pageinit', '#map_page', function (e, data) {
    // This is the minimum zoom level that we'll allow
    var minZoomLevel = 12;

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: minZoomLevel,
        center: new google.maps.LatLng(38.50, -90.50),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    /* // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });  */

});