I’ve seen a few threads referring to this popular plugin but I’ve not been able to get an app to successfully display a map - the best I get is a grey box with the Google logo at the bottom. I created a simple app using a ‘Hello World’ example but still no luck:
document.addEventListener("deviceready", function() {
var div = document.getElementById("map_canvas");
// Create a Google Maps native view under the map_canvas div.
var map = plugin.google.maps.Map.getMap(div);
// If you click the button, do something...
var button = document.getElementById("button");
button.addEventListener("click", function() {
// Move to the position with animation
map.animateCamera({
target: {lat: 37.422359, lng: -122.084344},
zoom: 17,
tilt: 60,
bearing: 140,
duration: 5000
});
// Add a maker
var marker = map.addMarker({
position: {lat: 37.422359, lng: -122.084344},
title: "Welecome to \n" +
"Cordova GoogleMaps plugin for iOS and Android",
snippet: "This plugin is awesome!",
animation: plugin.google.maps.Animation.BOUNCE
});
// Show the info window
marker.showInfoWindow();
});
}, false);
Using the remote debugger there are no errors - other than the below issue but that not sure it should have an impact as it seems to just relate to promise support.
DevTools failed to load SourceMap: Could not load content for file:///android_asset/www/plugins/cordova-plugin-googlemaps/www/promise-7.0.4.min.js.map: System error: net::ERR_FILE_NOT_FOUND
I also noticed the following - again not sure if it’s a red herring though:
<noscript __plugindomid="pgm1409028406325"><h1>JavaScript must be enabled!</h1></noscript>
Has anyone successfully used this plugin? Here’s my config.xml settings for the plugin:
<plugin name="cordova-plugin-googlemaps" source="npm" spec="2.6.0" >
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.1.1" />
</plugin>
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="[my Google key]" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="[my Google key] />