jQuery Mobile и API Карт Google - Карта не загружается на устройство

Я создаю мобильное приложение, которое является программой для события. Я хочу связать страницу, отображающую местоположение события на картах Google, но не могу понять, как заставить ее работать.jQuery Mobile и API Карт Google - Карта не загружается на устройство

При обращении непосредственно к странице (или перезагрузке страницы) она загружается в браузере и на устройстве, но когда я перехожу на страницу через приложение, карта не появляется. Я уверен, что это имеет какое-то отношение к страницам, загружаемым через ajax.

Любая помощь будет высоко оценена.

Я попробовал несколько вещей, но вот мой текущий код:

<!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>

источник

2013-12-18 dtramacchi

место JS-код и google.js внутри 'data-role =" page "'. – Omar

Возможный дубликат [Как отобразить полноэкранную карту google с помощью jQuery Mobile?] (Http://stackoverflow.com/questions/10406252/how-can-i-display-a-full-screen-google-map- с-jquery-mobile) –

@ dr.molle это другая проблема. Карта не загружается вообще. – Omar

Вы пробовали использовать страницу создания события вместо этого события pageinit?

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

источник

2014-07-13 12:02:01 Tobi

jQuery Mobile и API Карт Google - Карта не загружается на устройство

ответ

Смежные вопросы