В этой статье мы подготовим карту с добавленными на неё метками. Для добавления меток нужно будет знать их адрес. Полученную карту можно будет разместить на вашем сайте для удобства пользователей и клиентов.
Сама карта будет реализована на основе технологии API Яндекс Карт с помощью библиотеки sumlab-lib-jsapi.
Предварительная подготовка:
- Подготовить адреса и описание меток
Ограничения:
Если вы добавляете метки на карту по адресам, то используются запросы на геокодирование. Один адрес = 1 геокодирование. Для бесплатного ключа есть лимит - 1000 запросов на геокодирование. При перезагрузке страницы, все запросы будут отправлены заново. Это нужно, чтобы получить координаты точек. Если посетителей сайта и адресов мало, то можно оставить в таком виде. В другом случае можно добавлять метки сразу по координатам. Тогда лимиты на геокодирование не будут использоваться. Об этом способе расскажу в следующей статье.
Порядок действий:
Код из примеров доступен на GitHub.
1. Подключите на веб-страницу в блоке <head> библиотеку API Яндекс Карт. Не забудьте в ссылке указать ваш ключ, который вы зарегистрировали в Кабинете разработчика.
2. Подключите скрипт sumlab-lib-jsapi.js после библиотеки API Яндекс Карт.
3. Создайте контейнер для карты. Задайте ему размеры с помощью css. Запомните указанный id.
4. Перед закрывающим тегом </body> подключить пустой файл app.js.
5. Инициализируйте карту в файле app.js. Укажите id контейнера, координаты центра карты и масштаб.
6. Настройте карту и добавьте на неё нужное количество меток. Для каждой метки можно задать свой набор настроек: адрес, содержимое внутри метки, содержимое всплывающего окна.
7. Сохраните изменения и перезагрузите сайт. Меняя настройки, можно добиться разных результатов. Примеры ниже.
Библиотека sumlab-lib-jsapi на GitHub.
Примеры использования библиотеки на GitHub.
Полезный сайт - sumlab.ru.
А на этом всё! Всем спасибо за внимание.