Google maps dot displaying on Onsen UI page

Question

I have a concern about the google maps plugin used with Onsen UI: Google Maps Plugin

When my google maps div (canvas) is located directly in the index.html page, I can show the google map perfectly.

When I travel to any other page through the Onsen UI side menu, google map cannot display anymore on any of the pages travelled to. And when I travel back to the index.html page, it does not work anymore (maps appear in white).

If I put in the navigator definition any start page attribute, it does not work neither ( ons-navigator id="navi" page="start_page" /ons-navigator) That is why I only let : ons-navigator id="navi" /ons-navigator

I know there is a similar topic about that problem but it has been closed and problem was not fixed : github.com/mapsplugin/cordova-plugin-googlemaps/issues/324

I attach a pdf file to describe the sequence and the problem (you can see it online without downloading):

PDF_problem_description

Thank you very much for your help

Here is my Index.html :

<!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>

    <!-- meta Charset-->

    <meta charset='utf-8'>
    <script src='js/angular.min.js'></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <link rel='stylesheet' href='onsenui/css/onsenui.css'/>
    <link rel='stylesheet' href="css/onsen-css-components.css"/>
    <script src='onsenui/js/onsenui.js'></script>
    <script src='onsenui/js/angular-onsenui.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name='viewport' content='user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width'>

</head>


<body ng-controller="AppCtrl">


    <ons-splitter>


        <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable >

                <ons-page>

                    <ons-list>
                        <ons-list-item>
                            <div class="text_menu_color" ng-click="fn.load('index.html')">Index</div>
                        </ons-list-item>
                        <ons-list-item>
                            <div class="text_menu_color" ng-click="fn.load('html/dashboard.html')">Dashboard</div>
                        </ons-list-item>
                    </ons-list>

                </ons-page>

        </ons-splitter-side>


        <ons-splitter-content>
        <ons-navigator id="navi"></ons-navigator>
        </ons-splitter-content>

    </ons-splitter>

    <h3>Index.html</h3>
    <div id="map_canvas_1" style="position:fixed;width:160px;height:320px;left:10px;bottom:150px;background: blue;border: 2px solid black"><h3>map 1</h3></div>
    <button ng-click="show_map_1()" style="position:fixed;width:160px;height:100px; left:10px;bottom:30px">Show map 1</button>

<script>

ons.platform.select('android')
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {window.powermanagement.acquire()}

angular.module('app', ['onsen'])

        .controller('AppCtrl', function($scope) {

            $scope.show_map_1 = function(){
              $scope.map_1=""
              $scope.map_1 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
              $scope.map_1.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_1)
            }

            $scope.show_map_2 = function(){
              $scope.map_2=""
              $scope.map_2 = plugin.google.maps.Map.getMap(document.getElementById('map_canvas_1'));
              $scope.map_2.addEventListener(plugin.google.maps.event.MAP_READY, $scope.onMapReady_2)
            }

            $scope.onMapReady_1 = function() {
                $scope.map_1.setDiv(document.getElementById('map_canvas_1'))
                $scope.map_1.refreshLayout();
                $scope.map_1.setBackgroundColor('green')
                }

            $scope.onMapReady_2 = function() {
                $scope.map_2.setDiv(document.getElementById('map_canvas_2'))
                $scope.map_2.refreshLayout();
                $scope.map_2.setBackgroundColor('green')
                }

            $scope.fn = {};

            $scope.fn.load = function(page) {
                var menu = document.getElementById('menu');
                var navi = document.getElementById('navi');
                menu.close();
                navi.resetToPage(page, {animation: 'slide',  animationOptions:{duration: 0.4, delay: 0, timing: 'ease-in'}});
                };
        })

</script>

</body>

</html>

Here is my Dashboard.html :

<ons-page>

    <h3>Dashboard.html</h3>
    <div id="map_canvas_2" style="position:fixed;width:160px;height:320px;right:10px;bottom:150px;background: blue;border: 2px solid black" ><h3>map 2</h3></div>
    <button ng-click="show_map_2()" style="position:fixed;width:160px;height:100px; right:10px;bottom:30px" >Show map 2</button>

</ons-page>

LemonHard LemonHard · Accepted Answer · 2018-04-06T00:58:49

OnsenUI adds dynamically a background div for pages, inspect you map container element and check as all parents must be transparent with this css style background-color: rgba(0,0,0,0);

For me, there's div hiding the map with class "page--background" which is not dynamically set to transparent by the plugin (because it's a no parent div with absolute position), sample :

<div class="page__background page--material__background" __plugindomid="pgm423934967639"></div>
<div class="page__content page--material__content _gmaps_cdv_" __plugindomid="pgm1136479823937">
    <div id="mymap-container" class="gmap-container _gmaps_cdv_" __pluginmapid="map_0_147744461355" style="background-color: rgba(200, 200, 200, 0.5); position: relative; overflow: hidden;" __plugindomid="pgm888819903812"><div __plugindomid="pgm1177970622685" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; overflow: visible; z-index: 0;"></div></div></div>

I apply the transparent background style with jQuery once the map is initialized to reveal it:

mapDiv = document.getElementById("mymap-container");
myMap = plugin.google.maps.Map.getMap(mapDiv);
myMap.one(plugin.google.maps.event.MAP_READY, myMapInit);

myMapInit = function () {
    console.log("Map init done!"); // DEBUG
    $(".page__background").css( "background-color", "rgba(0,0,0,0)" );
}

This is explained here (bottom of page): https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

Google maps dot displaying on Onsen UI page

2 Answers