Monaca Onsen UI Discord Chat Github Repo

cordova-plugin-googlemaps: error on browser

  • 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 ('home') {
          var mapDiv = document.getElementById("map");
          // Next lines = error "Cannot read property 'google' of undefined"
            'API_KEY_FOR_BROWSER_DEBUG': ''
          var map =;

    The HTML:

    <ons-navigator swipeable id="myNavigator" page="home.html"></ons-navigator>
    <ons-template id="home.html">
    	<ons-page id="home">
    			<div class="center" class="white">Map App</div>
                    <p>Hi, Onsen with Google Maps!</p>
    		<div id="map" style="width:100%;height:500px"></div>

    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!