Каждая карта может одновременно отображать только одно информационное окно типа 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);
Загружаем страницу с примером в браузере
Кликнув по маркеру мы видим информационное окно
Пример работы и полный код Вы можете увидеть здесь.
Комментариев нет:
Отправить комментарий