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

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

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.

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.

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

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

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();
});

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)

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.

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!

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!!

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

You say native google maps plugin (github.com/wf9a5m75/phonegap-googlemaps-plugin) can’t work with Crosswalk? I didn’t try Crosswalk yet. What seems to be specific problem with it?

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.

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…

@loyx, have you tested it?

do you test it on andoird 4.4.4 or android 5.0 ?

Sorry guys, it looks like the patch that the xwalk devs prepared for fixing the compatibility issues with google maps plugin is not working (yet). See this github issue. We’re trying to hunt down the bug, so any help is valuable…

Thanks @mhartington for the angular-google-maps lib link, it’s working great!

to answer’s @Jimena’s second question about Google Places, this angular lib makes it pretty simple.

I’ve built a demo app to show how to use:

  1. ngCordova GeoLocation plugin to locate user device
  2. use Angular Google Maps to show map of user location
  3. user Angular Google Places to search for nearby places
3 Likes

Any updates on this issue?

Are you using the JS API? From what I’ve read you appear to be using the Android/iOS API’s.