Hi!
I’m trying to develop an app that uses cordova-plugin-googlemaps to access Google Maps but in the browser preview I always get the error “Cannot read property ‘google’ of undefined”.
Here’s the JS:
document.addEventListener("deviceready", function() {
console.log("This is never called in browser");
});
document.addEventListener("init", function (event) {
if (event.target.id=='home') {
var mapDiv = document.getElementById("map");
// Next lines = error "Cannot read property 'google' of undefined"
window.plugin.google.maps.environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': '<KEY>',
'API_KEY_FOR_BROWSER_DEBUG': ''
});
var map = window.plugin.google.maps.Map.getMap(mapDiv);
}
});
The HTML:
<ons-navigator swipeable id="myNavigator" page="home.html"></ons-navigator>
<ons-template id="home.html">
<ons-page id="home">
<ons-toolbar>
<div class="center" class="white">Map App</div>
</ons-toolbar>
<p>Hi, Onsen with Google Maps!</p>
<div id="map" style="width:100%;height:500px"></div>
</ons-page>
</ons-template>
Since deviceready() also is not called, I think the problem must be with the plugin although the documentation says browser is supported (it uses Google Maps V3 API)
Note: this is a brand new project and besides cordova-plugin-googlemaps, no other third-party plugin are installed.
I haven’t tested yet on a real device but I need desperately browser preview or the development will be a pain…
Thanks in advance!