I'm trying to create a script in JS and HTML5. I need to solve the following problem:
The user opens the page and the map appears in a predefined place. He then clicks on an input and enters his location, (the input is above the map), then he clicks a search button, and instantly, a route is drawn from the point where it is, to the place that was already previously defined. (eg, a company).
My code looks like this:
var map;
var directionsService = new google.maps.DirectionsService();
var info = new google.maps.InfoWindow({maxWidth: 840});
var marker = new google.maps.Marker({
title: 'AUAU MIAU PETSHOP',
icon: 'marker.png',
position: new google.maps.LatLng('-18.894756', '-48.263564')
});
function initialize() {
var options = {
zoom: 15,
center: marker.position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_content')[0], options);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
info.setContent('Avenida Bias Fortes, 382 - Lourdes, Belo Horizonte - MG, 30170-010, Brasil');
info.open(map, marker);
});
}
$(document).ready(function() {
$('#form_route').submit(function() {
info.close();
marker.setMap(null);
var directionsDisplay = new google.maps.DirectionsRenderer();
var request = {
origin: $("#route_from").val(),
destination: marker.position,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
}
});
return false;
});
});#map_content {
height: 350px;
}<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form action="" method="post" id="form_route">
<label>Origem:
<input type="text" id="route_from" size="50" />
</label>
<input type="submit" value="Traçar rota" />
</form>
<div id="map_content"></div>How can I adapt it to solve my problem?