@Abzalassembekov wrote:
Using Ionic 1. Geolocation plugin is not working. Updated to the latest version.
Safari Web Inspector showing:[blocked] Access to geolocation was blocked over insecure connection to http://localhost:8080. ionic.native.min.js:7:5600 (anonymous function) (ionic.native.min.js:7:5600) (anonymous function) (ionic.native.min.js:7:5264) Q (ionic.bundle.js:29396) s (ionic.native.min.js:7:5582) (anonymous function) (controllers.js:111) (anonymous function) instantiate (ionic.bundle.js:18015) $controller (ionic.bundle.js:23417) appendViewElement (ionic.bundle.js:59908) render (ionic.bundle.js:57901) init (ionic.bundle.js:57821) render (ionic.bundle.js:59767) register (ionic.bundle.js:59725) updateView (ionic.bundle.js:65400) (anonymous function) (ionic.bundle.js:65377) $broadcast (ionic.bundle.js:30723) (anonymous function) (ionic.bundle.js:52162) processQueue (ionic.bundle.js:29132) (anonymous function) (ionic.bundle.js:29148) $digest (ionic.bundle.js:30216) $apply (ionic.bundle.js:30508) done (ionic.bundle.js:24829) completeRequest (ionic.bundle.js:25027) requestLoaded (ionic.bundle.js:24968)Code:
.controller('dislocationCtrl', function($scope,$http,$ionicLoading,$ionicHistory,$state,$timeout,$stateParams,$ionicScrollDelegate,$timeout,$ionicPopup,$cordovaGeolocation){ alert("works"); var posOptions = {timeout: 10000, enableHighAccuracy: false}; $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) { var lat = position.coords.latitude; var long = position.coords.longitude; $scope.lat = position.coords.latitude; $scope.lng = position.coords.longitude; alert("lat: "+$scope.lat); //gmaps var locations = [ ['London Eye', 51.503510, -0.119434, 5], ['Charing Cross', 51.507383, -0.127202, 4], ['Leicester Square', 51.511336, -0.128361, 3], ['Euston Station', 51.526825, -0.132395, 2], ['Kings Cross Station', 51.530616, -0.123125, 1] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng($scope.lat, $scope.lng), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; var markers = new Array(); for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); markers.push(marker); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } function AutoCenter() { // Create a new viewpoint bound var bounds = new google.maps.LatLngBounds(); // Go through each... $.each(markers, function (index, marker) { bounds.extend(marker.position); }); // Fit these bounds to the map map.fitBounds(bounds); } AutoCenter(); //gmaps var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng($scope.lat,$scope.lng); var request = { latLng: latlng }; }, function(err) { }); var watchOptions = {timeout : 3000, enableHighAccuracy: false}; var watch = $cordovaGeolocation.watchPosition(watchOptions); })app.js contains in the beginning :
angular.module('starter', ['ionic', 'starter.controllers','ngCordova', 'ionic.native'])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 rel="manifest" href="manifest.json"> <!-- un-comment this code to enable service worker <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('Error', err)); } </script>--> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="bower_components/framework7/dist/css/framework7.ios.min.css"> <link rel="stylesheet" href="bower_components/swipebox/src/css/swipebox.css"> <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/framework7/dist/js/framework7.min.js"></script> <script type="text/javascript" src="bower_components/swipebox/src/js/jquery.swipebox.min.js"></script> <script type="text/javascript" src="bower_components/jquery-validation/dist/jquery.validate.min.js"></script> <script type="text/javascript" src="bower_components/Tweetie/tweetie.min.js"></script> <script type="text/javascript" src="bower_components/chartjs/Chart.js"></script> <script type="text/javascript" src="assets/js/jflickrfeed.min.js"></script> <script type="text/javascript" src="assets/js/min/app.js"></script> <link rel="stylesheet" href="assets/css/app.css"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="js/ionic.native.min.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/ng-cordova.js"></script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3PmPJo-lo9Js-5C8culAu2b8S3EctusE"></script> </html>
Posts: 2
Participants: 1