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 (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!