Google Maps Plugin and side menu


#1

Hello!

Currently i’m creating a simple app.
And want to use some plugins, such as Google Maps.
I’ve read https://market.ionic.io/starters/google-maps starter and have some questions about using plugins with ionic.
Here the my controller

.controller('PlaylistsCtrl', function($scope, $ionicPlatform) {
    $ionicPlatform.ready(function() {
        var div = document.getElementById("map_canvas");
        console.log(JSON.stringify(div));

        // Invoking Map using Google Map SDK v2 by dubcanada
        var map = plugin.google.maps.Map.getMap(div,{
        'camera': {
            'latLng': setPosition(-19.9178713, -43.9603117),
            'zoom': 10
        }
        });


        // Capturing event when Map load are ready.
        map.addEventListener(plugin.google.maps.event.MAP_READY, function(){

        // Defining markers for demo
        var markers = [{
            position: setPosition(-19.9178713, -43.9603117),
            title: "Marker 1"
        }, {
            position: setPosition(-19.8363826, -43.9787167),
            title: "Marker 2"
        }];

        // Bind markers
        for (var i = 0; i < markers.length; i++) {
            map.addMarker({
            'marker': markers[i],
            'position': markers[i].position
            }, function(marker) {

            // Defining event for each marker
            marker.on("click", function() {
                alert(marker.get('marker').title);
            });

            });
        }
        });


        // Function that return a LatLng Object to Map
        function setPosition(lat, lng) {
        return new plugin.google.maps.LatLng(lat, lng);
        }
    });
    })

In template i have div with id map_canvas with style=“width: 100%;height: 100%;z-index: 1000”.
Running on device with live reload.
Map are loaded, but side menu overflows map

Is there a way to hide it?

Thanks!

UPDATE
Solved my settings “display:none” to side menu when in map view


#2

Hello, you could put here the code that you used for “display: none”.
I’m tired of looking for solutions to this problem and I can not find a solution. Thanks in advance.


#3

Here the code.
In the app.run(…) section:

    // Hide side menu after entering maps (Native SDK)
    $rootScope.menuHidden = false;
    $rootScope.$on('$stateChangeStart',
      function(event, toState, toParams, fromState, fromParams){
        $rootScope.menuHidden = toState.name == 'map' || toState.name == 'map-search';
      });

In side menu markup:

...
  <ion-side-menu side="left" ng-hide="menuHidden">
...

I have use the map in two states named map and map-search
While i switch to that states menuHidden will set to true. And hides the side menu. That’s the trick :slight_smile:


Side menu overlap when used with cordova-plugin-googlemaps
#4

Thank you very much for your answer, I have tried it and it works well, but it is not what I intend to achieve. Maybe I misunderstand the title of the post but really what I need is that from inside the map, moving the map to the left, it also shows the menu and invades the action that the user wants to do since it stops seeing the map to See the menu. When the user only intended to move the map to the left.

Here is an image of what happens when I use your solution. I am grateful but it is not a solution for me.

I need when the user moves the map, in any direction, NEVER show the menu.

Thanks to your solution I have tried several options, but none have been satisfactory.

<Ion-side-menu side = "left" ng-hide = "menuHidden" can-swipe = "menuHidden" ngSwipeLeft = "menuHidden" ng-animate-swap = "menuHidden">

I leave here the comment in case you or another person can help me.

NOTE: There are cases where it works well and these are:
1.- When you first enter the view, loaded from

$ UrlRouterProvider.otherwise ( '/menu/mapa_dmb');

2.- When you change your view in the menu and from the same menu is re-entered on the map.

It is only failing when there is a view before such as “login” or “pincode” and displays the map after login or pincode.

$ State.go ( 'menu.mapa_dmb');

In case it serves anything. :slight_smile:


#5

Have found a solution?
I have the same problem and I can not find any solutions


#6

I still have no solution


#7

I just found a simple solution
<ion-side-menu-content> element has an attribute drag-content when it’s set to false it will disable ability to open side menu by swiping content screen.
So all I had to do is to add this attribute as follows :

<ion-side-menu-content drag-content="false">

Reference: https://www.tutorialspoint.com/ionic/ionic_js_side_menu.htm

I hope it will help


Side menu overlap when used with cordova-plugin-googlemaps
New google maps js api renderer and data-tap-disabled
#8

Perfect!!
It is not the best solution but it solves part of the problem.
Thank you very much AsmaaAlamrawy !!