Cordova native google maps plugin (plugin.google.maps) not working well with Ionic sidemenu

ionic-v1
#1

Has anyone had any luck in integrating plugin.googlemaps to Ionic sidemenu template? I can get the Googlemap rendered but it only occupies half of the screen (see the screen capture https://github.com/chicheongweng/ionic-sidemenu-googlemaplugin/blob/master/IonicSideMenuGoogleMap.png).

image

The plugin works well with Ionic tabs template though.

I have checked in my code to https://github.com/chicheongweng/ionic-sidemenu-googlemaplugin

To reproduce the problem, run the below three commands:

  1. ionic state reset

  2. cordova plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID=“AIzaSyDnHB_p8JYAPlR5feITA6FUsbx8VU33wl8” --variable API_KEY_FOR_IOS=“AIzaSyBVNNVWf1BzIRqJEYM2d0Nihfb3wR8C8Ek”

  3. ionic run -l -c -s

I use directive (www/js/directive.js) to display the map.

I would appreciate it if anyone could point to me what the issue is.

#2

Just Add the position: relative; property to the ion-side-menu element. it works for me!!

image
Captura de pantalla 2016-01-08 a las 23.33.05.png750×864 278 KB

#3

Adding ion-element-menu { position:relative; } fixes the map but the side menu screws up. Can you confirm you can still see the sidemenu when you clink the triple bars at top left corner?

#4

Because of how that plugin works, you might find that something you should do is make the side menu’s hide themselves when they are closed. Side menus normally still exist under the center div, but that map plugin makes the center div transparent and shows the native map underneath so you can see the side menu’s.

Also, you should remove your keys from the command in you post, or others could take them to use and charge all the usage to you.

#5

There is a solution about this problem, but i think its not the best work-arount…

$rootScope$watch(function(){
return $ionicSideMenuDelegate.getOpenRatio();
}, function(newValue, oldValue) {
if (newValue == 0){
$(’.menu-left’).hide();
} else{
$(’.menu-left’).show();
}
});

In your controller watch for $ionicSideMenuDelegate.getOpenRatio() and check the status -> if 0 hide your menu-left via jquery, otherways show it.

Source code in github

#6

After adding style

position: relative;

property to the ion-side-menu element it also need to add few styles to make it working sidemenu

ion-side-menu ion-header-bar,ion-content{
width: 76vw;
height: 100vh;
}

You can use class name for ion-header-bar or ion-content as well.