#2. Добавляем маркер на карту Google

Маркеры - это произвольные метки, показывающие расположение того или иного объекта на карте. Чаще всего Google карту добавляют на сайт именно для того, чтобы на ней вывести эти самые маркеры, которые к примеру будут указывать адреса магазинов или что-то в этом духе.

В предыдущем уроке мы с вами интегрировали карту Google с нашим сайтом. Теперь пришла пора на эту самую карту добавить первый маркер.

За добавление маркеров отвечает конструктор google.maps.Marker. Пример его использования указан ниже.

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);

	// Добавляем маркер
	var marker = new google.maps.Marker({
		position: centerLatLng,              // Координаты расположения маркера. В данном случае координаты нашего маркера совпадают с центром карты, но разумеется нам никто не мешает создать отдельную переменную и туда поместить другие координаты.
		map: map,                            // Карта на которую нужно добавить маркер
		title: "Текст всплывающей подсказки" // (Необязательно) Текст выводимый в момент наведения на маркер
	});
}
google.maps.event.addDomListener(window, "load", initMap);

Как видите, добавить маркер очень просто и мне здесь сказать нечего.

Изменяем внешний вид маркера

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

Для этого при создании маркера добавьте еще один параметр icon. В значении данного параметра укажите путь до изображения, которое вы хотите выводить на карте в качестве маркера.

	// Добавляем маркер
	var marker = new google.maps.Marker({
		position: centerLatLng,               // Координаты расположения маркера. В данном случае координаты нашего маркера совпадают с центром карты, но разумеется нам никто не мешает создать отдельную переменную и туда поместить другие координаты.
		map: map,                             // Карта на которую нужно добавить маркер
		title: "Текст всплывающей подсказки", // (Необязательно) Текст выводимый в момент наведения на маркер,
		icon: "images/marker.png"             // (Необязательно) Путь до изображения, которое будет выводится на карте вместо стандартного маркера
	});

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

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

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

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

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

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

Наверх

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

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

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

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

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

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

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

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

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

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

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

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