Cordova Google Maps Android Blank Map
Question
Ok, I know a lot of people have had this issue, but I've read every stackoverflow post and have generated regenerated every keystores and the whole 9 yards. Maybe I'm missing something small.
So first is first, I'm deploying my app in debug mode to my android device via .... cordova run --debug --device. This runs fine, installs my app and then brings up my app. This results in a blank google map. The key I use to sign my application is in ~/.android/debug.keystore with alias androiddebugkey and password android. Is it safe to assume that building in debug mode automatically signs and deploys using the debug.keystore?
I've copied the sha1 to my google apis account and enabled the api. I have the correct package name... com.phonegap.soloistapp. This app name is in the manifests. I've also copied my api key into my-app/plugins/plugin.google.maps/plugin.xml. Lastly I've granted access to all in my my-app/config.xml file. I am getting no errors in the console inspector for chrome. I have android 4.4 > and cordova 5.*. I am at my wits end. Here are the files I have:
my-app/platforms/android/AndroidManifest.xml
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.phonegap.soloistapp" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="@string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="" />
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
</application>
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
</manifest>
my-app/www/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
var map;
document.addEventListener("deviceready", function() {
var div = document.getElementById("map_canvas");
const GORYOKAKU_JAPAN = new plugin.google.maps.LatLng(41.796875,140.757007);
// Initialize the map view
map = plugin.google.maps.Map.getMap(div,
{'backgroundColor': 'white',
'mapType': plugin.google.maps.MapTypeId.HYBRID,
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
},
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true,
'zoom': true
},
'camera': {
'latLng': GORYOKAKU_JAPAN,
'tilt': 30,
'zoom': 15,
'bearing': 50
}});
// Wait until the map is ready status.
map.addEventListener(plugin.google.maps.event.MAP_READY,onMapReady);
map.addEventListener(plugin.google.maps.event.MAP_LOADED,onMapLoaded);
}, false);
function onMapReady() {
var button = document.getElementById("button");
button.addEventListener("click", onBtnClicked, false);
console.log("map is ready!!!");
}
function onMapLoaded() {
console.log("map is ready")
}
function onBtnClicked() {
map.showDialog();
}
</script>
</head>
<body>
<h3>PhoneGap-GoogleMaps-Plugin</h3>
<div style="width:100%;height:400px" id="map_canvas"></div>
<button id="button">Full Screen</button>
</body>
</html>
my-app/plugins/plugin.google.maps/plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="plugin.google.maps" version="1.3.4" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<name>phonegap-googlemaps-plugin</name>
<js-module name="phonegap-googlemaps-plugin" src="www/googlemaps-cdv-plugin.js">
<clobbers target="plugin.google.maps" />
</js-module>
<description>Google Maps native SDK for Android and iOS</description>
<repo>https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps/</repo>
<issue>https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps/issues</issue>
<license>Apache 2.0</license>
<keywords>google,maps,geo</keywords>
<engines>
<engine name="cordova" version=">=3.5.0" />
</engines>
<!-- android -->
<platform name="android">
<info>
In order to run this plugin, you need to obtain Google Maps API key for Android.
Visit to https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Installation
Please confirm what this version is updated at
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Release-Notes
</info>
<config-file target="res/xml/config.xml" parent="/*">
<feature name="GoogleMaps">
<param name="android-package" value="plugin.google.maps.GoogleMaps" />
</feature>
<feature name="External">
<param name="android-package" value="plugin.google.maps.External" />
</feature>
<feature name="Geocoder">
<param name="android-package" value="plugin.google.maps.MyGeocoder" />
</feature>
</config-file>
<framework src="com.google.android.gms:play-services-maps:+" />
<framework src="com.google.android.gms:play-services-location:+" />
<!-- plugin src files -->
<source-file src="src/android/plugin/google/maps/AsyncLicenseInfo.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/AsyncKmlParser.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/AsyncLoadImage.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/AsyncLoadImageInterface.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/GoogleMaps.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/MyPlugin.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/MyPluginLayout.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/MyPluginInterface.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginCircle.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/External.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/MyGeocoder.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginGroundOverlay.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginKmlOverlay.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginMap.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginMarker.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginPolygon.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginPolyline.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginTileOverlay.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginTileProvider.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginUtil.java" target-dir="src/plugin/google/maps" />
<source-file src="src/android/plugin/google/maps/PluginAsyncInterface.java" target-dir="src/plugin/google/maps" />
<config-file target="AndroidManifest.xml" parent="/manifest/application">
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="AIzaSyBksjVktjtfE9VXdXZD8Q3lBQ2JxirhmEY" />
<!-- Google Play Services SDK -->
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
</config-file>
<config-file target="AndroidManifest.xml" parent="/manifest">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
<!-- The following two permissions are not required to use
Google Maps Android API v2, but are recommended. -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<!-- OpenGL ES version 2 -->
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
</config-file>
</platform>
<!-- ios -->
<platform name="ios">
<preference name="API_KEY_FOR_IOS" />
<info>
In order to run this plugin, you need to obtain Google Maps API key for iOS.
Visit to https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Installation
Please confirm what this version is updated at
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Release-Notes
</info>
<config-file target="config.xml" parent="/*">
<feature name="GoogleMaps">
<param name="ios-package" value="GoogleMaps" />
</feature>
<feature name="External">
<param name="ios-package" value="External" />
</feature>
<feature name="Geocoder">
<param name="ios-package" value="Geocoder" />
</feature>
</config-file>
<header-file src="src/ios/GoogleMaps/Circle.h" />
<source-file src="src/ios/GoogleMaps/Circle.m" />
<header-file src="src/ios/GoogleMaps/External.h" />
<source-file src="src/ios/GoogleMaps/External.m" />
<header-file src="src/ios/GoogleMaps/Geocoder.h" />
<source-file src="src/ios/GoogleMaps/Geocoder.m" />
<header-file src="src/ios/GoogleMaps/GoogleMaps.h" />
<source-file src="src/ios/GoogleMaps/GoogleMaps.m" />
<header-file src="src/ios/GoogleMaps/GoogleMapsViewController.h" />
<source-file src="src/ios/GoogleMaps/GoogleMapsViewController.m" />
<header-file src="src/ios/GoogleMaps/GroundOverlay.h" />
<source-file src="src/ios/GoogleMaps/GroundOverlay.m" />
<header-file src="src/ios/GoogleMaps/KmlOverlay.h" />
<source-file src="src/ios/GoogleMaps/KmlOverlay.m" />
<header-file src="src/ios/GoogleMaps/Map.h" />
<source-file src="src/ios/GoogleMaps/Map.m" />
<header-file src="src/ios/GoogleMaps/Marker.h" />
<source-file src="src/ios/GoogleMaps/Marker.m" />
<header-file src="src/ios/GoogleMaps/MyPlgunProtocol.h" />
<header-file src="src/ios/GoogleMaps/PluginUtil.h" />
<source-file src="src/ios/GoogleMaps/PluginUtil.m" />
<header-file src="src/ios/GoogleMaps/Polygon.h" />
<source-file src="src/ios/GoogleMaps/Polygon.m" />
<header-file src="src/ios/GoogleMaps/Polyline.h" />
<source-file src="src/ios/GoogleMaps/Polyline.m" />
<header-file src="src/ios/GoogleMaps/TBXML.h" />
<source-file src="src/ios/GoogleMaps/TBXML.m" />
<header-file src="src/ios/GoogleMaps/TileOverlay.h" />
<source-file src="src/ios/GoogleMaps/TileOverlay.m" />
<header-file src="src/ios/GoogleMaps/NSData-Base64/NSData+Base64.h" />
<header-file src="src/ios/GoogleMaps/NSData-Base64/NSData+Base64.podspec" />
<source-file src="src/ios/GoogleMaps/NSData-Base64/NSData+Base64.m" />
<header-file src="src/ios/GoogleMaps/MyPluginLayer.h" />
<source-file src="src/ios/GoogleMaps/MyPluginLayer.m" />
<header-file src="src/ios/GoogleMaps/MyReachability.h" />
<source-file src="src/ios/GoogleMaps/MyReachability.m" />
<header-file src="src/ios/GoogleMaps/MyPluginLayerDebugView.h" />
<source-file src="src/ios/GoogleMaps/MyPluginLayerDebugView.m" />
<header-file src="src/ios/GoogleMaps/MyPluginScrollView.h" />
<source-file src="src/ios/GoogleMaps/MyPluginScrollView.m" />
<config-file target="*-Info.plist" parent="Google Maps API Key">
<string>$API_KEY_FOR_IOS</string>
</config-file>
<config-file target="*-Info.plist" parent="NSLocationWhenInUseUsageDescription">
<string>Show your location on the map</string>
</config-file>
<config-file target="*-Info.plist" parent="NSLocationAlwaysUsageDescription">
<string>Trace your location on the map</string>
</config-file>
<config-file target="*-Info.plist" parent="NSLocationAlwaysUsageDescription">
<string>Trace your location on the map</string>
</config-file>
<config-file target="*-Info.plist" parent="CFBundleURLTypes">
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>$PACKAGE_NAME</string>
<key>CFBundleURLSchemes</key>
<array>
<string>$PACKAGE_NAME</string>
</array>
</dict>
</array>
</config-file>
<dependency id="com.googlemaps.ios" url="https://github.com/nightstomp/cordova-plugin-googlemaps-sdk" commit="master" />
</platform>
</plugin>
my-app/config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.soloistapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Hello World</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="permissions" value="none" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="true" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-installLocation" value="auto" />
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
<gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />
<gap:plugin name="plugin.google.maps" source="plugins.cordova.io">
<param name="API_KEY_FOR_ANDROID" value="AIzaSyBksjVktjtfE9VXdXZD8Q3lBQ2JxirhmEY" />
</gap:plugin>
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<access origin="https://googleapis.com" subdomains="true"/>
<access origin="http://google.com" subdomains="true"/>
<access origin="http://gstatic.com" subdomains="true"/>
<access origin="https://google.com" subdomains="true"/>
<access origin="https://gstatic.com" subdomains="true"/>
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
1 answers
solution1
0 2015-11-05 05:13:34
I solved this issue by changing preference in my-app/config.xml:
<platform name="android">
<allow-intent href="market:*" />
<preference name="android-targetSdkVersion" value ="19" />
</platform>
By default I was building for 23. This is just something that some people might run into. Check those build versions when testing on devices!!!
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.
Related Question
android google maps with fragment display blank google map
Google Maps Android API v2 showing blank map
Xamarin Android Google Maps App map is blank and no error
Xamarin - Android Google maps displaying blank grids : Map is not loading
blank map on my google maps v2 for android titanium module
Google Maps is showing a blank map
Android google map blank
map drag event google maps android sdk cordova cordova-plugin-googlemaps
Blank Google Maps MapView in android
Google Maps on Android blank space
Related Tags