Best way to implement Google maps (and Places library) in Ionic

ionic-v1
1

Hi!
I’m quite new at Ionic, and I’m trying to figure out which is the best way to implement Google Maps in my new ionic app.
I’ve seen multiple ways (angular-google-map, cordova google map plugin, etc), but I’m a bit lost.
Couldn’t get working Angular Google Map in real android device, and i was going to install Cordova plugin (i know it’s for phonegap, but it has been adapted to ionic framework, at least for what i’ve seen in this post - Using google maps cordova plugin ) but i’ve decided to ask first, before expending great amount of hours trying…!

I’d appreciate any help or orientation…!

I’m trying to display a google map, and then display markers of different places (data from google places library), so any help or idea, would be a life saver!

PS: if anyone can also give me a gint on how implement services on google places library api, that would be awesome, but i know i’m asking too much… and I can’t send beers or chocolates from here! Haha.

Thanks in advance!

1 Like
2

Hi,

As you write there is several ways. I also want to build an app fom ionic blank template where you can see your self and other markers in google map. The user could also put there own markers to be seen by everybody.

I found this approach but is this the best way to work with ionic and google maps? Did you come up with someting? https://blog.nraboy.com/2014/10/implement-google-maps-using-ionicframework

3

Hi ibra! Nothing yet.

I’ve already tried with:

  • Cordova plugin for phonegap. Can’t get it working, neither on browser or android device. I don’t get any error, but the map doesn’t render. I guess my api key es correct, but I haven’t found a way to check this.
  • Angular and javascript option,works fine on browser, but makes the app crash on device.

I’d like the Cordova option, since i’ve read it has the best performance, but… simply doesn’t show map, and I have no clue on how to continue.

I’d appreciate any help of anybody who could implement google map on ionic, with good performance, with multiple markers, but nobody came to the rescue yet.

4

Something to keep in mind is that we’re working in angular, so any angular directive can be used.

http://angular-ui.github.io/angular-google-maps/#!/

Can you explain exactly what you want?

5

Maybe another consideration: Leaflet

1 Like
6

Hi @jimena @ibra,
the same with me. I also want to try to build an app that can show nearby places and map.
There is another example that using google map by Raymond Camden
http://www.raymondcamden.com/2014/07/28/my-perspective-of-working-with-the-ionic-framework.

I still seeking which one to choose because another reference said that using google maps is little slow than leaflet with OpenStreetMap. I read that Foursquare also move from google map to using OpenStreetMap.

Also read this http://calendee.com/2014/10/25/maps-app-using-ionic-framework-and-leaflet-js/ .
@calendee Could you add searching a nearby places feature, so we could learn and use it. Thanks in advance.

7

Hi @mhartington.

What I want to do exactly is:

  • Display map.
  • Geolocate user position, and center map.
  • Show all places nearby, with Google Places API.

I have already tryied with Angular Google Map, but for some reason it doesn’t show in real android device, and I’ve done everything according the tutorial.

I also wanted to try Cordova plugin for Phonegap, since I’ve read it has better performance.

Hi @markdark, I’m checking it, thank you! I didn’t know Leaflet.

Hi @sciu…! I’ll check Raymond Camden link, thank you very much! I haven’t heard about Leaflet until now. Thank you very much!

1 Like
8

Native Google maps plugin is really nice, its Google maps v2 API and it works with no problems:
github.com/wf9a5m75/phonegap-googlemaps-plugin
You have everything there to help you setup exactly what you need, you just need to check out places API separately.
Native maps are much more smoother then any web view JavaScript version.

9

Hi @mladen5, that’s exactly what I’ve read, but can’t get it working. I’ve got the android and ios API, put them in the correct place, but… black page, map not showing. And I have no way to debug it and solve the problem.
Have you implement it…? Any advice? Any way to check if the API key are correct?
Thank you very much!!
Jimena.

10

There is a difference between blank map and blank page.
If you see this: https://cloud.githubusercontent.com/assets/2962350/3624237/23579664-0e5a-11e4-9828-e7e7a6b0eb1b.png
then your API key is not correct. Probably need to get correct fingerprint, on win: C:\test\HelloMap\platforms\android> keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
if you are using debug.keystore to build app.

If you don’t see anything on page where you added you map_canvas div, then you need to give height and width to that div.

That will most likely fix your problem

11

I m using http://angular-ui.github.io/angular-google-maps/#!/ in a current app, and it works very well.

12

Hi,

I created the map using Google API, detected user’s current location using Cordova Geolocation Plugin and tested on both browser and mobile devices:


To install Cordova Geolocation Plugin, run the command cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

.controller('MapController', function($scope) {

  $scope.drawMap = function() {
    var myLatlng = new google.maps.LatLng(144.94623769999998, -37.8216962);

    var mapOptions = {
      center: myLatlng,
      zoom: 13
    };

    $scope.map = new google.maps.Map(document.getElementById("map-div"),
      mapOptions);

    // Try HTML5 geolocation
    if (navigator.geolocation) {
      console.log("Device supports Geolocation");
      navigator.geolocation.getCurrentPosition(function(position) {
        console.log("Enter getCurrentPosition");
        var pos = new google.maps.LatLng(position.coords.latitude,
          position.coords.longitude);
        console.log(pos);
        $scope.map.setCenter(pos);

        var myLocation = new google.maps.Marker({
          position: pos,
          map: $scope.map,
          content: 'Your location'
        });
      });
    } else {
      // Device doesn't support Geolocation
      console.log("Device doesn't support Geolocation");
    }
  };

  $scope.drawMap();
});
13

Me too I am using Angular Google Maps with good results, my app just went up on Play and Appstore.

The only thing that is a bitch is having links in marker windows take you somewhere in the app through state changes.

I ended up doing that reliably by linking to URLs instead of using $state…
(It is hard getting $scope access in the code that runns in the marker window)

14

You can call methods on the controller from inside a marker window by using ng-click="$parent.methodName()"

I fought with this yesterday but found the solution. Then inside the method do your $state.go call.

15

Hi! Well, thanks to all the answers and attempts, I quitted trying with Cordova Google Map plugin, and succeeded on installing angular plugin.
Now I’ve looked at several options for getting Google Places library info, is there any to recommend?
Thanks to all in advance!

16

Hi @mladen5, actually I get a blank page (not map), without js errors, so I can’t debug the issue. I’ve already done all the steps to get the API key.
The map_canvas DIV has height and width, that’s why I was quite lost about it.
Thank you very much for your orientation!!

17

I actually had to implement the full range of our app’s features in both phonegap google maps plugin and angular-google-map.

The reason for this switch was that with newer versions of phonegap google maps plugin that we were initially using you cannot use Crosswalk and since it this was a no go for us we had to scratch the whole implementation of the map. So this is one thing to keep in mind. Over all using the plug-in it looks very nice and has a very smooth and responsive feel and even tracks and shows your own position out of the box.

We then switched to angular-google-maps which uses Google Maps JS Api, compared to the native plugin, this implementation feels slow and unresponsive on mobile, with no animations and the fact that tiles are not loaded until you leave your finger from the screen and the map comes to a complete stop just makes things feel even worse. On the bright side, angular-google-maps has much more features (especially the ability to add html in infowindows) and coding it in angular just feels more native to ionic.

In general I would say neither of the two solutions are quite there yet for cordova apps and which one you choose broadly depends on your needs

1 Like
18

You say native google maps plugin (GitHub - mapsplugin/cordova-plugin-googlemaps: Google Maps plugin for Cordova) can’t work with Crosswalk? I didn’t try Crosswalk yet. What seems to be specific problem with it?

19

Unfortunately no, project fails to compile the moment you add the plugin. The issue has been reported a long time ago but it seems it cannot be resolved.

20

The problem has been resolved and is already live in the canary channel… So yes, you can already use the cordova Google Maps plugin with Crosswalk support starting from 13.41.309.0:

https://download.01.org/crosswalk/releases/crosswalk/android/canary/

It should enter the beta channel the next week…