Хочу построить маршрут на карте от указанного пользователем в поле "start" до места, которое задаю я.
Есть карта :
<section id="cd-google-map">
<div id="google-container"></div>
<div id="cd-zoom-in"></div>
<div id="cd-zoom-out"></div>
</section>
и форма :
<form action="" onsubmit="calcRoute();" id="start">
<input type="text" id="start" value="">
<input type="submit" value="Проложить маршрут">
</form>
В коде:
jQuery(document).ready(function($){
//set your google maps parameters
var latitude = 59.938615,
longitude = 30.36936,
map_zoom = 17;
var style= [//какие-то стили]
//set google map options
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: map_zoom,
panControl: false,
zoomControl: false,
mapTypeControl: false,
scrollwheel: false,
styles: style,
}
//init map
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('google-container'), map_options);
directionsDisplay.setMap(map);
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: "59.938615,30.36936",
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
});
Подскажите пожалуйста - что не так? При клике на "Проложить маршрут" просто обновляется страница..