Mihalytch personal blog

Как я и обещал в первой части Знакомства с Google Maps API этого цикла, мы сейчас познакомимся с обработкой событий, добавлением/управлением объектами карты Google.

Как для регистрации обработчиков событий DOM и пользовательских событий, так и для их запуска в Google maps API есть пространство имен GEvent.  Сейчас мы воспользуемся для примера методом addListener(source, event, handler).  Этот метод регистрирует пользовательское событие event в источнике объекта source и вызывает обработчик handler.

Теперь назначим событию click обработчик, который будет создавать метки на карте. Затем мы научим эти метки позиционироваться путем перетаскивания их мышкой по самой карте и назначим удаление их из карты по даблклику по метке.

Теперь перейдем от теории к практической части:

/* Здесь мы будем хранить классы:
- GMap2 для создания карты;
- GClientGeocoder для получения геокодов для пользовательских адресов
*/
var map, geocoder;

function initialize_map () {
    /* Если браузер совместим */
    if (GBrowserIsCompatible()) {
        /* Создадим объект карты */
        map = new GMap2(document.getElementById("google_canvas"));
        geocoder = new GClientGeocoder();

        /* Установим координаты центра карты и начальный масштаб */
        map.setCenter(new GLatLng(37.4419, -122.1419), 5);

        /* Добавим элементы управления картой, воспользовавшись конструктором GLargeMapControl из класса GControl  */
        map.addControl(new GLargeMapControl());

        /* Добавим мини-карту обзора в углу основной карты */
        map.addControl(new GOverviewMapControl());

        /* Назначаем  onClickForMap() обработчиком события click  */
        GEvent.addListener(map, "click", onClickForMap);
    }
}

/* При нажатии на карту  */
function onClickForMap(overlay, latlng) {
    /* Если определен входной аргумент */
    if (latlng != null) {
        /* Определим координаты точки, в которой было вызвано событие  */
        geocoder.getLocations(latlng, addPointToMap);
    }
}

/* Непосредственно добавление точки с маркером на карту */
function addPointToMap (response) {
    /* Если произошла какая-либо ошибка при определении координат - выведем ошибку */
    if (!response || response.Status.code != 200) {
        alert("Status Code:" + response.Status.code);
    } else {
        /* Получим координаты */
        place = response.Placemark[0];
        /* Создадим точку на карте */
        point = new GLatLng(place.Point.coordinates[1],
        place.Point.coordinates[0]);

        /* Создадим маркер в этой точке */
        var marker = new GMarker(
            point,
            /* разрешим пользователю перетаскивать мышкой этот маркер  */
            {draggable: true}
        );

        /* При двойном клике по маркеру */
        GEvent.addListener(marker, "dblclick", function() {
            /* Вызовем метод  hide() который скроет маркер */
            this.hide();
        });

        /* Нанесем созданный нами объект на полотно карты */
        map.addOverlay(marker);
    }
}

initialize_map ();

То что из этого получиться вы можете посмотреть в примере.