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 ₽
Всё, что во Free
и еще:
У кого пока непрогнозируемая рабочая загрузка и расширение нужно только
в определенное время
Pro на 1 месяц
490 ₽
Для знакомства с сервисом и тестирования бесплатного функционала
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