@Glisovic wrote:
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:
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
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
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.
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; }
Posts: 1
Participants: 1