Zarządzanie markerami google maps

Zaprezentuję prosty przykład zarządzania markerami w google maps. Opis działanie: klinięcie lewym przyciskiem myszy dodaje marker do mapy, kliknięcie prawym przyciskiem usuwa. Dodatkowo w divie o id len wyświetlać będziemy liczbę aktualnie widocznych na mapie markerów.
Najpierw w pliku html w sekcji body dodajmy dwa kontenery.

<div id="map" style=" width: 600px; height: 600px;"></div>
<div id="len"></div>
Załączamy w pliku html w sekcji head również google maps i jQuery. Plik javascript przedstawia się następująco.
var map;
var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(46.87916, -3.32910),
    mapTypeId: 'roadmap'
};
map = new google.maps.Map($('#map')[0], myOptions);

var markers = {};

var getMarkerUniqueId = function(lat, lng) {
    return lat + '_' + lng;
}

var getLatLng = function(lat, lng) {
    return new google.maps.LatLng(lat, lng);
};

var addMarker = google.maps.event.addListener(map, 'click', function(e) {
    var lat = e.latLng.lat(), lng = e.latLng.lng();
    var markerId = getMarkerUniqueId(lat, lng);
    var marker = new google.maps.Marker({
        position: getLatLng(lat, lng),
        map: map,
        id: 'marker_' + markerId
    });
    markers[markerId] = marker;
    document.getElementById('len').innerHTML=Object.size(markers);
    bindMarkerEvents(marker);
});

var bindMarkerEvents = function(marker) {
    google.maps.event.addListener(marker, "rightclick", function (point) {
        var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng());
        var marker = markers[markerId];
        removeMarker(marker, markerId);
    });
};

var removeMarker = function(marker, markerId) {
    marker.setMap(null);
    delete markers[markerId];
    document.getElementById('len').innerHTML=Object.size(markers);
    
};

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};
Tworzymy mapę w divie o id map. Markery będziemy zapisywać w obiekcie markers. Tworzymy też kilka pomocniczych funkcji. Koncepcja polega na nadawaniu markerów unikatowych identyfikatorów podczas ich dodawania (funkcja addMarker). Na ich podstawie usuwamy później markery (funkcja removeMarker). Funkcja bindMarkerEvents przypisuje zdarzenie prawego kliknięcia (rightclick) do markerów.

Komentarze 0

Dodaj komentarz