К основному контенту

1-5 мин

Zeroblock

Light

5

Этот скрипт позволит тебе сделать любую карту с точками со своими картинками, темной темой, любой кастомной темой и сразу оптимизированную.

Яндекс карты для сайта на Tilda

(cвернуть)
Инструкция
mmap
<div id="map"></div>
<a href="https://voron-dev.ru/">Ссылка</a>
<img style="width:100%;height:90%;" src="https://static.tildacdn.com/...">

1. Создай на странице зероблок в котором будем делать карту и добавь в него html-элемент

2. Для html-элемента задай класс

3. Внутрь html-элемента добавь код

4. Перейди на https://developer.tech.yandex.ru/services и получи api-ключ:

  • Войди в свой аккаунт яндекса (к нему будет привязана эта карта, поэтому можешь сразу создать для клиента отдельный аккаунт яндекса для удобства)

  • Выбери "подключить API"

  • Выбери пункт "Javascript API и HTTP Геокодер"

  • Заполни форму на подключение и нажми "Продолжить" и затем "Перейти к API"

  • Открой настройки ключа по кнопке "Изменить"

  • В поле «Ограничение по HTTP Referrer» впиши доменное имя, на котором будет отображаться карта. Если у тебя поддомен Тильды, то пиши tilda.ws. Если подключен свой домен, то нужно прописать его, например - voron-dev.ru. Сохрани изменения.

5. Для того чтобы добавить свои метки, перейди на https://yandex.ru/map-constructor/ и поставь все нужные метки

6. Загрузи в любую галерею на любой страничке твоего сайта (лучше отдельной) изображение, которое должно заменять метку на карте (при наличии), кликни по нему ПКМ и выбери "скопировать ссылку на изображение"

7. Вставь эту ссылку в генератор и укажи размеры которые она должна иметь будучи меткой и остальные настройки

8. Задай координаты центра карты при запуске. Для этого перейди на https://yandex.ru/maps/ и выбери нужное тебе здание/объект и скопируй его координаты. Масштаб можешь посчитать просто отдалив карту на максимум и дальше считай все клики на плюсик которые тебе понадобятся чтобы приблизить карту в нужное положение

9. Сгенерированный код поставь ниже зеро с html из п. 1 в блок т123

  • Если тебе нужно добавить в описание метки картинку, то в месте где должна быть картинка вставь вот этот код:

Сюда нужно вставить только ссылку на саму картинку которую ты можешь получить также как и ссылку на иконку (см. п. 6)

Сюда соответственно пропиши вместо ссылки на мой сайт свою ссылку, а вместо слова "ссылка" текст на который применится ссылка

  • Если тебе нужно добавить ссылку в описание метки, то в месте где должна быть ссылка вставь вот этот код:

  • После того как расставишь все метки нажми "Сохранить и продолжить", затем "Экспорт", выбери формат GEO JSON и скачай себе файл с метками

  • Открой его в простом блокноте, скопируй из него всё содержимое и вставь в поле "импорт меток из конструктора" в генераторе

- 3я версия api карты значительно быстрее и оптимизирована сама по себе, но не позволяет добавить поиск по карте и пробки/слои и настроить свою тему. Поэтому выбирай 2.1 только если тебе нужно что-то из этого отсутствующего в 3й версии функционала

- Если тебе нужно сделать 2 и более карты на странице или если ты делаешь карту под сайт с autoscale, то используй только 3ю версию api карты. Обрати внимание что если делаешь две и более карты на страничке, то нужно также включить последний чекбокс с названием "включи это если..."

- Имей в виду что после отправки формы в личном кабинете яндекса api ключ активируется не сразу (даже не смотря на то что он выдается тебе сразу). Поэтому чтобы активировать версию api 3 с этим ключем может потребоваться немного подождать пока яндекс обновит данные

- Обрати внимание что параметры нужно указывать прямо как написано для ориентира полупрозрачным. Именно в таком формате ожидает ввода генератор

- Лучше использовать в поле «Ограничение по HTTP Referrer» только твой подключенный домен, чтобы твой api-ключ нельзя было использовать с любого поддомена Тильды (т.е. сайт должен быть не .tilda.ws а например .ru .com и тд.)

Важно!

undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Только для api версии 2.1
undefined
undefined
Только для api версии 3
undefined
undefined
Уверенным пользователям, которые каждый день зарабатывают на создании и верстке сайтов
Всё, что во Free и Pro на 1 месяц
и еще:
Pro на 1 год
2 990 ₽
1400 ₽ — ваша выгода
Всё, что во Free
и еще:
У кого пока непрогнозируемая рабочая загрузка и расширение нужно только 
в определенное время
Pro на 1 месяц
390 ₽
Для знакомства с сервисом и тестирования бесплатного функционала
Free
Этот мод доступен на PRO тарифе
Приоритетная поддержка
~50 новых модификаций, которые планируем выпустить в течение года
Обновления библиотеки с учетом изменений Tilda
ИИ-помощник с базовыми моделями
Возможность голосовать за новые моды и закрытый чат (скоро)
undefined
~25 Pro-модификаций
Генератор CSS
Распознавание блоков
Показать блоки т123
Автосохранение Zero-блока
Подсветка кода в т123
undefined
undefined
~20 бесплатных модификаций
Темная тема для Tilda
Кнопки быстрой публикации
Настройки меню в редакторе
Никаких автоплатежей
123

Карта версии api 2.1 с поиском, метками и нормальной темной темой без шейпов и костылей:)
Обрати внимание, если тебе нужно делать несколько карт на странице, то для этого подойдёт только api версии 3. Этот пример - исключение)

Примеры работы модификации

Также карта версии api 2.1, но со скрытым поиском и элементами управления + очень темной и черно-белой темой одновременно, для демонстрации вариативности

Примеры работы модификации 2

Карта версии api 3 позволяет задать цвета для поверхности, дорог, строений, водных объектов, поп-апа для меток и по умолчанию быстрее загружается (в 3 раза быстрее)

Примеры работы модификации 3

Также карта версии api 3 полностью совместима с autoscale

Примеры работы модификации 4