Urgent problem with maps in my application. Browser vs Device

ionic-v1
1

I have quite worried about this problem. In the browser everything works fine, but fails all devices and worse, is that there is any kind of error message, just does not load maps. I tried different ways to load a map, but useless, nothing and nothing sends load errors. I need to urgently solve this problem.

This is one way that works in browser, the device no.

.controller('ViewCtrl', ['$scope', '$rootScope', '$location', '$stateParams','$ionicFrostedDelegate','$ionicScrollDelegate', function($scope, $rootScope, $location, $stateParams,$ionicFrostedDelegate, $ionicScrollDelegate) { 
google.maps.event.addDomListener(window, 'load', function() {
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

    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"
        });
    });
    console.log(map);
    $scope.map = map;
   });
}])

This is one way that works in browser, the device no.

$scope.cargarUbicacion = function () {
if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
          latitud_actual = position.coords.latitude; 
          longitud_actual = position.coords.longitude;
          console.log(latitud_actual);
          console.log(longitud_actual);
          var mapOptions = {
              center: new google.maps.LatLng(latitud_actual, longitud_actual),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false
          };
          map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
          $scope.setMarker(map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');
      });
  }
} 
$scope.setMarker = function(map, position, title, content) {
  var marker;
  var markerOptions = {
      position: position,
      map: map,
      title: title,
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
  };

  marker = new google.maps.Marker(markerOptions);
  markers.push(marker); // add marker to array
  
  google.maps.event.addListener(marker, 'click', function () {
      // close window if not undefined
      if (infoWindow !== void 0) {
          infoWindow.close();
      }
      // create new window
      var infoWindowOptions = {
          content: content
      };
      infoWindow = new google.maps.InfoWindow(infoWindowOptions);
      infoWindow.open(map, marker);
  });
 }

You see, everything works all in my browser but nothing happens devices. What could it be?

2

Use a directive…

In you implementation you said it doesn’t work on device but can you see if there is any error logged on console?

3

Hi, thanks for your help. Like I said, there is not any type of log to leave me any error when opening the view. Your help served me for the map to show up in my view, but as you can use to mark places or know what position am I?

4

Right, you said you didn’t get any errors :alien:

First add a marker directive. Then use the geolocation cordova plugin with ngCordova to get your current position and set it to that marker you just created.

5

I was doing test with gapDebug, helps me to see the logs of my applications on devices. Seguire your advice and I’ll see that policy. I mention any thing, Thanks for your help! :wink:

6

Seguiré your advice. :laughing: Spanglish.

With ionic you can do ionic run PLATFORM -l -c to get app logs

  • -l: livereload… Live reload app dev files from the device (beta)
  • -c: consolelogs… Print app console logs to Ionic CLI (livereload req.)
  • -s: serverlogs… Print dev server logs to Ionic CLI (livereload req.)
1 Like
7

Hahahaha I will step Jajajajajaja Spanish.

Thank you !!!

8

Haha, now is asking me every time I open the application permissions for geolocalizacio and with a horrible message. You know how to disable it?

9

Are you testing on iOS? If so, here might be the solution:

EDIT: Are you asked every time you open the app (after installing it too?) or every time you deploy it to your device / emulator?

10

I wish it was just the first time that occupies and not every time you open it. Besides the message is pretty ugly and not very descriptive. If you could change that message would be ideal.

I testeando directly on the iPhone device. My app is iOS.