Ionic google maps zooming, moving and markers showing issue

Question

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:

I can't zoom with two fingers, on widget +/- works great but when I try to zoom with fingers just get one color div without any maps, and if I press + or - on widget maps come back
I can't move maps in any direction, it's static. I would like to move with fingers in all direction
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
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.

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

             <div class="row" ng-if="locCtr.showRoute">
                <div class="col-100 text-center">Distance: {{locCtr.showDistance}}</div>
            </div>
            <div id="map" draggable="true"></div>
              </div>
           </div>
         </ion-content>

        </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="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVYeH02dc5EyoYaqpYSFsogSlkOx2S2o4&sensor=true" async defer></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>

      </body>
    </html>

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

                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;

        }


    }
})();

css

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

.scroll {
    height: 100%;
}

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

Answer 1

I stuck with this issue too and I found that the latest version of Google map API 3.26 causes this issue, I try a older version of it (3.24) and everything work as expected. But this version will be deprecated someday in the future and we will have to use the latest version soon when the 3.26 version become the Frozen version. https://maps.googleapis.com/maps/api/js?v=3.24

Ionic google maps zooming, moving and markers showing issue

Question

1 answers

solution1
0 2016-09-09 11:07:25

Ionic google maps zooming, moving and markers showing issue

Question

1 answers

solution1 0 2016-09-09 11:07:25

solution1
0 2016-09-09 11:07:25