Google Maps Api Nokta Belirleme | Pin Sürükleme

Merhabalar;

Bu makale de google tarafından sağlanan maps javascript api kullanarak kullanıcının harita üzerinde nokta belirlemesini sağlayacağız. Bu nokta bir pin yardımıyla sürüklenebilir olacak ve kullanıcı bu pini sürükleyerek işaretlemek istediği noktaya getirecek.

Pin her sürüklendiğinde gizli bir şekilde konumlandırdığımız 2 input’a bu konuma ait x ve y değerlerini kaydedeceğiz. Son olarak ise bu değerleri veritabanımıza ekleyerek istediğimiz bir biçimde kullanmak üzere hazır bekleteceğiz.

Öncelikle https://cloud.google.com/maps-platform/#get-started  adresinden maps javascript api key’inizi alın ve kotanızın gereksiz dolmaması için gerekli kısıtlamaları uygulayın.

Daha sonra sayfamıza haritamızı ekleyelim.

<script>

    var marker;
    var infowindow;
    
    first_lat = -0.2761726; // Başlangıç kordinatları - x
    first_lng = 158.857274; // Başlangıç kordinatları - y

    function myMap() {
        var mapCanvas = document.getElementById("map_canvas");
        var myCenter=new google.maps.LatLng(first_lat,first_lng);
        var mapOptions = {
            center: myCenter, zoom: 17
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
         marker = new google.maps.Marker({
        position: new google.maps.LatLng(first_lat,first_lng),
                map: map,
                draggable:true,
            animation: google.maps.Animation.DROP,
            }); 

          marker.addListener('drag', handleEvent);
    marker.addListener('dragend', handleEvent);

     infowindow = new google.maps.InfoWindow({
            content: "Bu noktayı sürükleyerek istediğiniz konumu işaretleyin"
        });
        infowindow.open(map,marker);

        google.maps.event.addListener(map, 'click', function(){
            infowindow1.close(map, marker1);
        });


               }

               function handleEvent(event) {
    document.getElementById('map_lat').value = event.latLng.lat();
    document.getElementById('map_lng').value = event.latLng.lng();
}

    function placeMarker(map, location) {
        if (!marker || !marker.setPosition) {
            marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable:true,
            animation: google.maps.Animation.DROP,
            });
        } else {
            marker.setPosition(location);
        }
        if (!!infowindow &amp;&amp; !!infowindow.close) {
            infowindow.close();
        }
        
        document.getElementById("map_lat").value = location.lat();
        document.getElementById("map_lng").value = location.lng();
        document.getElementById("maps_notice").innerHTML  = 'NOKTAYI DEĞİŞTİRMEK İÇİN YENİ BİR ALANA TIKLAYIN';

        infowindow = new google.maps.InfoWindow({
            content: "Bu nokta sitemiz üzerindeki detay sayfanızda adresiniz olarak gösterilecektir."
        });
        infowindow.open(map,marker);
    }


</script>
<script type="text/javascript">
  document.getElementById('map_lat').value = <?=$lat?>;
    document.getElementById('map_lng').value = <?=$lng?>;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_ANAHTARINIZ&amp;callback=myMap"></script>

<script> taglarının hemen altında bulunan first_lat ve first_lng değişkenlerimiz sayfa ilk yüklendiğinde haritanın hangi konumdan başlayacağını belirlemek için kullanılıyor. Buna göre istediğiniz x ve y değerlerini bu değişkenlere tanımlayabilirsiniz.

Haritayı sayfamıza ekledikten sonra haritadan aldığımız x ve y değerlerini sayfamızda tutmak için 2 tane <input> oluşturalım.

<input style="pointer-events: none;"  type="text" name="lat" id="map_lat">
<input style="pointer-events: none;"  type="text" name="lng" id="map_lng">

Bu 2 <input> ‘un görünmemesini istiyorsanız style etiketinin içerisini “display:none” olarak belirleyebilirsiniz.

Son olarak sayfamızı çalıştıralım ve haritamızın çalışıp çalışmadığını kontrol edelim.

Gördüğünüz gibi hazırladığımız küçük kod parçacığı sorunsuz bir şekilde çalışıyor. Pin, mouse yardımıyla sürüklenerek istenilen konum işaretleniyor. Aşağı da bulunan 2 input’ta ise konuma ait x ve y değerleri her sürükleme işlemi yapıldığında tekrar güncelleniyor.

Bu makale de google maps api kullanarak bir harita oluşturduk ve bu haritaya sürüklenebilen bir pin ekleyerek kullanıcımızın istediği noktayı işaretlemesini sağladık. Siz de bu basit sistemi geliştirebilir ve ek birkaç fonksiyon ekleyebilirsiniz. Konu ile alakalı sorularınızı ve fikirlerinizi yorum olarak yazabilirsiniz. Makaleye oy verirseniz sevinirim. İyi günler dilerim.