Search

Google Maps Dinamik İşaretçi Yeri Belirleme (Google Maps Dynamically Change Marker Position)



0 yorum

Google Maps İşaretçi Yerini Dinamik Değiştirme (Google Maps Dynamically Change Marker Position)

Merhaba arkadaşlar, uygulama geliştirirken karşıma çıkan bir durum hakkında makale yazacağım. Senaryoya göre kullanıcıya harita üzerinden yer seçme imkanı tanımamız gerekiyor. Kullanıcı yer seçimi yaptıktan sonra, harita üzerinde yerini değiştirmek isterse önceki işaretçinin yerini silip(marker remove), yalnızca yeni verinin konumunu belirten işaretçiyi ekranda göstermeliyiz. Bu senaryoyu gerçekleştiren kodu açıklamalarıyla birlikte aşağıda veriyorum.

JavaScript:
var map;
var myCenter = new google.maps.LatLng(37, 35); //Haritanın focuslanacağı alan
var markersArray = [];  //işaretçiler dizisini burada tutuyoruz

//markersArray içerisini temizler
function clearMarkers() {
    for (var i = 0; i < markersArray.length; i++) {
        markersArray[i].setMap(null);
    }
    markersArray.length = 0;
}


function initialize() {
    var mapProp = {
        center: myCenter, //Merkez Konumum
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapId"), mapProp);

    google.maps.event.addListener(map, 'click', function (event) { //Harita üzerindeki tıklamalar dinlenir
        placeMarker(event.latLng);  
    });
}

//İşaret ekle
function placeMarker(location) {
    clearMarkers(); //İşaret eklemeden hemen önce var olan işaretçileri kaldır
    var marker = new google.maps.Marker({
        position: location,
        map: map,
    });
    markersArray.push(marker);
    var infowindow = new google.maps.InfoWindow({
        content: 'Enlem: ' + location.lat() + '
Boylam: ' + location.lng()
    });
    infowindow.open(map, marker);
}

google.maps.event.addDomListener(window, 'load', initialize);

HTML:

 
 
 

0 yorum:

Yorum Gönder

Check Page Rank
DMCA.com