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
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.
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
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 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 :