Отображаем данные из KML-файла на Google Maps с сайдбаром

Очень часто данные из различных программ для навигации можно сохранять в формате KML-файла.

Эти файлы являются стандартными и их можно легко отобразить на различных картах или в программе Google Earth (Планета Земля).

Еще лучше, чтобы данные отображались рядом с картой в виде кликабельного меню (сайдбара), для удобной навигации по меткам на карте.

В этой заметке я покажу, как это можно легко реализовать с помощью бесплатного дополнения KmlMapParser.

В месте со скриптом идут примеры его использования.

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

Посмотреть пример в действии

При открытии страницы в браузере, мы наблюдаем карту с метками, а с правой стороны меню со ссылками.

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

Давайте рассмотрим код примера:

В самом начале мы подключаем файлы стилей для дополнения и отображения меню.

<link rel="stylesheet" type="text/css" href="resources/css/examples.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/KmlMapParser.css"/>

Далее задаем стиль контейнера с картой map.

.map {
width: 700px;
height: 600px;
margin: 5px;
}

Подключаем API Google Maps и JavaScript файл KmlMapParser.js

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="javascript/KmlMapParser.js" type="text/javascript"></script>

Далее, мы задаем основные параметры для нашей карты: координаты центра, масштаб, тип карты и элементы управления.

Следующий фрагмент кода, отвечает за вывод содержимого KML-файла и формирование меню:

xml = new KmlMapParser({ map: map,
     					zoom: 14,
     					kml: 'stadions.kml',
     					showSidebar: true,
   						showFolders: false,
     					showSidebarDescriptions: false,
     					showSidebarBubble: true,
     					showRootName: false,		
     					showImageShadow: false
     				});

Мы вызываем функцию KmlMapParser из файла KmlMapParser.js и передаем в неё список параметров:

map – карта;
zoom – масштаб;
kml — KML-файл для обработки;
showSidebar — показывать или нет сайдбар;
showFolders — показывать или нет папки;
showSidebarDescriptions — показывать или нет текст описания в сайдбаре;
showSidebarBubble — показывать или нет балун при клике по ссылке;
showRootName — показывать или нет заголовок KML-файла;
showImageShadow — показывать или нет тень для иконок.

Как работают остальные параметры, можно посмотреть в примерах к данному дополнению KmlMapParser.

Загрузить архив с примером и файлы расширения.

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