Menu
Using AngularJS and the ui-gmap-google-map directive (http://angular-ui.github.io/angular-google-maps/#!/) I've created a google map that plots the route to drive. When I try to plot a different route, the first route remains on the map. I've tried directionsDisplay.setMap(null); to remove the old route, but this isn't working. Can anyone help?
Here is the relevant part of my controller code:
uiGmapIsReady.promise().then(function (map_instances) {
$scope.mapRef = $scope.map.control.getGMap();
});
$scope.getDirections = function (lat, long, origin, type) {
uiGmapGoogleMapApi.then(function (maps) {
var directionsService = new maps.DirectionsService();
var directionsDisplay = new maps.DirectionsRenderer();
if (origin == "" || type == "geo") {
origin = $scope.geoPosition.coords.latitude + ", " + $scope.geoPosition.coords.longitude;
}
var request = {
origin: origin,
destination: lat + ", " + long,
travelMode: maps.TravelMode['DRIVING'],
optimizeWaypoints: true
};
directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setMap(null);
directionsDisplay.setMap($scope.mapRef);
directionsDisplay.setDirections(response);
} else {
console.log('Directions request failed due to ' + status);
}
});
});
}
252
I know you are working with ui-map, but with ngmap, you may have less problem
The following is example with ngmap showing two directions and you can toggle it to show and hide directions.
http://plnkr.co/edit/Sv9Q4A?p=preview
<!doctype html>
<html ng-app="ngMap">
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="http://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script>
angular.module('ngMap').controller('MyCtrl', function($scope){
var vm = this;
vm.toggle = function() {
vm.show = !vm.show;
$scope.map.directionsRenderers.d1.setMap(vm.show ? $scope.map : null);
}
})
</script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-controller='MyCtrl as vm'>
<map zoom="14" center="37.7699298, -122.4469157">
<directions id="d1" origin="toronto" destination="markham"></directions>
<directions id="d2" origin="etobicoke" destination="vaughn, on"></directions>
</map>
<a href="" ng-click="vm.toggle()">show/hide direction</a>
</body>
</html>
Btw, I am the creator of ngMap.
197
The issue you have is that you keep creating
var directionsDisplay = new maps.DirectionsRenderer(); each time you get a new direction. Instead what you should do is create that variable when you initiate the Controller and then update it later on. I created a plunker demo
You can see if this update to your code helps
uiGmapIsReady.promise().then(function (map_instances) {
$scope.mapRef = $scope.map.control.getGMap();
uiGmapGoogleMapApi.then(function (maps) {
$scope.directionsDisplay = new maps.DirectionsRenderer();
});
});
$scope.getDirections = function (lat, long, origin, type) {
uiGmapGoogleMapApi.then(function (maps) {
var directionsService = new maps.DirectionsService();
if (origin == "" || type == "geo") {
origin = $scope.geoPosition.coords.latitude + ", " + $scope.geoPosition.coords.longitude;
}
var request = {
origin: origin,
destination: lat + ", " + long,
travelMode: maps.TravelMode['DRIVING'],
optimizeWaypoints: true
};
directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
$scope.directionsDisplay.setMap(null);
$scope.directionsDisplay.setMap($scope.mapRef);
$scope.directionsDisplay.setDirections(response);
} else {
console.log('Directions request failed due to ' + status);
}
});
});
}
Hope this helps!!!
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
