I want to do geolocation of each users, I add two fields latitude and langitude in the table users
this is my map page map.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 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="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsiDiIzQjg7U9JYPDVl8hnfZ7MwDcHDHg&signed_in=true&libraries=places&callback=initMap" async defer></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/directives.js"></script>
</head>
<body ng-app="starter" ng-controller="MapCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content scroll="false">
<map on-create="mapCreated(map)"></map>
</ion-content>
<ion-footer-bar class="bar-stable">
<a ng-click="initMap()" class="button button-icon icon ion-navigate"></a>
</ion-footer-bar>
<sebm-google-map-marker
*ngIf="party.location.lat"
[latitude]="party.location.lat"
[longitude]="party.location.lng">
</sebm-google-map-marker>
<script>
function initMap() {
var position = new google.maps.LatLng({lat: $scope.data.lat , lng: $scope.data.lang });
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: $scope.data.lat , lng: $scope.data.lang },
zoom: 15
});
var marker = new google.maps.Marker({
position: position,
map: map,
title: ""
});
var input = document.getElementById('map');
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
//anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function () {
marker.setVisible(false);
var place = autocomplete.getPlace();
if (place != undefined) {
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
console.log(place.geometry.location.toString());
$('#lat').val(lat);
$('#lng').val(lng);
}
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
});
}
</script>
</body>
</html>
and this is the mapController
Controllers.js
angular.module('starter.controllers', [])
.controller('MapCtrl', function($scope, $ionicLoading) {
$scope.mapCreated = function(map) {
$scope.map = map;
};
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
};
});
and this is my loginController
loginController.js
var app=angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){
console.log('test');
$stateProvider
.state('map', {
url: '/map',
templateUrl: 'map.html',
controller: 'MapCtrl'
})
$urlRouterProvider.otherwise('/index');
});
app.controller('loginCtrl', function ($scope,$http,$location,$state)
{
$scope.data = {};
$scope.postLogin = function ()
{
var data =
{
email: $scope.data.email,
password: $scope.data.password
};
$http.post("http://localhost/authproject/public/api/auth/login", data)
.then(
function(response){
// success callback
console.log('success');
$location.path('/map');
$scope.data.lang=response.latitude;
$scope.data.lang=response.langitude;
console.log('success');
},
function(response){
// failure callback
console.log('error');
alert('invalid user ');
//$location.path('/index');
}
);
}
});
I want to correct my code in order to put the marker in the position predefined of each user.