#3. Google Maps. Информационные окна

Информационное окно - это всплывающая подсказка, которая отображается в указанной точке на карте.

Информационные окна могут содержать как обычный текст, так и HTML разметку. Если мы используем HTML, то в этом случае у нас есть возможность кастомизировать окно с помощью CSS.

Ниже я показываю пример, как можно добавить информационное окно для нашего маркера.

function initMap() {
	var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641);
	var mapOptions = {
		center: centerLatLng,
		zoom: 8
	};
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);
	// contentString - это переменная в которой хранится содержимое информационного окна.
	// Может содержать, как HTML-код, так и обычный текст.
	// Если используем HTML, то в этом случае у нас есть возможность стилизовать окно с помощью CSS.
	var contentString = '<div class="infowindow">' +
	                        '<h3>Lorem ipsum dolor</h3>' +
	                        '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sed.</p>' +
	                    '</div>';
	// Создаем объект информационного окна и помещаем его в переменную infoWindow
	var infoWindow = new google.maps.InfoWindow({
		content: contentString
	});
	var marker = new google.maps.Marker({
		position: centerLatLng,
		map: map,
		title: "Текст всплывающей подсказки"
	});
	// Отслеживаем клик по нашему маркеру
	google.maps.event.addListener(marker, "click", function() {
		// infoWindow.open - показывает информационное окно.
		// Параметр map - это переменная содержащие объект карты (объявлена на 8 строке)
		// Параметр marker - это переменная содержащие объект маркера (объявлена на 23 строке)
		infoWindow.open(map, marker);
	});
	// Отслеживаем клик в любом месте карты
	google.maps.event.addListener(map, "click", function() {
		// infoWindow.close - закрываем информационное окно.
		infoWindow.close();
	});
}
google.maps.event.addDomListener(window, "load", initMap);

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

Все исходники, вы можете забрать из "Дополнительных материалов".

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

Добавить комментарий