Ionic google maps pinch zoom, moving and markers showing issue

ionic-v1
1

Hi,

I made simple app to show distance and route on map between my current location and one default location. I managed to get maps on the screen (on Galaxy S4, but I can’t get on tablet Galaxy Tab 4), but I have next problems:

  1. I can’t zoom with two fingers, on widget +/- works great but when I try to zoom with fingers just get one color grey div without any maps, and if I press + or - on widget maps come back

  2. I can’t move maps in any direction, it’s static. I would like to move with fingers in all directions but I can’t

  3. I can’t show markers, when I tap on markers nothing happened. When I click on PC on Ionic serve works great. Second problems I have with markers is that I should tap/click to show markers, I would like to be always on

  4. I can’t get distance to write on the screen, although distance has been shown when I press button twice.

This is my code, can anyone helps me? Thanks.

controller:

(function() {
    'use strict';

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

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

    function locationController($cordovaGeolocation) {

        var vm = this;
        vm.getRoute = getRoute;

        function getRoute() {
            vm.showData = false;
            vm.route = {};
            var options = {timeout: 10000, enableHighAccuracy: true};
            $cordovaGeolocation.getCurrentPosition(options).then(function(position){
                vm.latOrigin = position.coords.latitude;
                vm.longOrigin = position.coords.longitude;
                var directionsService = new google.maps.DirectionsService;
                var directionsDisplay = new google.maps.DirectionsRenderer;
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 15,
                    center: {lat: vm.latOrigin, lng: vm.longOrigin},
                    panControl: true,
                    zoomControl: true,
                   mapTypeControl: true,
                   scaleControl: true,
                   streetViewControl: true,
                   overviewMapControl: true,
                   rotateControl: true
                });

                directionsDisplay.setMap(map);
                directionsService.route({
                    origin: vm.latOrigin+","+vm.longOrigin,
                    destination: "44.008115,20.896861",
                    travelMode: 'WALKING'
                }, function(response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                        vm.route = response.routes[0];
                        vm.showDistance = vm.route.legs[0].distance.text;
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });
            });
            vm.showRoute = true;
        }
    }
})();

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?ionicCachebuster=59970" rel="stylesheet">
    <link href="css/style.css?ionicCachebuster=59970" rel="stylesheet">

  </head>
  <body ng-app="inception">

    <ion-nav-view>
      <ion-header-bar class="bar bar-header bar-calm">
        <h1 class="title text-center">One Beep Away</h1>
      </ion-header-bar>
      <ion-content scroll="false" data-tap-disabled="true">
        <div id="map"></div>
      </ion-content>
     </ion-nav-view>

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

    <script src="lib/ionic-material/dist/ionic.material.min.js?ionicCachebuster=59970"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js?ionicCachebuster=59970"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVYeH02dc5EyoYaqpYSFsogSlkOx2S2o4&sensor=true" async defer></script>

    <script src="cordova.js?ionicCachebuster=59970"></script>

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

  </body>
</html>

css:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.scroll {
    height: 300px;
}

#map {
    width: 100%;
    height: 300px;
}