Merhabalar aşağıdaki kod bloğumda 2 input mevcut inputlarda adresler seçilip butona bastığımda google distance ile 2 input arası mesafeyi ölçüyorum. Kodlarım sorunsuz çalışıyor ama benim isteğim buttona basmadan inputlara adresi girdiğim an otomatik ölçüm yapsın ve yeni inputa yazdırsın. Desteğiniz için teşekkür ederim.
Kodlarım
`<form id=“distance_form” name=“form1″>
<div class="form-group"><label>Nereden: </label>
<input class="form-control" id="from_places" placeholder="Başlangıç Adresi Giriniz"/>
<input id="origin" name="origin" required="" type="hidden"/>
<a class="form-control" onclick="getCurrentPosition()">Set Current Location</a>
</div>
<div class="form-group"><label>Nereye: </label>
<input class="form-control" id="to_places" placeholder="Varış Adresi Giriniz"/>
<input id="destination" name="destination" required="" type="hidden"/></div>
<div class="form-group" style="display:none;">
<label>Araç Seçiniz</label>
<select class="form-control" id="travel_mode" name="travel_mode" style="height:34px;">
<option value="DRIVING">Panelvan</option>
</select>
</div>
<input class="btn btn-primary" id="distance_form" name="form1" type="submit" value="Hesapla"/>
</form>`
Javascript kodum
` <script>
$(function () {
var origin, destination, map;
// add input listeners
google.maps.event.addDomListener(window, 'load', function (listener) {
setDestination();
initMap();
});
// init or load map
function initMap() {
var myLatLng = {
lat: 52.520008,
lng: 13.404954
};
map = new google.maps.Map(document.getElementById('map'), {zoom: 16, center: myLatLng,});
}
function setDestination() {
var from_places = new google.maps.places.Autocomplete(document.getElementById('from_places'));
var to_places = new google.maps.places.Autocomplete(document.getElementById('to_places'));
google.maps.event.addListener(from_places, 'place_changed', function () {
var from_place = from_places.getPlace();
var from_address = from_place.formatted_address;
$('#origin').val(from_address);
});
google.maps.event.addListener(to_places, 'place_changed', function () {
var to_place = to_places.getPlace();
var to_address = to_place.formatted_address;
$('#destination').val(to_address);
});
}
function displayRoute(travel_mode, origin, destination, directionsService, directionsDisplay) {
directionsService.route({
origin: origin,
destination: destination,
travelMode: travel_mode,
avoidTolls: true
}, function (response, status) {
if (status === 'OK') {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
} else {
directionsDisplay.setMap(null);
directionsDisplay.setDirections(null);
alert('Could not display directions due to: ' + status);
}
});
}
// calculate distance , after finish send result to callback function
function calculateDistance(travel_mode, origin, destination) {
var DistanceMatrixService = new google.maps.DistanceMatrixService();
DistanceMatrixService.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode[travel_mode],
unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
// unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
avoidHighways: false,
avoidTolls: false
}, save_results);
}
// save distance results
function save_results(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
$('#result').html(err);
} else {
var origin = response.originAddresses[0];
var destination = response.destinationAddresses[0];
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
$('#result').html("Sorry , not available to use this travel mode between " + origin + " and " + destination);
} else {
var distance = response.rows[0].elements[0].distance;
var duration = response.rows[0].elements[0].duration;
var distance_in_kilo = distance.value / 1000; // the kilo meter
var distance_in_mile = distance.value / 1609.34; // the mile
var duration_text = duration.text;
appendResults(distance_in_kilo, distance_in_mile, duration_text);
sendAjaxRequest(origin, destination, distance_in_kilo, distance_in_mile, duration_text);
}
}
}
// append html results
function appendResults(distance_in_kilo, distance_in_mile, duration_text) {
$("#result").removeClass("hide");
$('#in_mile').html("Mile: <span class='badge badge-pill badge-secondary'>" + distance_in_mile.toFixed(2) + "</span>");
$('#in_kilo').html("Km: <span class='badge badge-pill badge-secondary'>" + distance_in_kilo.toFixed(2) + "</span>");
$('#duration_text').html("Saat: <span class='badge badge-pill badge-success'>" + duration_text + "</span>");
}
// send ajax request to save results in the database
function sendAjaxRequest(origin, destination, distance_in_kilo, distance_in_mile, duration_text) {
var username = $('#username').val();
var travel_mode = $('#travel_mode').find(':selected').text();
$.ajax({
url: 'common.php',
type: 'POST',
data: {
username,
travel_mode,
origin,
destination,
distance_in_kilo,
distance_in_mile,
duration_text
},
success: function (response) {
console.info(response);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
// on submit display route ,append results and send calculateDistance to ajax request
$('#distance_form').submit(function (e) {
e.preventDefault();
var origin = $('#origin').val();
var destination = $('#destination').val();
var travel_mode = $('#travel_mode').val();
var directionsDisplay = new google.maps.DirectionsRenderer({'draggable': false});
var directionsService = new google.maps.DirectionsService();
displayRoute(travel_mode, origin, destination, directionsService, directionsDisplay);
calculateDistance(travel_mode, origin, destination);
});
});
// get current Position
function getCurrentPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(setCurrentPosition);
} else {
alert("Geolocation is not supported by this browser.")
}
}
// get formatted address based on current position and set it to input
function setCurrentPosition(pos) {
var geocoder = new google.maps.Geocoder();
var latlng = {lat: parseFloat(pos.coords.latitude), lng: parseFloat(pos.coords.longitude)};
geocoder.geocode({ 'location' :latlng }, function (responses) {
console.log(responses);
if (responses && responses.length > 0) {
$("#origin").val(responses[1].formatted_address);
$("#from_places").val(responses[1].formatted_address);
// console.log(responses[1].formatted_address);
} else {
alert("Cannot determine address at this location.")
}
});
}
</script>`