2014-07-24 37 views
1

我剛開始使用棘輪,它很棒。 我正在開發一個使用push.js進行頁面之間轉換的Ratchet 2.0.2的Phonegap應用程序。 但我canot運行外部JavaScript的。 我選了this通過棘輪加載外部地圖腳本v2.0.2

但我無法加載googlemap javascript v3。

我的HTML頁面

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>Movie finder</title> 
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> 
      <meta name="apple-mobile-web-app-capable" content="yes"> 
      <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

      <link rel="stylesheet" href="css/ratchet.min.css"> 
     </head> 
     <body> 
      <header class="bar bar-nav"> 
       <a class="btn btn-link btn-nav pull-left" href="interests.html" data-transition="slide-out"> 
        <span class="icon icon-left-nav"></span> 
        Back 
       </a> 
       <h1 class="title">Map</h1> 
      </header> 
    <style> 
      #map-canvas { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
      } 
     </style> 
      <div class="content"> 
       <button class="btn" onClick="initialize();">click</button> 
       <div id="map-canvas"></div> 
      </div> 
     </body> 
     <script src="js/ratchet.min.js"></script>  
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
     <script> 
      function initialize() { 
       var map; 
       var mapOptions = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34.397, 150.644) 
       }; 
       map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
      } 
      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
    </html> 

請幫我加載谷歌地圖在棘輪

回答

1

你的地圖是地圖中的容器,當文檔加載和您的地圖初始化是0像素高。給它一個高度,並檢查出你的地圖。

.content {height: 100%} 

不需要初始化按鈕。初始化負載就足夠了。

google.maps.event.addDomListener(window, 'load', initialize); 

http://jsfiddle.net/a910o99w/

+0

代碼工作的主頁上。我想在我的聯繫人頁面訪問這張地圖。但可悲的是,它不工作。 – Dino

+0

我相信它的東西很小。確保你在聯繫頁面上加載谷歌地圖js文件,並檢查控制檯日誌是否有錯誤。 – kindasimple

+0

棘輪使用PUSH功能。它防止外部腳本。我使用'data-ignore =「push」'來防止這種情況。但這不是一個更好的方法。我必須找到另一種方法來實現這一點。因爲當使用數據忽略時,其過渡效果消失了。 – Dino