Нужно построить автомобильный и пешеходный маршруты через google maps по двум точкам. Есть два поля ввода (от и до), и две кнопки (автомобильный маршрут и пеший). Для каждой кнопки есть своя функция. Все работает, только при построении нового маршрута не удаляется старый. Как сделать чтобы перед построением карта очищалась?
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(53.8374829,21.1518056),
gestureHandling: 'cooperative',
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: true,
};
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
function route1(from, to) {
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.WALKING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
function route2(from, to) {
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(
directionsRequest,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
new google.maps.DirectionsRenderer({
map: mapObject,
directions: response
});
}
else
$("#error").append("Unable to retrieve your route<br />");
}
);
}
$(document).ready(function() {
$("#walking button").click(function(event) {
event.preventDefault();
route1($("#route-from").val(), $("#route-to").val());
});
$("#driving button").click(function(event) {
event.preventDefault();
route2($("#route-from").val(), $("#route-to").val());
});
});