<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=&?sensor=false"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
      <h1>Header</h1>
    </div>
    <div role="main" class="ui-content">
      <a href="#map" class="ui-btn">Show Map</a>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
      <h1>Footer</h1>
    </div>
  </div>
  <div data-role="page" id="map">
    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-add-back-btn="true">
      <h1>Header</h1>
    </div>
    <div role="main" class="ui-content">
      <div id="map_canvas">
      </div>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
      <h1>Footer</h1>
    </div>
  </div>
</body>

</html>

function loadMap(page) {
  var canvas = $("#map_canvas", page)[0],
    mapOptions = {
      center: new google.maps.LatLng(-53.1525247, -70.9101868),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.HYBRID,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
      }
    };
  map = new google.maps.Map(canvas, mapOptions);
}


$(document).on("pagecontainershow", function(e, data) {
  if (data.toPage[0].id == "map") {
    loadMap(data.toPage);
  }
});
#map .ui-content #map_canvas {
  height: 400px;
  width: 100%;
  margin: auto;
}