CODEWITHSUNDEEP
google-mapsonsen-ui
Juan Colombia
Juan Colombia

Reputation: 21

Google maps dot displaying on Onsen UI page

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>

Upvotes: 0

Views: 1257

Answers (2)

LemonHard
LemonHard

Reputation: 21

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

Upvotes: 2

Juan Colombia
Juan Colombia

Reputation: 21

I managed to solve the problem.

For those who get the same trouble using the google maps plugin with Onsen UI, use google maps without the plugin, and it will work perfectly, no matter the page you travel to, through the onsen navigator.

Somebody already posted an explanation on how to use google maps without the plugin. It works very well:

Using google maps without plugin

Cheers

Upvotes: 1

Related Questions