Как добавить Яндекс Карту на сайт: виджет организации, Конструктор карт и поле в rillo

Какими способами можно поставить Яндекс Карту на сайт?

Яндекс Карту на сайт ставят тремя способами: виджетом из меню «Поделиться» на Яндекс Картах, картой из Конструктора карт и через JavaScript API. Первые два Яндекс на странице своих инструментов называет бесплатными, и оба обходятся без программирования, а третий нужен тому, кто пишет код страницы сам и хочет собрать карту под себя.

Виджет показывает организацию, найденное место или построенный маршрут. Конструктор карт рисует вашу карту с метками, линиями и многоугольниками. JavaScript API добавляет поиск мест, маршруты и панорамы, но собирать его надо кодом. Сайту услуг он ни к чему. Поле карты в rillo код этого API не принимает.

Какой способ взять для одной точки, маршрута и нескольких точек?

Для одной точки берут виджет организации, для маршрута — виджет или кнопку со ссылкой на маршрут, для нескольких точек — Конструктор карт. Выбор упирается в то, что человеку нужно увидеть: где вас найти, как доехать или сколько у вас адресов. У rillo есть оговорка про маршрут, она в последнем столбце.

Как взять код карты в Яндекс Картах?

Код карты берут в Яндекс Картах через меню «Поделиться»: найдите организацию или место, нажмите кнопку в правом верхнем углу страницы, выберите «Поделиться» и скопируйте код из поля «Виджет с картой». Прежде чем вставлять, нажмите «Предпросмотр»: Яндекс покажет карту так, как она будет выглядеть на сайте.

1. Найдите на Яндекс Картах свою организацию. Если карточки ещё нет, сначала заведите её по руководству про Яндекс Карты и 2ГИС.
2. В правом верхнем углу нажмите кнопку меню и выберите «Поделиться».
3. Скопируйте код из поля «Виджет с картой» и посмотрите «Предпросмотр».
4. Для rillo хватит и адреса из строки браузера. Короткую ссылку вида yandex.ru/maps/-/… он не примет: откройте её и скопируйте полный адрес.

Когда нужен Конструктор карт?

Конструктор карт — это бесплатный редактор Яндекса, в котором вы рисуете свою карту с метками, линиями и многоугольниками. Он нужен, когда одной точки мало: два адреса, схема проезда через двор, территория парковки. Готовую карту забирают кнопкой «Получить код карты» и выбирают вариант кода: JavaScript или iframe.

Тип карты выбирайте «Интерактивная»: её можно двигать, а объекты откликаются на нажатие. «Статическая» — картинка PNG с ограниченным числом объектов. «Печатная» — картинка в высоком разрешении, чтобы распечатать.

У кода iframe Яндекс называет три ограничения: доступен только вид «Схема», карта показывается лишь на крупных масштабах, не все теги HTML работают. В rillo конструкторская карта всегда идёт рамкой iframe, даже если вы вставили код JavaScript, и ограничения действуют на вашем сайте.

Поиска, маршрутов и панорам на карте Конструктора по умолчанию нет. Нужен ключ. Яндекс выдаёт его в Кабинете разработчика для продукта «JavaScript API», и вставляют его в код карты, а rillo в свою рамку ключ не передаёт.

Как вставить карту на сайт в rillo?

В rillo карта ставится одним полем: в секции «Карта» вставьте ссылку на организацию, точку или карту Конструктора либо код из Яндекс Карт целиком, и rillo сам найдёт в нём адрес. Поле работает на любом тарифе, в том числе на бесплатном, до 5 страниц.

Поле называется «Ссылка на карту». Принятый адрес rillo подтверждает строкой «Распознано: Яндекс Карты». Из кода он берёт только адрес рамки, а ширину, высоту и прочие атрибуты отбрасывает и рисует рамку сам. Пока сайт не опубликован, в редакторе вместо карты стоит заглушка «Яндекс Карты: заработает на опубликованном сайте».

Маршрут — единственное место, где поле обещает больше, чем даёт: оно примет ссылку и промолчит о потере. Если людям нужен маршрут, нарисуйте линию в Конструкторе карт или поставьте на страницу кнопку со ссылкой на маршрут из «Поделиться». Яндекс пишет, что поделиться можно и построенным маршрутом, а кнопка в rillo принимает любой адрес сайта.

Посетитель увидит на опубликованном сайте обложку с булавкой. Если вы загрузили картинку в поле «Обложка карты», булавка встанет на неё. Пока человек не нажал на карту, Яндексу ничего не уходит. После нажатия рамка загружается, а подпись под ней предупреждает, что сервис получит IP-адрес посетителя и может сохранить cookie.

Что проверить на телефоне до того, как раздавать ссылку на сайт?

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

1. Откройте опубликованный сайт на телефоне, где вы не входили в rillo, и нажмите на карту. Рамка должна загрузиться, а метка стоять на вашем входе, а не на соседнем доме.
2. Сведите и разведите карту двумя пальцами. На карте Конструктора в iframe при сильном отдалении она может не показаться: Яндекс предупреждает про крупные масштабы.
3. Убедитесь, что адрес и часы работы написаны над картой текстом. В секции они остаются обычным текстом, и человек прочтёт их, не нажимая на карту. Зачем адрес нужен словами, разобрано в статье как продвигать сайт в своём городе.
4. Нажмите на кнопку с маршрутом, если поставили её: в Яндекс Картах должен открыться тот же маршрут, который вы копировали.
5. Пройдите проверку перед запуском: пока в секции нет ссылки, rillo напоминает «Добавьте ссылку на карту».