Пример использования HTML5 drag-and-drop в API Google Maps v3

Автор: | 27.02.2013

Не так давно в блоге API Яндекс.Карт была заметка «Пример использования HTML5 drag-and-drop в API Яндекс.Карт».

Пользователи могут добавлять метки простым перетаскиванием на карту.

У меня возник вопрос, а как тоже самое сделать в API Google Maps v3.

Предлагаю Вам решение.

Метки на карте - Пример использования HTML5 drag-and-drop в API Google Maps v3

Посмотреть пример в работе

С правой стороны от карты расположены иконки меток трех видов: бар, кафе и ресторан.

Кликаем мышью по одной из них и перетаскиваем на карту в нужное место.

Если щелкнуть по добавленной метке, мы увидим координаты ее в балуне.

Открытый балун с координатами - Пример использования HTML5 drag-and-drop в API Google Maps v3

Работа примера проверена в следующих браузерах: Google Chrom 24.0.1312.57, Firefox 18.0.2, Opera 12.0, Internet Explorer 9, Yandex 1.5.1104.222

Загрузить архив с кодом примера

Для написания заметки использовался пример «Drag Objects from the Document to the Map (Maps API v3)».

Пример использования HTML5 drag-and-drop в API Google Maps v3: 2 комментария

  1. Рома

    Хорошая вещь — можно скомпоновать с другим уроком — по определению координат…

  2. Рома

    Хорошо бы знать — что именно не будет работать в старых браузерах, не поддерживающих хтмл5…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *