cordova google map plugin not shown map



  • i installed google map plugin from cordova .It works well without onsenUI .but in OnsenUI map does not load.
    cordova plugin url :https://github.com/mapsplugin/cordova-plugin-googlemaps

    my map.html

    <ons-page style="background-color: white">
        <div id="mapview-container" ng-controller="BidMapController">
            <ons-toolbar>
                <div class="left">
                    <ons-back-button></ons-back-button>
                </div>
                <div class="center"> You have received <span style="color: #fb6b25">10 Bids</span></div>
    
                <div class="right">
                    <button class="button button--quiet" style="color: #000" ng-click="app.navigator.pushPage('filterresults/filterresults.html')"><i class="ion-ios-settings"></i></button>
                </div>
            </ons-toolbar>
            <div class="mapview-content">
                <div class="map">
                    <div style="width:100%;height:400px" id="map_canvas" class="gmap_div"></div>
                </div>
                <ons-bottom-toolbar>
                    <div class="btn-mapview">
                        <button class="button button--large" ng-click="app.navigator.pushPage('map/listview.html')">list view</button>
                    </div> 
                </ons-bottom-toolbar>
    
            </div>
        </div>
    </ons-page>
    

    my controller

    app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) {
        $scope.mapinit=function (){
             var mapDiv = document.getElementById("map_canvas");
             console.log(mapDiv);
                var map = plugin.google.maps.Map.getMap(mapDiv);
                var map = plugin.google.maps.Map.getMap(mapDiv);
        }
        $scope.mapinit();
    
    });
    


  • I can’t say for 100% that this is the problem, but I had the same issue working with charts that display via a canvas. The problem was that the canvas wasn’t attached to the DOM at the time the JS was firing. I see you are using AngularJS and unfortunately, that is a huge weak point for me as I use straight JS. To resolve the issue using JS (maybe you can adapt for Angular), you simply do the following:

    document.addEventListener("show", function(event){
        if(event.target.id=='myPageID'){
            // your code here
        }
    }
    

    This is the relevant user guide info: https://onsen.io/guide/overview.html#Pagelifecycle

    Hope this helps and resolves your issue.



  • document.addEventListener("show", function(event){
        if(event.target.id=='mappage'){
           console.log('mappage');
        }
    })
    

    my mapepage:

    <ons-page var="mappage" id="mappage" >
        <div id="mapview-container" ng-controller="BidMapController">
            <ons-toolbar>
                <div class="left">
                    <ons-back-button></ons-back-button>
                </div>
                <div class="center"> You have received <span style="color: #fb6b25">10 Bids</span></div>
    
                <div class="right">
                    <button class="button button--quiet" style="color: #000" ng-click="app.navigator.pushPage('filterresults/filterresults.html')"><i class="ion-ios-settings"></i></button>
                </div>
            </ons-toolbar>
            <div class="mapview-content" >
                <div class="map">
                    <div style="width:100%;height:400px;position: relative !important" id="map_canvas" class="gmap_div"></div>
                </div>
                <ons-bottom-toolbar>
                    <div class="btn-mapview">
                        <button class="button button--large" ng-click="app.navigator.pushPage('map/listview.html')">list view</button>
                    </div> 
                </ons-bottom-toolbar>
    
            </div>
        </div>
    </ons-page>
    

    But show is not work .it does not console mappage


  • Onsen UI

    Are you using Onsen 2? If you are using Onsen 1 you need to listen for pageinit event. The others don’t exist in Onsen 1.



  • @Fran-Diox Onsen 2 is beta.So how do i initiate map in onsen 1.



  • @Abiraman-Ramanathan

    document.addEventListener("pageinit", function(event){
        if(event.target.id=='mappage'){
           console.log('mappage');
        }
    });
    


  • @munsterlander i already tried this method.This method works perfectly but map does not load in ons-page

    document.addEventListener("pageinit", function(event){
        if(event.target.id=='mappage'){
         var mapDiv = document.getElementById("map_canvas");
                var map = plugin.google.maps.Map.getMap(mapDiv);
        }
    });
    

    my mapepage:

    <ons-page var="mappage" id="mappage" >
        <div id="mapview-container" ng-controller="BidMapController">
            <ons-toolbar>
                <div class="left">
                    <ons-back-button></ons-back-button>
                </div>
                <div class="center"> You have received <span style="color: #fb6b25">10 Bids</span></div>
    
                <div class="right">
                    <button class="button button--quiet" style="color: #000" ng-click="app.navigator.pushPage('filterresults/filterresults.html')"><i class="ion-ios-settings"></i></button>
                </div>
            </ons-toolbar>
            <div class="mapview-content" >
                <div class="map">
                    <div style="width:100%;height:400px;position: relative !important" id="map_canvas" class="gmap_div"></div>
                </div>
                <ons-bottom-toolbar>
                    <div class="btn-mapview">
                        <button class="button button--large" ng-click="app.navigator.pushPage('map/listview.html')">list view</button>
                    </div> 
                </ons-bottom-toolbar>
    
            </div>
        </div>
    </ons-page>
    

    This map plugin works well with out onsen.



  • @Abiraman-Ramanathan Are you getting any errors? Tonight, I will do a codepen to see if I can get it working.



  • @munsterlander NO i did not get any errors.Plugin code executes perfectly but map does not shown in ‘map_canvas’ div tag.



  • @Abiraman-Ramanathan Share your codepen link for my reference.



  • The map works for me without issue using the below code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
        <title>Onsen UI with Google Map Demo</title>
    
        <script src="components/loader.js"></script>
        <script src="lib/onsenui/js/onsenui.js"></script>
    
        <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
        <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBycE1HnOlMqDZvkn1dwYdGTnnkq75slo"></script>
        <script>
        var map;
        document.addEventListener("show", function(event){
            if(event.target.id=='mapPage'){
                initMap();
            }
        });
        function initMap() {
            console.log('getting map');
            map = new google.maps.Map(document.getElementById('map'), {center: {lat: -34.397, lng: 150.644},zoom: 8});
            console.log('map received');
        }
        </script>
    
    </head>
    
    <body>
        <ons-tabbar position="bottom">
          <ons-tab page="home" active="true" persistent="true">
            <ons-icon icon="fa-home"></ons-icon>
            <span style="font-size: 14px">Home</span>
          </ons-tab>
          <ons-tab page="mapTemplate">
            <ons-icon icon="fa-bullseye"></ons-icon>
            <span style="font-size: 14px">Map</span>
          </ons-tab>
        </ons-tabbar>        
    </body>
        <ons-template id="home">
            <p>Home</p>
        </ons-template>
        <ons-template id="mapTemplate">
            <ons-page  id="mapPage">
                <p>Map</p>
                <div id="map" style="height:100%"></div>
            </ons-page>
        </ons-template>
      
    </body>
    </html>
    
    


  • @munsterlander

    1. I am using onsen 1.

    2. I am not ready to use javascript api to map.Because i have cordova plugin for android platform.

    3.Show is not working onsen1.

    4.Javascript api is not for cordova android apps.

    So help me for load google map in onsen 1.



  • @Abiraman-Ramanathan

    I understand all your points, what I was trying to show and it will easily work in Onsen 1.x, is that Google Maps do in fact work with Onsen. Onsen is a UI framework for hybrid apps. All of these apps run in the webview - think mini-web browsers wrapped by Cordova for native extensions. My point is that Onsen’s UI components simply map to web elements with excellent CSS and JS backing them - hence Angular integration, etc.

    We already discussed how you would use pageinit instead of the show event. I use the JS api because it is the simplest way to demonstrate that the maps are functioning in Onsen because Cordova plugins do not work in codepen nor the Monaca IDE - you must have a device to test on.

    For more information specific to a Cordova plugin as this is an Onsen forum, I would recommend looking here:

    https://github.com/mapsplugin/cordova-plugin-googlemaps

    Lastly, the cordova google maps plugin is using the Android SDK which is a simply a wrapper for that api. It is still a generating a map in the webview. The only difference between the Android SDK and JS api is data generated per map tile (png vs vector). This is why I used the JS api to show you that it will work in an Onsen page. The problem is not with Onsen, but within your implementation of the plugin.

    For a complete tutorial for the Cordova Maps plugin with Monaca, please reference here: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Tutorial-for-Monaca



  • @munsterlander

    screenshot of cordova app without onsen ( code source : https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Tutorial-for-Monaca (9th step) )

    0_1455870827363_Screenshot_2016-02-19-13-32-49.png

    screenshot of cordova app with onsen ( code source : mapepage)

    0_1455871002816_Screenshot_2016-02-19-13-35-53.png
    I did not get any error in onsen ui.But map not displayed after page push.I tried with pageinit
    but no map on this page… this is my problem .I already used this plugin in ionic but it was working well.
    I cant use javascript api for android app because of security for api key.Any one can use my api key. So i move to this plugin.help me



  • @Abiraman-Ramanathan Can you post your whole js code? What is happening, in my opinion, is the same that I posted about here: http://stackoverflow.com/questions/35123385/onsen-2-0-adding-event-listener-to-ons-switch-with-javascript

    The map div is not attached to the DOM in time for the asynchronous calls of the Google maps api - plugin or other api, it doesn’t matter. The call to display the map cannot find the object and thus does not display. This is why it disappears (probably) when you are using Onsen. We wil probably need to rewrite your map call function a bit.



  • @munsterlander

    My app.js .

    /* This js corresponds to initializing the and mapping the page corresponds to the controller */
    var app = angular.module('app', ['onsen']);
    app.run(function ($rootScope, $http) {
        document.addEventListener("pageinit", function (event) {
              if(event.target.id=='mappage'){
            console.log('mappage');
            var mapDiv = document.getElementById("map_canvas");
            console.log(mapDiv); //DOM element is printing while code execute
                var map = plugin.google.maps.Map.getMap(mapDiv);
              }
        });
       
            // Use Cordova handler
            document.addEventListener('backbutton', function (e) {
                // Handle backbutton event
                e.preventDefault();
            }, false);
    
        }, false);
    
    });
    app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) { });
    

    map_canvas DOM element is print after executes pageinit.

    My index.html

    <!DOCTYPE html>
    <!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
    <html lang="en" ng-app="app" ng-csp>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
            <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
        <!-- JS dependencies (order matters!) -->
        <script src="scripts/platformOverrides.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/onsen/js/onsenui.js"></script>
        <!-- CSS dependencies -->
        <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
        <!-- CSP support mode (required for Windows Universal apps) -->
        <link rel="stylesheet" href="lib/angular/angular-csp.css" />
         <link rel="stylesheet" href="lib/font_awesome/css/font-awesome.min.css">
         <link rel="stylesheet" href="lib/ionicons/css/ionicons.min.css">
         <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/spinner.css">
        <!-- --------------- App init --------------- -->
    </head>
    
    <body>
        <!-- Cordova reference -->
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
        <!-- -->
    
        <div ng-show="pageLoading" id="page_loader" data-loading>
            <div id="loader_spinner">
                <div class="ispinner white large animating">
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                    <div class="ispinner-blade"></div>
                </div> 
            </div>
        </div>
    <ons-sliding-menu  ng-if="!isLogin" main-page="login/login.html" side="left" type="overlay" max-slide-distance="1px" var="app.slidingMenu" ></ons-sliding-menu>
    <ons-sliding-menu  ng-if="isLogin" var="app.slidingMenu" menu-page="menu.html" main-page="home/home.html" side="left" type="overlay" max-slide-distance="250px" ></ons-sliding-menu>
    
    </body>
    </html>
    


  • That all looks ok. Have you tried the

    ons.ready()
    

    Function instead of using the event listener but in the same location? Also, have you tried to get the map to display on a simple page that isn’t using any advanced elements, i.e.sliding menus? Unfortunately, I do not have the design environment that you have or the account to run the maps plugin, so I am limited on what I can do. I still contend that if your maps API is functioning, then it can’t find the element in the DOM and that is why it is not showing. That or a CSS height / width issue could be happening.

    I say this, because I struggled with the identical problem here:

    http://stackoverflow.com/questions/35142178/monaca-onsen-2-0-charts-libraries-not-working-svg-and-canvas-in-ons-navig

    Which was fixed with info from @Fran-Diox here:

    http://stackoverflow.com/questions/35123385/onsen-2-0-adding-event-listener-to-ons-switch-with-javascript

    Edit: Try this, I am curious to see what will happen:

        document.addEventListener("pageinit", function (event) {
              if(event.target.id=='mappage'){
                  ons.ready(function() {
                       var mapDiv = document.getElementById("map_canvas");
                       var map = plugin.google.maps.Map.getMap(mapDiv);
                   });
              }
        });
    


  • @munsterlander
    1.I tried all the method below but map not displayed.But “map_canvas” is detected in All method.
    2.It is not a width and height problem because i give this style="width:100%;height:400px;position: relative !important" for map_canvas.

    1. i dont have time to test onsen ui and report you .So reply me asap…

    Method 1.

    document.addEventListener("pageinit", function (event) {
            if (event.target.id == 'mappage') {
                ons.ready(function () {
                console.log('mappage');
              var mapDiv=  document.querySelector('#map_canvas');
                console.log(mapDiv);
                var map = plugin.google.maps.Map.getMap(mapDiv);
                });
            }
        });
    

    Method 2.

    document.addEventListener("pageinit", function (event) {
            if (event.target.id == 'mappage') {
                ons.ready(function () {
                console.log('mappage');
                var mapDiv = document.getElementById("map_canvas");
                console.log(mapDiv);
                var map = plugin.google.maps.Map.getMap(mapDiv);
                });
            }
        });
    

    Method 3

     document.addEventListener("pageinit", function (event) {
            if (event.target.id == 'mappage') {
                ons.ready(function () {
                console.log('mappage');
                var mapDiv = $("map_canvas");
                console.log(mapDiv);
                var map = plugin.google.maps.Map.getMap(mapDiv);
                });
            }
        });
    

    Method 4.

    app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) {
         ons.ready(function () {
                var mapDiv = document.getElementById("map_canvas");
                var map = plugin.google.maps.Map.getMap(mapDiv);
        });
    });
    

    Method 5.

    app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) {
         document.addEventListener("pageinit", function (event) {
            if (event.target.id == 'mappage') {
                ons.ready(function () {
                console.log('mappage');
                var mapDiv = $("map_canvas");
                console.log(mapDiv);
                var map = plugin.google.maps.Map.getMap(mapDiv);
                });
            }
        });
    });
    

    Any thing else … It tried all the method.
    In this method map was initiated but not displayed.
    Proof for DOM element:
    0_1455943980644_Screen Shot 2016-02-20 at 10.21.34 am.png



  • @munsterlander

    I found solution for this problem.

    1. Map is loading in background position. Onsen ui background is overlapping on map so map is not displayed in that page.

    Solution :

    angular.element(document.querySelectorAll('.page__background')).css('background-color', 'transparent', 'important');
                    angular.element(document.querySelector('.menu-container')).children().css('background-color', 'transparent', 'important');
    

    Thank you MR.munsterlander for your good effort.



  • Hey! At least it is working! I had a similar issue trying to get those charts to show within a navigator below a list. They kept getting pushed to the side. Oh well, at least you have the solution now.



  • I have the same issue, Show event is not fired, i am using onsen 1.x,
    Here is my code,

      document.addEventListener("show", function (event) {
                    if (event.target.id == "service_requests-page") {
                       alert("init service_requests-page");
                    }
                }, false);
    
    

    Any one can help ?


Log in to reply