Hi.
Build fail after add cordova plugin.google.maps
Hi!
Do someone knows how to use āplugin.google.mapsā inside controllers while using ionic framework?
I need to handle clicks on markers (plugin.google.maps.event.MARKER_CLICK), and pop some information (outside the map), so I canāt stay inside the ārunā method.
ācontrollers.jsā :
.controller('GetShopsCtrl', function($scope, $http) {
var div = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap();
})
.
ReferenceError: plugin is not defined
Thanks!
PS : Question also asked here : http://stackoverflow.com/questions/28819791/using-cordova-google-maps-plugin-with-angular-ionic
Hello @bokobok
I am using the plugin inside a āMap Controllerā, simply by calling the var map = plugin.google.maps.Map.getMap(div) and then doing what i need with it. Here is a bit of code from my controller:
.controller('mapCtrl', ['$rootScope', '$scope',
function($rootScope, $scope) {
var map,
vm = $scope,
root = $rootScope,
div = document.getElementById("map");
map = plugin.google.maps.Map.getMap(div);
map.setOptions({
mapType: plugin.google.maps.MapTypeId.ROADMAP,
controls: {
compass: true,
myLocationButton: true
},
gestures: {
scroll: true,
tilt: true,
rotate: true,
zoom: true
}
});
I hope it helps you 
Hello @Gadgetroch
Have a look at this:
https://github.com/wf9a5m75/phonegap-googlemaps-plugin/blob/master/example/DemoApp/www/pages/customInfoWindow.html
I implemented a simple infoWindow using this, the only thing is the code is ENORMOUS haha
Good luck 
I found out that if i use this method only on the map controller, it gives me the following ābugā:
If i go to the Map View, open the side menu, and then close it, it will be hidden right? So if i go to the main page of my app from there, and try to open the side menu, it will be hidden (empty). So what i actually did was this:
$rootScope.$on('$stateChangeSuccess', function() {
currentState = $ionicHistory.currentStateName();
$rootScope.$watch(function() {
return $ionicSideMenuDelegate.isOpen();
}, function(value) {
if (value === true) {
document.getElementById("side-menu-left").style.visibility = "visible";
} else {
document.getElementById("side-menu-left").style.visibility = "hidden";
}
});
});
3 Likes
Does anyone have any issues with performance so far?
I have a state called āprofileEditā, and after i added the plugin (on a new project) this single state is now sluggishā¦ It only happens with this state, all the others are fine. I tried removing everything from my controller, removing the map after going out of the map state, hiding it, and so far i have no fix for itā¦
Did anyone else encounter this issue?
Were you able to resolve your problem ?? I am having the same issue
Anybody Can help me? i Need to get markers in my path.but its getting in localhost but not in device and also want to find out Kilometer travelled Any One is there helping me?
Thanks
Fantastic plugin ! I had to ditch the Google Javascript API as itās way too slow and buggy.
Using this plugin makes an incredible difference 
Thanks @wf9a5m75 !
If this helps other people, I had to disable the transition before changing to the state which contains my map as the map started displaying during the transition and ended up with the wrong (narrower) width and part of the page white :
$ionicViewSwitcher.nextDirection('none');Fantastic plugin ! I had to ditch the Google Javascript API as itās way too slow and buggy.
Using this plugin makes an incredible difference grinning Thanks @wf9a5m75 !
What versions are you using (cordova, ionic cli, crosswalk, etc)ā¦ ?
Hello Chacho,
Can you show us an example of your code?
I am not able to add a map into a controller and there is no real example of this online.
Does someone know if the phonegap/cordova google maps plugin is being discontinued?
It says so on this plage: https://plus.google.com/u/0/communities/117427728522929652853
It would be great if someone could share a code of successfully using the phonegap plugin into a Controller and a SideMenu. I have been trying for a few days but with no success. I almost ready to go back and use the Angular Google Maps JS plugin.
Herve
Hi there, as an alternative to hide side-menu, I took this approach:
index.html
<ion-side-menu side="left" ng-hide="! isMenuOpen()">
app.js
$rootScope.isMenuOpen = $ionicSideMenuDelegate.isOpen.bind($ionicSideMenuDelegate);
There is only one problem: if the view holding the map has the toggle-menu button visible, when using it, as the menu closes the visual effect is weird because of the transparent background.
Solution => hide the toggle-menu button and use a back-button.
Iām running android only and have this in my app.js config section:
$ionicConfigProvider.views.transition('none');
Can I ask what this Cordova plugin brings to the table that a simple Google Javascript SDK integration doesnāt? Using something like this (which you can package in an Angular directive):
<!-- load the libarary: -->
<script src="https://maps.googleapis.com/maps/api/js?key=..........&language=...."></script>
// And then some Javascript code (easily packaged as an Angular directive):
var mapOptions = {
center: latLong,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($element[0], mapOptions);
// and so on ...
Works fine for me, and I think I can do anything that the Cordova plugin does.
Or am I missing something?
Yes, performance. @loeb. Actually, you can do a lot more stuff and will for sure have a rock-solid js-lib when you grab the JS v3 API, but you will (never) have animation, 3d (pseudo-3d) and native smoothness. Currently, JS-API will load Image-Models, while the SDK will grab vectors which will save a lot of bandwidth and memory.
Weāre working on the clustering features currently, and maybe we will also implement Google Places API with a nice intent UI
Thats the main reason of our plugin.
Thanks, yes I understand it now, Google has a Maps Javascript SDK but they also have Maps native mobile SDKs (for Android and iOS), so the Cordova plugin wraps the native SDKs.
Got it, thanks. Yes then Iāll certainly want to check it out.
Hello All,
Please is there any tutorial out there that shows how to actually use this plugin in an ionic app? I have gone through the long thread here and didnāt find a reference to any tutorial nor sample app.
Thank you
1 Like
Thank you very much, this made my day.
@wf9a5m75 Hey nice plugin. Can we see Floor Numbers of mall on map using this plugin?
Hi, iām trying to use the plugin but i canāt get it work. The map didnāt appear if i used the following code:
plugin.google.maps.Map.isAvailable(function(isAvailable, message) { if (isAvailable) { var mapDiv = document.getElementById('map'); console.log(mapDiv); var map = plugin.google.maps.Map.getMap(); map.setDiv(mapDiv); map.addEventListener(plugin.google.maps.event.MAP_READY, function() { console.log("The google map is available on the device"); }); } else { console.log(message); } });
But it work fine if i used:
plugin.google.maps.Map.isAvailable(function(isAvailable, message) { if (isAvailable) { var map = plugin.google.maps.Map.getMap(); map.showDialog(); map.addEventListener(plugin.google.maps.event.MAP_READY, function() { console.log("The google map is available on the device"); }); } else { console.log(message); } });
More generally, setting the div doesnāt work. Display the map with showDialog method works.
I used:
Ios9.1
ionic 2.0.0-alpha.25
Do you have already seen this kind of problem ?
Thanks