Bir öndeki yazımızda Google Map Api Direction ve Matrix Api mesafe matrisi kurulumunu anlatmıştık. Bu yazımda da map api nin kullanımını kısaca anlatacağım. Proje kısaca iki mesafe arasındaki kilometre ve süreyi hesaplayarak bizlere veriyor. Proje canlı çalışır durumdadır. Projemizde İstanbul Havaalanı ve Sabiha Gökçen Havaalanı’ndan transfer hizmeti veren bir uygulama yer alıyor. Noktadan noktaya da transfer hizmeti verildiği için tüm noktalardan istediğiniz noktaya uygun aracı belirlenen fiyat skalasında sunuyor. Bir taksi uygulaması gibi, mesafeye göre fiyatlandırma yapılıyor.
<div class="booking-frm" id="ride-bform">
<div class="field-outer">
<span class="fas fa-search" style="position: absolute !important; top: 10px !important; right: 25px !important;"></span>
<input type="text" id="location-1" name="origin" placeholder="Alınış yeri giriniz..." onclick="this.value = '';">
</div>
<div class="field-outer">
<span class="fas fa-search" style="position: absolute !important; top: 10px !important; right: 25px !important;"></span>
<input type="text" id="location-2" name="destination" placeholder="Bırakılış yeri giriniz..." onclick="this.value = '';">
</div>
<div class="field-outer">
<span class="fas fa-calendar-alt" style="position: absolute !important; top: 10px !important; right: 25px !important;"></span>
<input type="text" name="pickup_date" placeholder="Tarih Seçiniz" id="pickup_date">
</div>
<div class="field-outer">
<span class="far fa-clock" style="position: absolute !important; top: 10px !important; right: 25px !important;"></span>
<input type="text" name="pickup_time" placeholder="Saat Seçiniz" id="pickup_time">
</div>
<div id="lblVito" class="result-table"></div>
<button class="search-btn" type="button" onclick="calcRouteOneWay();">Uygun Araç Ara <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></button>
<div id="output" class="result-table">
<asp:Label runat="server" ID="lblSonuc1"></asp:Label><br />
<asp:Label runat="server" ID="lblSonuc2"></asp:Label><br />
<div class="pick_date info-outer"></div>
<br />
<div class="pick_time info-outer"></div>
</div>
</div>Html kısmı bu şekilde yer aldı. Bu tek yön yani tek gidiş için olan kısım.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNZHCWSsBHuNKd8og4IdiYyNNrREeQbZ0®ion=TR&language=tr&libraries=places"></script>
<script type="text/javascript">
function setCookie(name, value) {
var expires = "";
var date = new Date();
date.setTime(date.getTime() + (1 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
var myLatLng = { lat: 41.0039643, lng: 28.4517462 };
var mapOptions = {
center: myLatLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
document.getElementById("output").style.display = "none";
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
function calcRouteOneWay() {
var error = true;
if (document.getElementById("location-1").value == "") {
$("#location-1").addClass('errorClass');
error = false;
}
if (document.getElementById("location-2").value == "") {
$("#location-2").addClass('errorClass');
error = false;
}
if (document.getElementById("pickup_date").value == "") {
$("#pickup_date").addClass('errorClass');
error = false;
}
if (document.getElementById("pickup_time").value == "") {
$("#pickup_time").addClass('errorClass');
error = false;
}
if (error) {
var request = {
origin: document.getElementById("location-1").value,
destination: document.getElementById("location-2").value,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
//avoidFerries: false,
//avoidHighways: true,
//avoidTolls: true
}
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var km = result.routes[0].legs[0].distance.text.slice(0, -2);
var map = { ',': '.', '.': ',' };
km = km.replace(/[,.]/g, function (k) {
return map[k];
});
var _vito;
var _sprinter;
if (km >= 0 && km <= 49) { _vito = 10 * km; _sprinter = 11 * km; }
if (km >= 50 && km <= 99) { _vito = 8.5 * km; _sprinter = 9.5 * km; }
if (km >= 100 && km <= 599) { _vito = 3.25 * km; _sprinter = 4.25 * km; }
if (km >= 600 && km <= 1999) { _vito = 3 * km; _sprinter = 4 * km; }
var _vito2 = yuvarla(Math.ceil(_vito));
var _sprinter2 = yuvarla(Math.ceil(_sprinter));
//$("#output").html("<div class='result-table'><b>Nereden</b>:" + result.routes[0].legs[0].start_address + " <br><b>Nereye:</b> " + result.routes[0].legs[0].end_address + "<br><br> <b>Mesafe:</b> " + result.routes[0].legs[0].distance.text + "<br /><b>Süre:</b> " + result.routes[0].legs[0].duration.text + "<br><b>Vito</b>:" + _vito2 + "<br><b>Sprinter:</b>" + _sprinter2 + "</div>");
//document.getElementById("output").style.display = "block";
//directionsDisplay.setDirections(result);
var distance = result.routes[0].legs[0].distance.text;
var duration = result.routes[0].legs[0].duration.text;
setCookie("way", "one");
setCookie("date", document.getElementById("pickup_date").value);
setCookie("time", document.getElementById("pickup_time").value);
setCookie("kalkis", document.getElementById("location-1").value);
setCookie("varis", document.getElementById("location-2").value);
setCookie("_vito2", _vito2);
setCookie("_sprinter2", _sprinter2);
setCookie("distance", distance);
setCookie("duration", duration);
debugger;
location.href = 'rezervasyon';
}
else {
alert("Bu rota için fiyatımız bulunmamaktadır! Lütfen başka türlü bulmayı deneyin ya da +90 544 860 10 10 'u arayın!");
clearRoute();
}
});
}
}
function yuvarla(sayi) {
var a = sayi % 10;
if (a < 5) {
sayi = sayi + (5 - a);
}
else if (a < 10) {
sayi = sayi + (5 - a);
}
return sayi;
}
function clearRoute() {
document.getElementById("output").style.display = "none";
document.getElementById("location-1").value = "";
document.getElementById("location-2").value = "";
directionsDisplay.setDirections({ routes: [] });
}
var options = {
//types: ['(cities)', '(lodging)', '(geocode)', '(regions)', '(establishment)', '(address)'],
//types: ['(cities)'],
componentRestrictions: { country: 'tr' }
}
var input1 = document.getElementById("location-1");
var autocomplete1 = new google.maps.places.Autocomplete(input1, options);
var input2 = document.getElementById("location-2");
var autocomplete2 = new google.maps.places.Autocomplete(input2, options);
</script>yuvarla() fonksiyonu ile 5’e ve 10’a tamamlama özelliği gerekli oldu. 192 TL yerine 195 TL, 198 yerine 200 TL gösterme özelliği var.
request ile directionsService’den route alıyoruz.
var request = {
origin: document.getElementById("location-1").value,
destination: document.getElementById("location-2").value,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
//avoidFerries: false,
//avoidHighways: true,
//avoidTolls: true
}
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {var distance = result.routes[0].legs[0].distance.text;
var duration = result.routes[0].legs[0].duration.text; kodları ile de mesafe ve süre sonuçları gelmektedir.
Harita göstermek ve sonucu yani güzergahı göstermek için
//directionsDisplay.setDirections(result); kodunu kullanabilirsiniz.
Harita özelliğinde yer alan //types: ile de seçim yaptıracağınız alanları belirleyebilirsiniz. Ücretli yollar, otobanlar ve feribot gibi özel rotaları da kullanmak isterseniz avoid… değişkenlerine başvurabilirsiniz.
text.slice komutları ile de km ve dakika ifadelerini kaldırabilirsiniz.