В этой заметке мы научимся добавлять информационные окна на карту 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&v=2&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>
Загрузив его в браузере, мы увидим следующее
Добавим к ниму следущие строчки
map.openInfoWindow(map.getCenter(),document.createTextNode(«Нижний Новгород»));
после строки map.addControl(new GMapTypeControl());
Тогда, загрузив страницу в браузере, мы увидим
Пример работы и полный код Вы можете увидеть здесь.
Давайте теперь в информационное окно добавим 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);
Загружаем страницу с примером в браузере
Кликнув по маркеру мы видим информационное окно
Пример работы и полный код Вы можете увидеть здесь.