Ruchomy marker w google maps api v3

Dodawanie markerów do mapy googla nie jest zbyt trudne. Drobne problemy mogą pojawić w momencie, gdy zechcemy dodać marker, który da się przesuwać. Taka sytuacja będzie miała miejsce, gdy mapka będzie służyła np. do wskazywania jakiegoś określonego miejsca, a geocoder będzie wstępnie określać obszar. Główne założenia: marker da się przesunąć przy pomocy drag&drop, można go przesunąć klikając od razu na mapie oraz można go przesunąć na podstawie współrzędnych geocodera.

Na początku skryptu definiujemy zmienną marker. Zmienna ta będzie przechowywać odpowiedni obiekt i pozwoli określić czy marker ma być wstawiony czy przesunięty. Do mapy podpinamy wydarzenie click, którego zadaniem będzie dodawanie markera. Na koniec sam marker tworzymy dodając do opcji pozycję dragable: true. Całość może wyglądać następująco:

var map ;
var marker ;

function initialize() {
    lat = 52 ;
    long = 33 ;
    var latlng = new google.maps.LatLng(lat, long);
    var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    ;
    map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        add_marker(event.latLng, 'miejsce', 'opis' );
    }
    );
}

function add_marker( pos, pos_title, pos_str ) {
    if( marker != null ) {
        marker.setPosition( pos ) ;
    } else {
        marker = new google.maps.Marker( {
            position: pos,
            map: map,
            draggable: true,
            title: pos_title
        }
        );
    }
}

Funkcję initialize() wywołujemy po załadowaniu dokumentu. Jeżeli wszystko jest dobrze, to marker będzie się przesuwać po mapie (podpiętej pod diva z id map_canvas) zgodnie z kliknięciami oraz zgodnie z ruchami myszki (o ile został chwycony).

Potrzebny jeszcze będzie kod pozwalający zapisywać położenie markera w ukrytym polu (trzeba będzie lekko zmienić funkcję add_marker):

function updateMarkerPosition(latLng) {
    $("#ID_POLA").val( [
    latLng.lat(),
    latLng.lng()
    ].join(', '));
}

/* zmieniona wersja wcześniejszego add_marker */
function add_marker( pos, pos_title, pos_str ) {
    if( marker != null ) {
        marker.setPosition( pos ) ;
        updateMarkerPosition( pos ) ;
    } else {
        marker = new google.maps.Marker( {
            position: pos,
            map: map,
            draggable: true,
            title: pos_title
        }
        );
        updateMarkerPosition( pos ) ;
        google.maps.event.addListener(marker, 'drag', function() {
            updateMarkerPosition(marker.getPosition());
        }
        );
    }
}

Teraz każde kliknięcie na mapie lub przesunięcie markera spowoduje wpisanie do #ID_POLA nowego położenia (w razie potrzeby współrzędne można umieścić w dwóch różnych polach, wystarczy odwołać się do latLng.lat() i latLng.lng()). Jeżeli mapka będzie służyła także do edycji wcześniej oznaczonych miejsc, to w initialize() należy dodać odczyt zapisanego położenia i wywołanie na samym końcu add_marker z odpowiednimi parametrami: add_marker( new google.maps.LatLng(lat, long), 'poprzednie polozenie’, 'opis’ );

• Tweet
• Pin It