2015-11-13 2 views
1

Я использую сайт сборки Adobe phonegap и пытаюсь создать очень простой одностраничный html для использования API Карт Google, к сожалению, который не работает. Он генерирует только пустую белую страницу.Google Maps API не работает с PhoneGap - создает пустую страницу

Мой индекс HTML ...

<!DOCTYPE html> 
    <html style="height:100%"> 
    <head> 
    <script src="lib/maps.js"></script>//I have copied the Google maps JS locally 
    </script> 

    <script> 
     function initialize() { 
      alert("Initialize called..."); 
      var mapProp = { 
      center:new google.maps.LatLng(51.508742,-0.120850), 
      zoom:5, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 
     alert("Map props loaded..."); 
     var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 
     alert("The div innerHTML"+document.getElementById("googleMap").innerHTML); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 

<body style="height: 100%; margin: 0; padding: 0"> 
    <div id="googleMap" style="height:200px;position:relative;"></div> 
</body> 
</html> 

Мой PhoneGap config.xml ...

<?xml version="1.0" encoding="UTF-8"?> 
<widget xmlns  = "http://www.w3.org/ns/widgets" 
    xmlns:gap = "http://phonegap.com/ns/1.0" 
    id   = "org.aninda.areyouclose" 
    versionCode = "10" 
    version  = "1.1.0"> 

<name>Test App</name> 

<description> 
    Test 
</description> 

<author href="http://www.aninda-bhattacharyya.com" email="[email protected]"> 
    Aninda Bhattacharyya 
</author> 

<feature name="http://api.phonegap.com/1.0/camera"/> 
<feature name="http://api.phonegap.com/1.0/contacts"/> 
<feature name="http://api.phonegap.com/1.0/file"/> 
<feature name="http://api.phonegap.com/1.0/geolocation"/> 
<feature name="http://api.phonegap.com/1.0/media"/> 
<feature name="http://api.phonegap.com/1.0/network"/> 
<feature name="http://api.phonegap.com/1.0/notification"/> 

<icon src="icon.png" /> 
<icon src="icon.png" gap:platform="android" density="ldpi" /> 
<icon src="icon.png" gap:platform="android" density="mdpi" /> 
<icon src="icon.png" gap:platform="android" density="hdpi" /> 
<icon src="icon.png" gap:platform="android" density="xhdpi" /> 

<access origin="googleapis.com" subdomains="true"/> 

</widget> 

Я стучал головой более 8 часов в настоящее время. Пожалуйста помоги!

+0

Вы пробовали эмулятор PhoneGap? Вероятно, было бы легче получить какие-либо сообщения об ошибках, используя это. Не уверен, что это хорошо работает с сайтом Adobe. – Seano666

+0

Это моя следующая цель и спасибо за указатель @ Seano666. Попытка выяснить сначала с экспертами, если я упустил что-то очевидное. –

+0

Вы назначаете высоту во всех местах, но никогда не ширины? Это может быть проблема? –

ответ

1

Мысль о том, чтобы ответить на мой вопрос, выяснив, в чем проблема. Пропущен, чтобы включить плагин whitelist cordova в config.xml. Добавлена ​​следующая строка и voila ...

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" /> 
Смежные вопросы