Использование информационного окна с API Google Maps

В этой заметке мы научимся добавлять информационные окна на карту Google.

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

У объекта GInfoWindow нет конструктора. Информационное окно автоматически создается и прикрепляется к карте во время ее создания. Для одной карты может выводиться только одно информационное окно, но его можно перемещать и изменять его содержание.

При использовании объекта GMap2 доступен метод openInfoWindow(), в котором точка и элемент HTML DOM рассматриваются как аргументы. Элемент HTML DOM вставляется в контейнер информационного окна, и оно закрепляется в заданной точке.

Метод openInfoWindowHtml() объекта GMap2 аналогичен, но в качестве второго аргумента он использует строку HTML вместо элемента DOM.

Для создания информационного окна необходимо вызвать метод openInfoWindow() и передать ему положение и элемент DOM.

Давайте добавим информационное окно к примеру, который использовался в заметке «Добавляем элементы управления на карту Google Maps».

Заменив в нем элемент управления GLargeMapControl на GSmallMapControl.

Код примера:

<!DOCTYPE html «-//W3C//DTD XHTML 1.0 Strict//EN»»http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»><html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»content-type» content=»text/html; charset=utf-8″/>

<title>Пример API Карт Google на языке JavaScript </title>

<script src=»http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ»

type=»text/javascript»></script>

<script type=»text/javascript»>

function initialize() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(«map_canvas»));

map.setCenter(new GLatLng(56.32811,44.0), 10);

map.addControl(new GSmallMapControl ());

map.addControl(new GMapTypeControl());

}}

</script></head>

<body onload=»initialize()» onunload=»GUnload()»>

<div id=»map_canvas» style=»width: 500px; height: 300px»></div>

</body>

</html>

Загрузив его в браузере, мы увидим следующее

Пример карты Google с элементами управления

Добавим к ниму следущие строчки

map.openInfoWindow(map.getCenter(),document.createTextNode(«Нижний Новгород»));

после строки map.addControl(new GMapTypeControl());

Тогда, загрузив страницу в браузере, мы увидим

Пример GoogleMaps информационное окно (балун)

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

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

В начале, мы изменим координаты центра карты и масштаб отображения.

Заменим строку map.setCenter(new GLatLng(56.32811,44.0), 10); на map.setCenter(new GLatLng(56.315455,44.017152), 16);

А затем добавим строку map.setMapType(G_SATELLITE_MAP); — мы установим тип карты для загрузки спутниковый снимок (т.к. карта Нижнего Новгорода не содержит домов, чтобы точно указать местоположение я использую снимок).

Для обработки клика на маркере и вывода информационного окна я использую дополнительную функцию createMarker.

Вот ее код:

function createMarker(point,html) {var marker = new GMarker(point);GEvent.addListener(marker, «click», function() {

marker.openInfoWindowHtml(html);

});

return marker;

}

Помещаю его перед строчкой </script>

А в функции initialize после строки  map.addControl(new GMapTypeControl()); добавляю следующее

var point = new GLatLng(56.31572,44.017158);var marker = createMarker(point,'<div style=»text-align:center»><strong>Оперный театр им. А. С. Пушкина</strong><br><img src=»files/yanmap_z5_2.jpg» width=»200″ height=»138″ /><br>ул. Белинского, д. 59</div>’)map.addOverlay(marker);

Загружаем страницу с примером в браузере

Пример GoogleMaps информационное окно - маркер

Кликнув по маркеру мы видим информационное окно

Пример GoogleMaps информационное окно

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