#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 разметку.

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

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

Понравилась статья?

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

Комментарии ВКонтакте

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

Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад