Добавление маркера на карту Google Maps

Материал из Справочник Web-языков.

Маркеры применяются для обозначения точек на карте Google Maps.

Возможно размещение сразу множества маркеров на одной карте.

[править] Установка маркера

Для установки маркера на карте достаточно задать его широту и долготу. Это основные обязательные основные характеристики маркера:

function GMapInit() { // Инициализация класса Google Maps и расположение карты в слое GMapContainer var map = new GMap2(document.getElementById("GMapContainer")); // Задаем центр выводимой области карты map.setCenter(new GLatLng(54.61711404944475, 39.70939636230469), 14); // Широта, долгота и коэффициент // увеличения цента (! центра? !) (обязательный параметр) // Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469)); map.addOverlay(marker); }

Выполнить пример (addmarkers_main.html)

[править] Обработка событий маркера

Маркеры Google Maps - интерактивные элементы.

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

Обработка события для маркера задается методом addListener объекта GEvent. В следующем примере мы разместим маркер, при нажатии на который появляется информационное окно с текстом: function GMapInit() { // Инициализация класса Google Maps и расположение карты в слое GMapContainer var map = new GMap2(document.getElementById("GMapContainer")); // Задаем центр выводимой области карты map.setCenter(new GLatLng(54.61711404944475, 39.70939636230469), 14); // Широта, долгота и коэффициент // увеличения цента (обязательный параметр) // Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469)); // Устанавливаем обработчки события нажатия на маркер GEvent.addListener(marker, "click", function() { // Открытие информационного окна с текстом marker.openInfoWindowHtml("SpravkaWeb.Ru - Справочник Web-языков"); }); // Добавляем маркер на карту map.addOverlay(marker); }

Выполнить пример (addmarkers_events.html)

Основные события, которые могут пригодиться при работе с маркерами

click - нажатие на значек маркера:

dragstart - начало перетаскивание маркера (когда нажали на маркер и не отпуская клавишу мыши начинаем его перетаскивать);

dragend - завершение перетаскивания маркера (когда пользователь отпустил клавишу мыши во время перетаскивания маркера);

mouseover - когда курсор мыши находится над значком маркера;

mouseout - когда курсор мыши выходит из зоны значка маркера.

[править] Перетаскивание маркеров

По умолчанию маркер жестко закреплен на карте и его не возможно перетащить. Но при создании маркера можно указать возможность перетаскивания его мышью. Достигается это при помощи указания параметра draggable:true: // Задаем переменную, содержащую настройки создаваемого маркера var markerOptions = { draggable:true }; // Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469), markerOptions);

Выполнить пример (addmarkers_draggable.html)

При перетаскивании маркера срабатывают события dragstart (начало перетаскивания), drag (в процессе перетаскивания маркера), dragend (срабатывает в конце перетаскивания маркера в момент отпускания маркера мышью).

[править] Информационные окна

Сам по себе маркер только показывает определенное место на карте. Что находится на этом месте - сразу может быть и не понятно. Конечно можно сделать подсказку при наведении мыши на маркер при помощи параметра title: // Задаем переменную, содержащую настройки создаваемого маркера var markerOptions = { title:"Это маркер №1" }; // Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469), markerOptions); Действие аналогично атрибуту title у элементов HTML. Но в такой подсказке не разместишь картинки, ссылки на страницы сайта и прочую полезную информацию, описывающую данную точку на карте. Потому для маркеров добавили возможность выводить информационные окна, которые могут быть нескольких типов:

openInfoWindowHtml

Открывает информационное окно, содержимое которого задается в виде HTML-текста.

openInfoWindowTabsHtml

Открывает информационное окно, которое содержит закладки. Каждая из закладок может содержать произвольный HTML-текст.

Как правило, открытие информационного окна делают при срабатывании события click на маркере: // Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469)); // Устанавливаем обработчки события нажатия на маркер GEvent.addListener(marker, "click", function() { // Открытие информационного окна с текстом marker.openInfoWindowHtml("SpravkaWeb.Ru - Справочник Web-языков"); });

Открываемое информационное окно самостоятельно визуально "привязывается" к маркеру, для которого оно открылось, и, при необходимости, карта "прокручивается" в такое положение, чтобы это окно было целиком видно на карте.

Думаю стоит сказать пару слов про метод openInfoWindowTabsHtml.

Это метод позволяет несколько расширить возможности по выводу описательной информации. Данный метод позволяет разбить выводимую информацию на несколько блоков, каждый из которых открывается в отдельной вкладке. Это может потребоваться, когда необходимо показать достаточно много разнородной информации, касающейся маркера на карте.

Метод принимает массив из объектов GInfoWindowTab, содержащих названия вкладок и текст в HTML-формате: function GMapInit() { // Инициализация класса Google Maps и расположение карты в слое GMapContainer var map = new GMap2(document.getElementById("GMapContainer")); // Задаем центр выводимой области карты map.setCenter(new GLatLng(54.61711404944475, 39.70939636230469), 14); // Широта, долгота и коэффициент // увеличения цента (обязательный параметр) // Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469)); // Устанавливаем обработчки события нажатия на маркер GEvent.addListener(marker, "click", function() { // Задаем массив вкладок var tabList = [ new GInfoWindowTab('Вкладка 1', 'Содержимое первой вкладки'), new GInfoWindowTab('Вкладка 2', 'Содержимое второй вкладки со <A href="http://www.spravkaweb.ru/">ссылкой</A>') ]; marker.openInfoWindowTabsHtml(tabList); }); // Добавляем маркер на карту map.addOverlay(marker); } Выполнить пример (addmarkers_tabs.html)

[править] Одновременный вывод нескольких маркеров

Ранее мы рассматривали случаи вывода одного маркера на карте Google Maps. Сейчас же я хочу рассмотреть методологию вывода сразу группы маркеров. При этом при нажатии на каждый из маркеров будет выводиться информационное окно с текстом, описывающим данный маркер: // Массив с данными для маркеров var markers = [ {'x' : 54.629139478986666, 'y' : 39.71677780151367, 'comment' : 'Это одна из главных улиц города'}, {'x' : 54.62921400568887, 'y' : 39.73626136779785, 'comment' : 'Тут находится памятник Ленину'}, {'x' : 54.63341212272979, 'y' : 39.71287250518799, 'comment' : 'Железнодорожный вокзал'}, {'x' : 54.61341129044906, 'y' : 39.72407341003418, 'comment' : 'Рязанская Государственная Радиотехническая Академия<BR>Тут я учился!'} ]; function GMapInit() { // Инициализация класса Google Maps и расположение карты в слое GMapContainer var map = new GMap2(document.getElementById("GMapContainer")); // Задаем центр выводимой области карты map.setCenter(new GLatLng(54.61711404944475, 39.70939636230469), 13); // Широта, долгота и коэффициент // увеличения цента (обязательный параметр) // "Пробегаемся" по массиву точек, // и добавляем маркеры, созданные функцией createMarker() for(i in markers) { map.addOverlay(createMarker(markers[i]['x'],markers[i]['y'],markers[i]['comment'])); } } // Функция создания маркера с указанными параметрами function createMarker(x, y, comment) { // Создаем точку на карте с координатами x и y var point = new GLatLng(x, y); // Создаем маркер в указанной точке var marker = new GMarker(point); // Добавляем обработчик события нажатия на маркер GEvent.addListener(marker, "click", function() { // При нажатии открывается информационное окно с заданным текстом marker.openInfoWindowHtml(comment); }); return marker; } Выполнить пример (addmarkers_several.html)