Q: Ionic cordova geolocation show maps doesn't work on phone I started with Ionic and I made some first app, and that app works great on browser (windows 8 PC), but when I build app and try on the phone doesn't want to show map. Location as a number I can get on the phone too, but position on map I can't. Can anyone knows why?
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body ng-app="inception">

    <ion-nav-view></ion-nav-view>

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <script src="lib/ionic-material/dist/ionic.material.min.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <script src="app/application.js"></script>
    <script src="app/controllers/mainController.js"></script>
    <script src="app/controllers/locationController.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVYeH02dc5EyoYaqpYSFsogSlkOx2S2o4&sensor=true"></script>
  </body>
</html>

application.js
angular.module('inception', ['ionic','ionic-material','ngCordova'])

    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
            if(window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);
            }
            if(window.StatusBar) {
                StatusBar.styleDefault();
            }
        });
    })

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider

        .state('home', {
            url: '/home',
            controller: 'locationController',
            controllerAs:'locCtr',
            templateUrl: 'app/views/location.html'
        })

    ;

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/home');
});

controller
(function() {
    'use strict';

    angular
        .module('inception')
        .controller('locationController', locationController);

    locationController.$inject=['$cordovaGeolocation','$http'];

    function locationController($cordovaGeolocation,$http) {

        var vm = this;
        vm.locationOn = false;
        vm.showSpinner = false;

        vm.getMaps = getMaps;



        function getMaps() {
            var options = {timeout: 10000, enableHighAccuracy: true};

                            $cordovaGeolocation.getCurrentPosition(options).then(function(position){

                var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

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

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

                google.maps.event.addListenerOnce(vm.map, 'idle', function(){

                    var marker = new google.maps.Marker({
                        map: vm.map,
                        animation: google.maps.Animation.DROP,
                        position: latLng
                    });

                });

            }, function(error){
                console.log("Could not get location");
            });
        }

    }
})();

view
<ion-header-bar class="bar bar-header bar-calm">
    <h1 class="title text-center">Test</h1>
</ion-header-bar>
<ion-content class="has-header">
    <div class = "row colors-back">
        <div class = "col col-100">



            <button class="button button-block button-balanced" ng-click="locCtr.getMaps()">
                Get the map
            </button>

            <div id="map"></div>


        </div>
    </div>
</ion-content>

