Выводим содержимое CSV-файла на Яндекс.Карту

Если у Вас есть данные о точках в Excel со значениями координат, удобно было бы вывести их на карту сохранив в текстовом файле с разделителями (CSV).

Кроме этого, Вы легко можете отредактировать содержимое CSV-файла при необходимости в любом текстовом редакторе.

Как осуществить вывод содержимого CSV-файла на Яндекс.Карту, я расскажу в данной заметке.

В самом начале нам необходимо подготовить исходный файл с данными.

Для примера, я буду использовать информацию об автосалонах Нижнего Новгорода.

Вот исходный файл: avto_markers.csv

Посмотрим его структуру.

Он состоит из шести колонок.

В первой хранится порядковый номер записи в таблице.

Во-второй — название автосалона.

В третьей — адрес.

В четвертой номер телефона.

Пятая и шестая служат для хранения значений географических координат.

Каждая колонка отделена друг от друга точкой с запятой.

Мы будем загружать наш файл avto_markers.csv через AJAX, используя возможности встроенной в API Яндекс.Карт javascript-библиотеки Jquery.

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

Рассмотрим код примера подробно.

В самом начале, мы как обычно подключаем API Яндекс.Карт и определяем нашу карту, задаем ее начальные центр, масштаб, добавляем необходимые элементы управления.

Далее мы загружаем файл с данными о метках.

Разделяем на строки, а строки на столбцы в строчках:

var rows = data.split("n");

var colls=rows[i].split(";");

Затем, создаем метки placemark, задаем стиль отображения значка метки используя стиль из API — default#carIcon.

Задаем содержимое балуна, отображаемое при клике по метке.

placemark.name = ‘<div style="color:#ff0303;font-weight:bold">’+colls[1]+'</div>’;
placemark.description = ‘<strong>Адрес:</strong> ‘+colls[2]+'<br /><strong>Телефон:</strong> ‘+colls[3];

После этого, добавляем метку на карту.

Далее, мы создаем пункт в меню для данной метки.

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

Загрузить архив с файлами примера.

  • Гость: А где взять "данные о точках в Excel со значениями координат"? (Список адресов сейчас более трехсот)
  • Гость: Можно провести предварительное геокодирование адресов используя немного измененый скрипт из статьи <a href="http://ymapsapi.ya.ru/replies.xml?item_no=81" title="Получение координат для списка адресов" target="_blank" rel="nofollow">здесь</a>
  • Гость: Можно получить список координат по адресам восползовавшись вот этим сайтом. После расстановки адресов на карте он позволяет сохранить их в таблице Exel вместе с координатами... http://www.topplan.ru/addr
  • Гость: Как создать метку с номером?
  • Гость: Вот <a href="http://api.yandex.ru/maps/doc/jsapi/2.x/examples/markersiconcontent.html" title="Задание контента меток" target="_blank" rel="nofollow">пример</a> из документации по API 2.x
  • Валерий Березняк: Добрый день. Возможно ли кластеризовать баллуны?
  • Гость: Помогите запустить на локальном компьюетере (запускается только в IE, в остальных только карта)
  • Nikita Gangeev: Здравствуйте! Не могли бы подсказать как реализовать на этом примере кластеры?