0

I'm building an mobile app which is a program for an event. I want to link to a page which displays the event location on google maps but can't figure out how to get it to work.

When you link directly to the page (or reload the page) it loads fine in browser and on device but when I go to the page through the app the map does't appear. I'm pretty sure it has something to do with the pages being loaded via ajax.

Any help would be much appreciated.

I've tried a few things but here is my current code:

<!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>
dtramacchi
  • 23
  • 1
  • 4
  • place JS code and google.js inside `data-role="page"`. – Omar Dec 18 '13 at 17:26
  • possible duplicate of [How can I display a full screen google map with jQuery Mobile?](http://stackoverflow.com/questions/10406252/how-can-i-display-a-full-screen-google-map-with-jquery-mobile) – Dr.Molle Dec 18 '13 at 17:39
  • @dr.molle this is a different issue. The map isn't loading at all. – Omar Dec 18 '13 at 20:30
  • It's the same issue, the map is loading, but you can't see the map, because the calculated height of #map-canvas is 0px – Dr.Molle Dec 18 '13 at 20:33
  • The page in OP is loaded via ajax. JQM ignores any tag outside `data-role=page`, hence js code isn't executed nor js library is loaded. When force refreshing it works. @Dr.Molle – Omar Dec 18 '13 at 21:11
  • Thanks @Omar but that didn't work. Any other ideas? – dtramacchi Dec 19 '13 at 00:07
  • Any errors? What have you tried and failed? – Omar Dec 19 '13 at 07:10

1 Answers1

0

Have you tried to use the page create event instead of the pageinit event? 

$(document).on("pagecreate", "#map", function() {
            initialize();
      });
Tobi
  • 23
  • 1
  • 5