Google Maps doesn't show up in Phonegap Build
Question
I am just about two month in phonegap leason. I have been testing the app in the google ripple emulator, and everything is working great with the google map.
However, when I upload this project into phonegap build, and install it into my Android Device, the google map doesn't show up.
Here is my index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link href="css/all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
window._cordovaNative = true;
</script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
//navigator.geolocation.getCurrentPosition(onSuccess, onError);
var map = new GoogleMaped();
map.initialize();
}
function GoogleMaped()
{
this.initialize = function(){
var map = showMap();
}
var showMap = function(){
var mapOptions =
{
zoom: 4,
center: new google.maps.LatLng(55.689403, 12.521281),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}
}
$(document).ready(function(){
alert("hi al");
});
</script>
</head>
<body>
<div id="phonegapWrapper" style="">
<div id="map_canvas">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
And here is my 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 = "com.empatix.app"
versionCode = "10"
version = "1.0.0" >
<plugin name="cordova-plugin-whitelist" />
<plugin name="com.indigoway.cordova.whitelist.whitelistplugin" spec="1.1.1" source="pgb" />
<!-- versionCode is optional and Android only -->
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/notification"/>
<access origin="*"/>
<access origin="http://google.com" />
<access origin="https://google.com" />
<access origin="http://maps.google.com" />
<access origin="http://maps.google.com/*" />
<access origin="http://*.google.com" />
<access origin="http://dev.hospitalku.com/*" />
<access origin="http://code.jquery.com/*" />
<access origin="https://maxcdn.bootstrapcdn.com/*" />
<access origin="https://maxcdn.bootstrapcdn.com/*" />
<access origin="*" />
<access origin="*.google.com"/>
<access origin="*.googleapis.com"/>
<access origin="*.gstatic.com"/>
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-intent href="geo:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="*" />
<name>Empatix App</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://dev.hospital.com" email="al_kasih@outlook.com">
Hardeep Shoker
</author>
<access origin="http://phonegap.com" subdomains="true" />
</widget>
The only console message I got in the phonegap debug service is:
No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
Can anybody help me out with this, please?
Many thanks in advance.
4 answers
solution1
0 2016-01-27 18:39:23
You have to add this line in your index.html (head section):
<meta http-equiv="Content-Security-Policy" content="default-src ...">
For detailed explanation check this docs:
https://github.com/apache/cordova-plugin-whitelist#content-security-policy
A post here on SO: "No Content-Security-Policy meta tag found." error in my phonegap application
solution2
0 2016-02-26 05:35:19
I made an Android application which uses this Cordova plugin for Google Maps . It's another sort of solution alternative, but it worked for me, so, you can try it out. I prefer to this approach because the plugin uses native code, theferore, the performance will be nicer and faster. Moreover, It has an excellent documentation; Cordova and Phonegap is the same pretty much . If you use the plugin, you will avoid adding those entries on config.xml with accesses tag as to GMaps, it will be cleaner.
Installation
phonegap plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="ANDROID_API_KEY" --variable API_KEY_FOR_IOS="IOS_API_KEY"
If you have doubts with Phonegap CLI, read this link .
Setting
Html:
<div id="map" style="width:100%;height:100%"></div>
Javascript:
var map = plugin.google.maps.Map.getMap(document.getElementById("map"));
map.one(plugin.google.maps.event.MAP_READY, function () {
var DEFAULT_MAP_TYPE = plugin.google.maps.MapTypeId.HYBRID
map.setMapTypeId(DEFAULT_MAP_TYPE);
});
Important : You must sign the application prior to run it, the SHA1 hash must match with the registered one in Google Maps API for Android. However, if you use iOS, this is not required.
solution3
0 2016-02-27 11:14:55
You should add the deviceready listener after the document is ready:
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, true);
});
function onDeviceReady() {
alert ('123');
}
solution4
0 2016-03-31 10:44:45
Try adding whitelisting the url by adding this inside the head section
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ https://maps.google.com/maps/api/js 'unsafe-inline' 'unsafe-eval'">
find this index.html for implementing the same functionality
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<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'">
<style>
body, html, #map { margin: 0;width:100%;height:400px }
#map {
position: relative;
width:400px;
height: :50%;
}
#map:after {
width: 22px;
height: 40px;
display: block;
content: ' ';
position: absolute;
top: 50%; left: 50%;
margin: -40px 0 0 -11px;
background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(55.689403, 12.521281),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.