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

Не так давно в блоге 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)».

  • Гость: Хорошая вещь - можно скомпоновать с другим уроком - по определению координат...
  • Гость: Хорошо бы знать - что именно не будет работать в старых браузерах, не поддерживающих хтмл5...
  • Технарь: А как потом работать с созданными маркерами? Например, как удалить, скрыть, показать или занести координаты маркера в БД?
  • Технарь: Как при показе определять, что этот маркер желтый или красный?
  • Gran Torino: Ну а как сохранять что ли потом эту карту с расставленными маркерами? А то толку, наставил, обновил и нету ничего.