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

смотрим также

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

Перейти к: навигация, поиск


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

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

Содержание

Установка маркера

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

<js>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); }</js>

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

Обработка событий маркера

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

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

Обработка события для маркера задается методом addListener объекта GEvent. В следующем примере мы разместим маркер, при нажатии на который появляется информационное окно с текстом: <js>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); }</js>

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

Основные события, которые могут пригодиться при работе с маркерами
click - нажатие на значек маркера:
dragstart - начало перетаскивание маркера (когда нажали на маркер и не отпуская клавишу мыши начинаем его перетаскивать);
dragend - завершение перетаскивания маркера (когда пользователь отпустил клавишу мыши во время перетаскивания маркера);
mouseover - когда курсор мыши находится над значком маркера;
mouseout - когда курсор мыши выходит из зоны значка маркера.

Шаблон:CommentBlock

Перетаскивание маркеров

По умолчанию маркер жестко закреплен на карте и его не возможно перетащить. Но при создании маркера можно указать возможность перетаскивания его мышью. Достигается это при помощи указания параметра draggable:true: <js> // Задаем переменную, содержащую настройки создаваемого маркера var markerOptions = { draggable:true };

// Устанавливаем маркер по центру выводимой области карты var marker = new GMarker(new GLatLng(54.61711404944475, 39.70939636230469), markerOptions); </js>

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

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

Информационные окна

Сам по себе маркер только показывает определенное место на карте. Что находится на этом месте - сразу может быть и не понятно. Конечно можно сделать подсказку при наведении мыши на маркер при помощи параметра title: <js> // Задаем переменную, содержащую настройки создаваемого маркера var markerOptions = { title:"Это маркер №1" };

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

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

Как правило, открытие информационного окна делают при срабатывании события click на маркере: <js>

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

</js>

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

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

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

Метод принимает массив из объектов GInfoWindowTab, содержащих названия вкладок и текст в HTML-формате: <js>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="https://www.spravkaweb.ru/">ссылкой</A>') ];

   	marker.openInfoWindowTabsHtml(tabList);
   	
   });
   
   // Добавляем маркер на карту
   map.addOverlay(marker);

}</js> Выполнить пример (addmarkers_tabs.html)

Шаблон:CommentBlock

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

Ранее мы рассматривали случаи вывода одного маркера на карте Google Maps. Сейчас же я хочу рассмотреть методологию вывода сразу группы маркеров. При этом при нажатии на каждый из маркеров будет выводиться информационное окно с текстом, описывающим данный маркер: <js>// Массив с данными для маркеров 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' : 'Рязанская Государственная Радиотехническая Академия
Тут я учился!'} ];

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; }</js> Выполнить пример (addmarkers_several.html)

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования