Display google map directions when page load - angularjs

Question

At the moment i have an ionic app, and with angular i created a map that give directions from current user location to a predefined address, if user press "get directions". I will like to display the directions when page load without having to press that button.
This is the controller:
.controller('ContactCtrl', function ($scope, $ionicPlatform, uiGmapGoogleMapApi, $ionicPopup, $cordovaGeolocation) {
// uiGmapGoogleMapApi is a promise.
// The "then" callback function provides the google.maps object.
uiGmapGoogleMapApi.then(function (maps) {
var myLatlng = new google.maps.LatLng(51.51139, -0.2237284);
var mapOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// directions object -- with defaults
$scope.directions = {
origin: "",
destination: "12 High Street Kensington",
showList: false
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// instantiate google map objects for directions
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$ionicPlatform.ready(function () {
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (pos) {
map.setCenter((51.498265, -0.313515));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map
});
geocoder.geocode({
latLng: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
}, function (responses) {
if (responses && responses.length > 0) {
$scope.directions.origin = responses[0].formatted_address;
} else {
var alertPopup = $ionicPopup.alert({
title: 'Cannot determine address at this location!',
template: 'Please try again!'
});
alertPopup.then(function (res) {
console.log('Cannot determine address at this location!');
});
}
});
}, function (err) {
$ionicPopup.alert({
title: 'Unable to find your location!',
template: 'Please try again!'
});
});
});
$scope.map = map;
// get directions using google maps api
$scope.getDirections = function () {
var request = {
origin: $scope.directions.origin,
destination: $scope.directions.destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap($scope.map);
directionsDisplay.setPanel(document.getElementById('directionsList'));
$scope.directions.showList = true;
} else {
var alertPopup = $ionicPopup.alert({
title: 'Cannot find address at this location!',
template: 'Please try again!'
});
alertPopup.then(function (res) {
console.log('Google route unsuccesful! Please try again!');
});
}
});
}
});
})
<div class="panel-body">
<div id='map' data-tap-disabled="true">
</div>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Origin Address (A)</span>
<input type="text" id="origin" placeholder="Origin address" ng-model="directions.origin"/>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Destination Address (B)</span>
<input type="text" id="destination" placeholder="Destination address" ng-model="directions.destination"/>
</label>
</div>
<div class="pad10">
<button class="button button-block button-assertive" ng-click="getDirections()">Get Directions</button>
</div>
<div id="directionsList" ng-show="directions.showList" class="pad10"></div>
</div>
UPDATE
When i try your code i get the following message in console:
getCurrentPosition() and watchPosition() are deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
ionic.bundle.js:20306 TypeError: map.setCenter is not a function
at $cordovaGeolocation.getCurrentPosition.then.$ionicPopup.alert.title (controllers.js:306)
at processQueue (ionic.bundle.js:21888)
at ionic.bundle.js:21904
at Scope.$eval (ionic.bundle.js:23100)
at Scope.$digest (ionic.bundle.js:22916)
at ionic.bundle.js:23139
at completeOutstandingRequest (ionic.bundle.js:13604)
at ionic.bundle.js:13984(anonymous function) # ionic.bundle.js:20306
services.js:65 user Id = c621662e-7389-4c4f-9677-35c1e126f6be
2controllers.js:356 Google route unsuccesful! Please try again!

Answer 1

maybe call getDirection in your init promise?
.controller('ContactCtrl', function ($scope, $ionicPlatform, uiGmapGoogleMapApi, $ionicPopup, $cordovaGeolocation) {
// uiGmapGoogleMapApi is a promise.
// The "then" callback function provides the google.maps object.
uiGmapGoogleMapApi.then(function (maps) {
var myLatlng = new google.maps.LatLng(51.51139, -0.2237284);
var mapOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// directions object -- with defaults
$scope.directions = {
origin: "",
destination: "12 High Street Kensington",
showList: false
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
// instantiate google map objects for directions
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$ionicPlatform.ready(function () {
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (pos) {
$scope.map.setCenter((51.498265, -0.313515));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: $scope.map
});
geocoder.geocode({
latLng: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
}, function (responses) {
if (responses && responses.length > 0) {
$scope.directions.origin = responses[0].formatted_address;
} else {
var alertPopup = $ionicPopup.alert({
title: 'Cannot determine address at this location!',
template: 'Please try again!'
});
alertPopup.then(function (res) {
console.log('Cannot determine address at this location!');
});
}
});
$scope.getDirections();
}, function (err) {
$ionicPopup.alert({
title: 'Unable to find your location!',
template: 'Please try again!'
});
});
});
// get directions using google maps api
$scope.getDirections = function () {
var request = {
origin: $scope.directions.origin,
destination: $scope.directions.destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap($scope.map);
directionsDisplay.setPanel(document.getElementById('directionsList'));
$scope.directions.showList = true;
} else {
var alertPopup = $ionicPopup.alert({
title: 'Cannot find address at this location!',
template: 'Please try again!'
});
alertPopup.then(function (res) {
console.log('Google route unsuccesful! Please try again!');
});
}
});
}
});
})