如何整合科爾多瓦應用程序中的Google地圖？

-1

我想包括在我的科爾多瓦項目中的谷歌地圖，所以我把這個網址<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>在我trajet.html。如何整合科爾多瓦應用程序中的Google地圖？

我trajet.html

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script> 

<div id="map_canvas"> 
</div> 
<script type="text/javascript" src="js/trajet.js"></script>

在我trajet.js

驗證碼：

function onDeviceReady(){ 
     var map = new GoogleMap(); 
     map.initialize(); 
    } 

$(document).ready(function(){ 


    this.initialize = function(){ 
    var map = showMap(); 
     } 

    var showMap = function(){ 
     var mapOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(-33, 151), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     return map; 
     } 


});

，但我沒有發現任何結果，地圖不顯示

請幫助我，有什麼問題

來源

2016-03-01 Rim Bejaoui

1）讓您的谷歌地圖API密鑰：

Google developer console

doc

注：即使你phongeap在Android & iOS版編譯，你必須創建一個 '瀏覽器按鈕'，並且不是Android或iOS鍵。

2）經典集成

從文檔，你要在這裏呼籲與API密鑰的腳本和一個回調函數（： 'initMap'）：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
    type="text/javascript"> 
</script>

從DOC：

<body> 
    <div id="map"></div> 
    <script> 
     var map; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
    async defer></script> 
    </body>

2）爲您的項目個

trajet.html

<div id="map_canvas"></div> 
<script type="text/javascript" src="js/trajet.js"></script>

trajet.js

function loadScript(callback){ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?key='+YOUR_KEY_HERE+'&callback=showMap'; 
    document.body.appendChild(script); 
    callback(); 
} 

function showMap(){ 
    var map; 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    } 
} 

function onDeviceReady(){ 
    loadScript(showMap); 
}

3）風格

不要忘記定義一個 '寬度' 和'高度'爲您的地圖，並最終，相對於良好的定位你的CSS（位置：相對或絕對）

#map_canvas{ 
    width: 100%; 
    height: 100%; 
}

讓我們知道是否有任何麻煩！

來源

2016-03-01 15:00:43 MadeInMoon

如何整合科爾多瓦應用程序中的Google地圖？

回答

相關問題