Карта Google не отображается? Плагин Cordova

Question

Я выполнил следующие инструкции по ссылке, чтобы проверить, что появляется карта. Поэтому я добрался до стадии 4, где должна отображаться карта, но я ничего не получаю. (http://www.christianengvall.se/phonegap-and-google-maps/)

Я добавил все ссылки на файлы JS и CSS, а также установил плагин google map.

Я изменил функцию ondeviceready, поскольку я уже использую эту функцию для другого кода, поэтому вместо инициализации карты следует нажать кнопку отправки. Причина этого заключается в том, что я сохраняю весь свой JavaScript вне HTML-страницы и в определенном JS-файле.

Так что в тот момент, когда я нажал кнопку, ничего не происходит. Может ли кто-нибудь увидеть, где я ошибаюсь?

HTML:

<div data-role="page" id="map" data-theme="d"> 
<div data-role="content"> 
    <input type="submit" value="View Map" onclick="return mapAPI()"> 
<div id="map_canvas"> 
</div> 
    </div> 

функция MAPAPI:

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

}

googlemap.js:

function GoogleMap(){ 
    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; 
} 

}

Answer 1

Attach прослушиватель событий вместо кнопки.

<input type="submit" id="viewMap" value="View Map"> 

<script> 
    google.maps.event.addDomListener(document.getElementById('viewMap'), 'click', mapAPI); 
</script> 

Answer 2

Привет Вы перенаправляете URL-адрес в разделе Head раздела index.html. Если нет, вот как вы это делаете.

<meta charset="utf-8" /> 

    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'"> 

Простой способ показать GoogleMaps на мобильный телефон с помощью Кордова

<script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(-33, 151), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map'), mapOptions); 
    } 



</script> 

Вы должны API KEY для Googlemaps работать, генерировать один и положить раздел ссылка головы

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