Untitled

<!doctype html>
<html class="">
<head>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/jquery.mobile-1.3.2.min.js"></script>

    <link href="css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet">

    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>
        $(document).on("pageinit", "#map", function() {
                initialize();
          });

      var map;
        function initialize() {
          var mapOptions = {
            zoom: 17,
            center: new google.maps.LatLng(-27.617745,153.086779),
            mapTypeControl: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.SATELLITE
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }
    </script>
</head>
<body>


<div data-role="page" id="map">
  <div id="header" data-role="header">
    <a href="#" data-rel="back" >< Back</a>
  </div>
  <div data-role="content">
    <div id="map-content">
      <div id="map-canvas"></div>
    </div>
  </div>
</div>


</body>
</html>

$(document).on("pagecreate", "#map", function() {
            initialize();
      });