Что такое KML

Посмотрим цитату из справочника Google Code KML:

KML — это формат представления географических данных для отображения в программах Google Планета Земля, Карты Google и Карты Google для мобильных устройств. Файлы KML позволяют точно обозначать места, накладывать изображения и по-новому отображать данные. KML — международный стандарт, поддерживаемый компанией Open Geospatial Consortium, Inc. (OGC).

Если проще — это такой XML файл, который содержит данные об отображаемых объектах в специальном формате.

Как работает KML

Все очень просто:

1. вы формируете необходимый вам KML файл у себя на сервере;
2. вы отправляете его через Google Maps API на сервер Google Maps;
3. Google Maps отображает данные из вашего KML файла на вашей карте.

В итоге ваш KML файл будет выведен поверх тайлов Google Maps, то есть ваши данные будут отображены как изображение поверх карты Гугла. При этом все объекты из KML файла будут кликабельные, и к ним можно будет обращаться. А так как данные «зашиты» в тайлы карт, в DOM вашей карты не будет лишних элементов, и вам не придется переживать о производительности. Вдобавок ко всему, итоговые изображения кешируются и все работает супер быстро.

Итак, давайте рассмотрим общую схему работы с KML:

<script type="text/javascript">
	function initialize() {
		// Инициализируем карту
		var myLatlng = new google.maps.LatLng(30.3, 59.94);
		var myOptions = {
			zoom: 4,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		// Хак для отключения кеширования
		var timestamp = new Date().getTime();
		
		// Отображение KML		
		var yourKML = new google.maps.KmlLayer('http://absolute_path_to.kml?' + timestamp);
		yourKML.setMap(map);
	}
</script>

Да да, это все. Теперь вам надо лишь создать нужный формат файла и записать в него данные. Давайте посмотрим пару простых примеров.

Вывод маркеров в KML

Допустим надо вывести три маркера на карту, при этом при клике на каждом из них должен показываться бабл с подробной информацией. Для этого необходимо сделать вот такой KML файл:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
	<Document>
		<name>markers.kml</name>
				
		<Placemark>
			<name>Маркер №1</name>
			<description>
				<![CDATA[
				Описание маркера №1
				]]>
			</description> 
			<Point>
				<coordinates>30.3, 59.94</coordinates>
			</Point>
		</Placemark>
		
		<Placemark>
			<name>Маркер №2</name>
			<description>
				<![CDATA[
				Описание маркера №2
				]]>
			</description>
			<Point>
				<coordinates>30.35, 59.945</coordinates>
			</Point>
		</Placemark>
		
		<Placemark>
			<name>Маркер №3</name>
			<description>
				<![CDATA[
				Описание маркера №3
				]]>
			</description> 
			<Point>
				<coordinates>30.4, 59.95</coordinates>
			</Point>
		</Placemark>	
	</Document>
</kml>

И подключить его к карте:

<script type="text/javascript">
	function initialize() {
		...		
		var markersKML = new google.maps.KmlLayer('http://vremenno.net/examples/google-maps-kml/markers.kml?' + timestamp);
		...
	}
</script>

Вот и все. Смотрим пример:

Маркеры с помощью KML

Вывод полигонов в KML

Теперь давайте рассмотрим более сложный пример. Скажем, нам обвести Россию на карте и сделать так, чтобы при клике на ней показывался бабл и описанием. Страну мы будет обводить с помощью полигонов. Пример кода KML урезан, так как для обводки России необходимо много полигонов:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
	<Document>
		<name>Пример работы с полигонами с помощью KML в Google Maps API</name>
		<Style id="style-1">
		  <PolyStyle>
		    <color>7bff0090</color>
		    <fill>1</fill>
		    <outline>1</outline>
		  </PolyStyle>
			  <LineStyle>
		    <color>7bff0090</color>
		    <width>2</width>
			  </LineStyle>
		</Style>
		
		
		<Placemark id="Russia">
			<name>Россия</name>
			<description><![CDATA[ Описание в бабле ]]></description>
			<styleUrl>#style-1</styleUrl>
			<MultiGeometry>
				<Polygon>
					<outerBoundaryIs>
					  <LinearRing>
						<coordinates>
						131.87329, 42.95694, 0
						131.77997, 43.04944, 0
						131.9172, 43.0211, 0
						131.87329, 42.95694, 0
						</coordinates>
					  </LinearRing>
					</outerBoundaryIs>
				</Polygon>
				<Polygon>
					<outerBoundaryIs>
					  <LinearRing>
						<coordinates>
						146.13748, 43.45888, 0
						146.07608, 43.51333, 0
						146.22607, 43.52555, 0
						146.13748, 43.45888, 0
						</coordinates>
					  </LinearRing>
					</outerBoundaryIs>
				</Polygon>
				...			
			</MultiGeometry>
		</Placemark>	
	</Document>
</kml>

Теперь подключим к карте и все готово:

Полиноны с помощью KML

А более сложный пример работы с KML вы можете увидеть на карте визового режима, который я сделал для своего знакомого.

Итак, теперь вы знаете как работать с KML в Google Maps API.

Есть вопросы? Пишите в комментариях и делитесь ссылками на статью с друзьями в Твиттере, вКонтакте или Фейсбуке. Пока!

P. S. Всю мужскую аудиторию — с праздником!