ngCordova google map

cordova
1

Hi everybody !

I’m actualy trying to integrate a native google map to my app. First I wanted to use plugin.google.maps package ( https://github.com/wf9a5m75/phonegap-googlemaps-plugin). The problem is that my map is blanked and the side menu is broken (I followed the instructions for the API key). I tested the plugin with MeteorJS and it works like a charm. So I taught about using ngCordova for my ionic app.

The problem is that I can see there is a way to use the map with ngCordova because the package is listed in the custom build page. However, there isn’t any documentation for the google map.

I also found this http://jbdemonte.github.io/angular-google-maps-native/faq.html which look interresting but I didn’t test it, I think it’s not mobile UI based but it could help others :wink:

Can you help me to integrate the map with ngCordova please ?
Thank you.

2

This topic is asked over and over again, just Google it a bit.

Andrew McGivery provides several tutorials at this site: http://mcgivery.com/100-ionic-framework-resources/

Or you can use a pure JavaScript solution: http://www.gajotres.net/using-google-maps-with-ionic-framework/

3

@Gajotres he specifically asked for native google maps all of those link are of no help to him

2 Likes
4

@aaronksaunders Have you tried looking at these links?

The First one has everything glemiere asked for, he only needs to spend few seconds looking for it (it even includes a video tutorial, it can’t get better than this). This link from @andrewmcgivery should be considered a staple for every Ionic developer.

The Second link is just a courtesy, if he can’t work with native maps he should know that alternatives do exist. If not he then someone else.

5

Hey guy.

I found the problem. First of all, if you use Cordova CLI >= 5.0.0, use this version of cordova google map https://github.com/Nipher/phonegap-googlemaps-plugin.
The only problem I have now is a bad displaying of the side-menu. I’ll come back here to explain how I’ll fix it :wink:

EDIT :
If the project doesn’t compile with an "EXDEV, cross-device link not permitted" error, it’s because you can’t add plugin by github repository in latest version of Cordova. So just run the following command :

npm install -g cordova@5.0.0
1 Like
6

This is useful information, thank you for sharing it.

7

Hi guys ! Sorry for the delay I just noticed that I forgot to share my fix with you for the side menu problem.
First, make sure you have a CSS class like that :

.hidden{
	display:none;
}

Then add an ID and your class to your ion-side-menu :

 <ion-side-menu side="left" id="myAwesomeId" class="hidden">

Then create a new function like this one in the controller linked to the menu :

$scope.showMenu = function(){
    document.getElementById('myAwesomeId').classList.toggle('hidden');
};

Finally, add an ng-click to this function on your side menu button

<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()" menu-toggle="left">

Enjoy ! :wink:

8

I remember there was a flickering issue with this method when you scroll down the screen.
Can you pelase confirm @glemiere?

9

Hey !

I found a better issue which consist in creating an event listener when the menu is opened.

In the controller :

$scope.isMenuOpen = $ionicSideMenuDelegate.isOpen.bind($ionicSideMenuDelegate);

Then modify your menu.html like that :

<ion-content ng-if="isMenuOpen()">

I confirm that this method is better and works well for me :wink:
By this way, we just check if the menu is opened, if the menu is opened, we open the display the side-menu content :wink:
The only problem is that your first menu button will appear beside the header. CSS can fix that :wink:

If you use ionic-material, you can directly modify menu.html like that :

<ion-list ng-if="isMenuOpen()">
10

I just went through all of them and don’t see any native implementations? Perhaps I am blind?