Google Maps Rota Çizme

Google Maps Rota Çizme

Daha önceki yazılarda google maps api key ve marker kullanımı hakkında bilgi vermiştim.  Şimdi ise google haritalarda rota çizmeyi anlatacağım. Harita üzerinde birden fazla duraklama noktası belirleyerek bir rota çizebilir ve bu noktalar arası mesafeleri ölçebiliriz. Öncelikle google maps javascript api kütüphanesini çağırmamız gerekiyor. Burda dikkat edilmesi gereken konu api key kullanılmadığında noktalarla ilgili bir kısıtlama var https://developers.google.com/maps/pricing-and-plans/#details adresinden bilgi edinebilirsiniz. Api key nasıl alınır görmek için buraya tıklayın.

 

<script src="http://maps.googleapis.com/maps/api/js?signed_in=true" async="" defer="defer"></script><script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

Html kodlarımız aşağıdaki gibi olacak

<div id="map"></div>
    <div id="right-panel">
    <div id="ozet-panel"></div>
    </div>

Rota hesaplama ve harita oluşturma kodlarımız aşağıdaki gibidir.

<script>// <![CDATA[
$( document ).ready(function() {
  RotaCiz();
});

var gm = google.maps;
	
function RotaCiz() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);
  
  calculateAndDisplayRoute(directionsService, directionsDisplay); //Rota hesaplama 
  
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var data = [
                    { "enlem": 41.001456, "boylam": 28.910479 },
                    { "enlem": 41.002013, "boylam": 28.912413 },

            ];
			
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < data.length; i++) {
      waypts.push({
        location: { lat: data[i].enlem, lng: data[i].boylam},
        stopover: true
      });
    
  }

  directionsService.route({
    //Başlangıç noktası
    origin: {lat: 41.024757, lng: 28.655658}, 
	//Bitiş noktası
    destination: {lat: 41.01799975, lng: 28.6734554166667},
	//Güzergah üzerindeki noktalar
    waypoints: waypts,
    optimizeWaypoints: true,
	//Rota üzerindeki hesaplamaların neye göre yapılacağı (yürüyüş,araç,bisiklet)
    travelMode: google.maps.TravelMode.WALKING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var ozet = document.getElementById('ozet-panel');
      ozet.innerHTML = '';
	  
	  
	  
      // Rota bilgileri
      for (var i = 0; i < route.legs.length; i++) {
        var rota = i + 1;
        ozet.innerHTML += '<b>Rota: ' + rota +
            '</b>
';
        ozet.innerHTML += '<b>Mesafe:</b> ' + route.legs[i].distance.text +'
';
		ozet.innerHTML += '<b>Süre:</b> ' + route.legs[i].duration.text + '





<hr>







';
      }
    } else {
      window.alert('Rota çizilemedi ' + status);
    }
  });
}
// ]]></script>

Çalışan örneği görmek için burayı tıklayın.

Google Maps Rota Çizme

Google Maps Rota Çizme

Share this post

Comments (7)

  • Burak Mısırlıoğlu Reply

    Merhaba, ben real time devamlı bir rota oluşturacak (başlangıç noktası sabit, yeni değer geldikçe rotayı uzatabilecek) bir sistem için nasıl bir yöntem uygulanması gerekiyor. Yardımcı olabilir misiniz?

    13 Aralık 2016 at 11:29
    • kirman Reply

      Merhaba biraz geç oldu kusura bakmayın. İstedğiniz seyi yapmanın yolu koordinatın her değiştiği anı yakalamak. Genellikle koordinatlar veritabanına eklenir ve her güncellemede veri tabanı kontrol edilir. Bunu otomatik olarak yapmak için node js kullanabilirsin bu sayede veritabanına her kayıt atıldığına haritayı güncelleyebilirsin. Eğer .net ortamında geliştirme yapıyorsan SignalR kullanabilirsin.

      22 Ocak 2017 at 01:55
  • Süleyman Reply

    Selamlar hocam, konumları otomatik belirlemek yerine A noktasını kişinin suanki konumu B noktasını ise seçtiği bir nokta olarak nasıl alabiliriz.

    19 Ocak 2017 at 11:07
    • kirman Reply

      Selamlar, sorunuzun cevabı için yeni bir yazı hazırladım buradan erişebilirsiniz.

      22 Ocak 2017 at 01:40
  • Google Maps Konum Alma ve Rota Çizme – Ahmet BAL Reply

    […] mesafe arasındaki uzaklığı varış sürelerini rota çizme örneğinde anlatmıştım. isterseniz araya başka noktalar eklerek de rotanızın yönünü […]

    22 Ocak 2017 at 01:19
  • yunus emre kaygsiz Reply

    Selam, yer bilgilerini kullanıcı yazarak girmesini istiyorum bunu nasıl yapabilirim

    4 Mayıs 2017 at 19:34

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Powered by themekiller.com