Google地圖和Jquery Mobile不能一起工作

這是我第一次使用jQuery和Google地圖。因此，我真的複製和粘貼谷歌地圖hello世界頁面，幷包括jQuery Mobile，我只是得到一個空的頁面，說「加載」。我不知道爲什麼？Google地圖和Jquery Mobile不能一起工作

HTML和JS：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link rel="stylesheet" type="text/css" href="css/mystyles.css"> 
    <link rel="stylesheet" href="css/jquery.mobile.css"/> 
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/> 

    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=[key]&sensor=true"> 
    </script> 

    <script type="text/javascript" src="js/myscript.js"></script> 
    <script type="text/javascript" src="js/cordova-2.3.0.js"></script> 

    <script type="text/javascript"> 
      function initialize() 
      { 
      var mapOptions = { 
       center: new google.maps.LatLng(-34.397, 150.644), 
       zoom: 8 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), 
       mapOptions); 
      } 
    </script> 


    </head> 
    <body onload="initialize()"> 
     <div id="map-canvas"></div> 
    </body> 
</html>

凡說MYAPIKEY我把我的鑰匙在那裏。我不知道這些如何分崩離析？

UPDATE

改變的代碼到上方。當我刪除了鏈接到我的jQuery Mobile的文件都加載罰款...

來源

2014-01-14 user481610

給帆布固定的高度 – alkis

檢查this working demo

google.maps.event.addDomListener（window，'load'，initialize）;這不是必需的。在這裏，您在窗口加載事件上添加一個偵聽器，並告訴它調用initialize。你不提供任何初始化函數。無論如何，您已經擁有使用jqm的事件監聽器（pageinit或pageshow）。
您沒有爲您的容器提供高度。雖然你的容器將有它的父容器的寬度，但它不會有任何高度。所以即使地圖加載正確，它也不會出現。
在包含它們之前，您嘗試使用jquery和jquery mobile。你首先包含然後使用。

來源

2014-01-14 19:07:30 alkis

我會建議使用pageshow事件，而不是pageinit，因爲後者是在頁面生命週期爲時尚早

$(document).on('pageshow', ...);

也要避免在地圖畫布使用自關閉標籤

<div id="map-canvas"></div>

來源

2014-01-14 18:47:48 Carlos487

Google地圖和Jquery Mobile不能一起工作

回答

相關問題