Google Maps Konum Alma ve Rota Çizme

Google Maps Konum Alma ve Rota Çizme

İstek üzerine böyle bir yazı hazırlamaya karar verdim. Google maps api üzerinden şuan ki konumumuzu bulacağız ve bu konumdan seçtiğimiz bir yere rota çizeceğiz.

Yine ihtiyacımız olan jquery ve google maps api kütüphanemizi çağırıyoruz.

 

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=">
</script><script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

Konumumuzu bulan metot aşağıdaki gibi olacak;

	function konumBul() {
        var map = new google.maps.Map(document.getElementById('harita'), {
          center: {lat: 40.00, lng: 28.00},
          zoom: 6
        });
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

			var marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                    //: icon
                });
			
			var infowindow = new google.maps.InfoWindow();
			
            map.setCenter(pos);
			
			var content = "Konum bulundu"
			
			//konumumuzu harita üzerinde isaretler
			google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
                    return function() {
                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                    };
                })(marker, content, infowindow));
				
			//haritaya tikladigimizda tikladigimiz yerin koordinatlarini almamizi saglar
			google.maps.event.addListener(map, "click", function(event) {
				var lat = event.latLng.lat(); //enlem
				var lng = event.latLng.lng(); //boylam

				yer = new google.maps.LatLng(lat, lng);
				
				marker = new google.maps.Marker({
					position: yer,
					map: map
				});
				
				//baslangiç ve bitis noktasi olusturuyoruz.
				var data = [
                    { "enlem": position.coords.latitude, "boylam": position.coords.longitude },
                    { "enlem": lat, "boylam": lng },

				];
			
				//rotayi çizen metodu çagiriyoruz ve baslangiç bitis noktalarini gönderiyoruz.
				RotaCiz(data);
				
				//aldigimiz konumu görmek için isterseniz silebilirsiniz.
				alert("Enlem=" + lat + "; Boylam=" + lng);
			});	
				
				
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // enlem ve boylam alinamazsa
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: Enlem ve boylam alinamadi.' :
                              'Error: Tarayiniciniz desteklemiyor.');
      }

Konum bulan metodumuzun içinde harita üzerine tıklama olayı ve rotayı çizme metodunu çağırdık. Bu metotlar da aşağıdaki gibi olacak.

var gm = google.maps;
		
	function RotaCiz(data) {
	  var directionsService = new google.maps.DirectionsService;
	  var directionsDisplay = new google.maps.DirectionsRenderer;
	  
	  var map = new google.maps.Map(document.getElementById('harita'), {
		zoom: 10
	  });
	  directionsDisplay.setMap(map);
	  
	  calculateAndDisplayRoute(directionsService, directionsDisplay,data); //Rota hesaplama 
	  
	}

	function calculateAndDisplayRoute(directionsService, directionsDisplay,data) {
				


	  directionsService.route({
		//Baslangiç noktasi
		origin: {lat: data[0].enlem, lng: data[0].boylam}, 
		//Bitis noktasi
		destination: {lat: data[1].enlem, lng: data[1].boylam},
		optimizeWaypoints: true,
		//Rota üzerindeki hesaplamalarin neye göre yapilacagi (yürüyüs,araç,bisiklet)
		travelMode: google.maps.TravelMode.WALKING
	  }, function(response, status) {
		if (status === google.maps.DirectionsStatus.OK) {
		  directionsDisplay.setDirections(response);
		  var route = response.routes[0];

		} else {
		  window.alert('Rota çizilemedi ' + status);
		}
	  });
	}  

İki 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ü değiştirebilirsiniz.

Çalışan örneği buradan görebilirsiniz. Tüm kodları sayfa kaynağındna inceleyebilirsiniz.

Not: chorome tarayıcı üzerinde sunucu üzerinde ssl kurulu değilse hata alabilirsiniz https protokolü isteyecektir. explorer ve firefox da sorun çıkmayacaktır. Çözüm için The Google Maps Geolocation API kullanabilirsiniz.

Share this post

Comments (6)

  • yunus emre kaygsiz Reply

    Rotası çizilecek yolun iki noktasını da kullanıcının textten girmesini istiyorum bunu nasıl yapabilirim. İyi günler

    5 Mayıs 2017 at 09:10
  • yunus emre kaygsiz Reply

    İyi günler https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions
    ben bu adresteki uygulamayı yaptım. ama yol uzunluğunu hesaplayamıyorum yardım eder misiniz

    24 Mayıs 2017 at 17:15
    • Ahmet BAL Reply

      Tabi mail adresinize mesafe hesaplanmış halini gönderiyorum aklınıza takılan biryer olursa yine yazabilirsiniz. YOUR_API_KEY yazan yere kendi anahtarınızı yazmanız yeterli.

      24 Mayıs 2017 at 22:44
  • muhammed Reply

    hocam merhaba fazlaca amatörüm 🙂
    acaba google maps api ile veritabanına koordinat kaydetme veritabanından koordinat okuma örneği var mı elinizde ?internetten bulduklarım seviyemin üzerinde basit örnek bulamıyorum.

    6 Haziran 2017 at 11:22
    • Ahmet BAL Reply

      Merhaba, elimde hazır bir örnek yok ama yardımcı olabilirim yine de eğer vakit bulabilirsem. Mesela hangi programlama dili ve veritabanında yapmak istiyorsunuz? Direk ahmet.bal2000@gmail.com adresinden de ulaşabilirsiniz.

      6 Haziran 2017 at 22:21
  • kadir Reply

    Makaleniz baya bilgi verici paylaşım için teşekkür ederim.

    16 Ekim 2017 at 10:50

Bir Cevap Yazın

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


Powered by themekiller.com