Map doesn't work on device

Question

I spent a lot of time trying to figure this out. I have a map on my application and this map loads the actual location once it is loaded.

For some reason on my viewer (using Ionic Viewer) it works on my local device and on my localhost, but When I test it on my iPhone directly from Xcode, the map don't load.

If I compile an .apk and test it on android, the map don't load either.

.controller('mapaCtrl', function($scope, $compile, $location) {

    $scope.goPayment = function() {
        $location.path('side-menu/history');
    };


var myLatlng = new google.maps.LatLng(34.603711, -58.381585);

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    navigator.geolocation.getCurrentPosition(function(pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });

        google.maps.event.addListener(myLocation, 'click', function() {
            infowindow.open(map,myLocation);
        });
    });


    var contentString = "<div><a ng-click='clickTest()'>Pagar Aqui!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

  $scope.map = map;

      $scope.clickTest = function() {
    $location.path('side-menu/pay');
  };




})

Any clue?

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

There may be several things affecting the proper functionality of your app, consider the following:

There could be an issue where the requests to google maps are blocked. Check out the whitelist plugin: https://stackoverflow.com/a/29896923/1956540
Try adding geoLocation permissions, here is an article I found that walks you through the whole thing: http://www.gajotres.net/using-cordova-geoloacation-api-with-google-maps-in-ionic-framework/

It is also important to wrap geolocation code into Ionic deviceready event, execution will timeout without it:

ionic.Platform.ready(function() { // Code goes here }

I'm not sure it's necessary to have these anymore but I know for Android you could verify the permissions needed to exist in AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

There is probably some iOS equivalent that you can search for but I think installing the plugin should work on its own.

--

edited May 23 '17 at 12:07

Community

1
1

answered May 12 '16 at 20:16

BatteryAcid

8,381
5
28
40

I try this but my map is still blue (light blue) – Martin Ciappesoni May 12 '16 at 20:36
Are you requesting proper permissions to retrieve user's location? You should also implement the errorCallback on `getCurrentPosition` to print out the error if any. – BatteryAcid May 12 '16 at 20:45
Im not requesting any permission... Can yo help me on that? – Martin Ciappesoni May 13 '16 at 14:14
Do you have any idea what do I have to do for IOS? – Martin Ciappesoni May 13 '16 at 15:31
If you've installed the plugin it should be ok. You can research this: http://stackoverflow.com/a/30742592/1956540 for iOS. Also, i noticed you are not wrapping the location code with a `ionic.Platform.ready` call, see updated answer and do some more searching – BatteryAcid May 13 '16 at 15:40
Thanks! The last link with the android config addition solve it – Martin Ciappesoni May 16 '16 at 13:56

Map doesn't work on device

1 Answers1