Стандартные инфоокна

Стандартные инфоокна выглядят не очень красиво, но, они функциональные и удобные. Как же их использовать? А вот так:

• метод openInfoWindow() позволяет выводить окошки только с текстовым содержанием;
• метод openInfoWindowHtml() может показывать практически любой html.

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

// создаем карту 
var map = new GMap2(document.getElementById("map_canvas")); 
// центрируем ее 
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
// открывает инфоокно 
map.openInfoWindow(map.getCenter(), document.createTextNode("Здравствуй, мир!"));

Первый же аргумент — точка, на которую указывает «нога» окошка, в данном случае это центр карты.

Если же вы хотите выводить окошко для маркера (при клике на нем), то сделать можно вот так:

<script type="text/javascript">
... 
GEvent.addListener(marker, "click", function() {
     map.openInfoWindowHtml(coords, 'Я — инфоокно!'); // делаем открытие окна при клике на маркер 
}); 
... 
</script>

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

Настраиваемые инфоокна

Я остановился на ExtInfoWindow — стабильная (после правки) библиотека для инфоокон, внешний вид которых настраивается через CSS.

Чтож, рассмотрим использование. Для начала вызов:

<script type="text/javascript">
// объявление переменных
var map 		= null; // карта

// инициализация карты
function initialize() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas")); // делаем карту в таком диве
		map.setCenter(new GLatLng(59.94, 30.3), 13); // устанавливаем центр карты и приближение
		var marker = new GMarker(new GLatLng(59.94, 30.3));
		map.addOverlay(marker); // и добавляем его на карту
		marker.openExtinfowindows(
			map,
			'estetic_window',
			'Настраиваемое инфоокно',
			{
				beakOffset: 3
			}
		);
		geocoder = new GClientGeocoder(); // создаем объект геокодера
	}
}
</script>

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

Теперь перейдем к визуальной настройке. Для моего окошка я использовал вот такие картинки:

Необходимы стили выглядят вот так:

<style>
#estetic_window {
width: 250px;
display: table;
}

#estetic_window_contents {
background: #FFF ;
width: 224px;
}

#estetic_window_beak{
width: 33px;
height: 34px;
background: url(beak.png) top left no-repeat transparent;
margin-left: -2px;
}

* html #estetic_window_beak{
/* Alpha transparencies hack for IE */
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/beak.png', sizingMethod='crop');
}

#estetic_window_tl, #estetic_window_tr, #estetic_window_bl, #estetic_window_br,
#estetic_window_t,#estetic_window_l,#estetic_window_r,#estetic_window_b{
background-color: #F00;
height: 2px;
width: 2px;
}

#estetic_window_tl {
width: 13px;
height: 13px;
background: url(tl.png) top left no-repeat;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/tl.png', sizingMethod='crop');
}

#estetic_window_t {
background: url(t.png) top left repeat-x;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/t.png', sizingMethod='crop');
}

#estetic_window_tr {
background: url(tr.png) top right no-repeat;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/tr.png', sizingMethod='crop');
width: 13px;
height: 13px;
}

#estetic_window_bl {
width: 13px;
height: 13px;
background: url(bl.png) bottom left no-repeat;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/bl.png', sizingMethod='crop');
}

#estetic_window_b {
background: url(b.png) bottom left repeat-x;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/b.png', sizingMethod='crop');
}

#estetic_window_br {
background: url(br.png) bottom right no-repeat;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/br.png', sizingMethod='crop');
width: 13px;
height: 13px;
}

#estetic_window_l {
background: url(l.png) top left repeat-y;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/l.png', sizingMethod='crop');
width: 13px;
}

#estetic_window_r {
background: url(r.png) top right repeat-y;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/examples/google-maps-infowindows/r.png', sizingMethod='crop');
width: 13px;
}

#estetic_window_close {
background: url(close.png) bottom left no-repeat;
width: 20px;
height: 20px;
cursor: pointer;
}
</style>

Собираем все воедино и получаем вот такое классное окошко. И не забудьте взять мою версию библиотеки, она корректно работает во всех браузерах.

Вот такой сегодня урок. Вопросы? Может дополнения? Тогда замечания? Все в комменты, пока!