Инициализация карты 

В Google Map API третьей версии есть существенные изменения. Например, ключ для домена больше не нужен. Плюс немного изменился синтаксис. Давайте посмотрим как вызвать карту:

<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(59.95, 30.40), // Координаты центра
		    myOptions = {
				zoom:      10, // Масштаб
				center:    latlng, // Координаты центра
				mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты
			};
		
		// Выводим карту в указанный контейнер
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
	}	
</script>

Смотрим простой примерчик:

Демо

Линии

Отображение

Для того, чтобы нарисовать линию на карте необходима сама карта, набор координат в виде массива LatLng и настройки внешнего вида. Ниже код для вывода линии по указанных координатам с комментариями:

<script type="text/javascript">
	...
	
	// Координаты для линии
	var polylineCoords = [
		new google.maps.LatLng(59.95, 30.40),
		new google.maps.LatLng(59.95, 30.50),
		new google.maps.LatLng(60.05, 30.50)
	];
	
	// Настройки для линии
	var polyline = new google.maps.Polyline({
		path: polylineCoords, // Координаты
		strokeColor: "#FF0000", // Цвет
		strokeOpacity: 1.0, // Прозрачность
		strokeWeight: 6 // Ширина
	});

	
	// Добавляем на карту
	polyline.setMap(map);

	...
</script>

События

На линию можно повесить обработку события с помощью addListener. Например, чтобы отследить клик по линии надо сделать вот так:

<script type="text/javascript">		
	...
		
	// Обработка клика по линии
	google.maps.event.addListener(polyline, 'click', function() {
		alert('Что-то происходит');
	});
	
	...
</script>

Теперь давайте посмотрим на пример, где выводиться линия и при клике на нее что-то происходит:

Демо

Полигоны

Отображение

Полигон это замкнутые линии (координаты начала первой равны координатам конца последней). Внутри полигон можно залить цветом.

Для отображения полигона необходима опять же карта, набор координат в виде массива LatLng и настройки для обводки и заливки. Примерно так:

<script type="text/javascript">
	...

	// Координаты для полигона
	var polygonCoords = [
		new google.maps.LatLng(59.95, 30.40),
		new google.maps.LatLng(59.95, 30.50),
		new google.maps.LatLng(60.05, 30.50),
		new google.maps.LatLng(59.95, 30.40)
	];
	
	// Настройки для полигона
	var polygon = new google.maps.Polyline({
		path: polygonCoords, // Координаты
		strokeColor: "#FF0000", // Цвет обводки
	    strokeOpacity: 0.8, // Прозрачность обводки
	    strokeWeight: 2, // Ширина обводки
	    fillColor: "#FF0000", // Цвет заливки
	    fillOpacity: 0.35 // Прозрачность заливки

	});
				
	// Добавляем на карту
	polygon.setMap(map);
			
	...	
</script>

События

На полигон так же можно повесить обработчик события. Код ничем не отличается от события для линии:

<script type="text/javascript">
	...

	// Обработка клика по полигону
	google.maps.event.addListener(polygon, 'click', function() {
		alert('Что-то происходит');
	});

	...	
</script>

Опять же, пример полигона и обработчика события:

Демо

А вот ссылка на все примеры статьи в одном архиве:

Архив с примерами

Подводные камни

Ввиду того, что каждый отрезок линии или грань полигона является элементом DOM, с увеличением их количества уменьшается скорость их обработки браузерами. В частности, в следующей статье я приведу ссылку на проект, в котором изначально я использовал такие полигоны для выделения стран. Когда на карте стало больше 10-ти стран, мой браузер начал безбожно виснуть.

Решить это можно с помощью использования KML для Google Maps API. Но об этом в следующей статье.

Итак, какие есть вопросы? Уже работали с полигонами или линиями? Есть пример использования или идея? Пишите в комментариях!