Этот скрипт позволит тебе сделать любую карту с точками со своими картинками, темной темой, любой кастомной темой и сразу оптимизированную. Пример работы модификации внизу cтраницы
Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓
1. Создай на странице зероблок в котором будем делать карту и добавь в него html-элемент
2. Для html-элемента задай класс
Инструкция
Важно!
- 3я версия api карты значительно быстрее и оптимизирована сама по себе, но не позволяет добавить поиск по карте и пробки/слои и настроить свою тему. Поэтому выбирай 2.1 только если тебе нужно что-то из этого отсутствующего в 3й версии функционала - Если тебе нужно сделать 2 и более карты на странице или если ты делаешь карту под сайт с autoscale, то используй только 3ю версию api карты. Обрати внимание что если делаешь две и более карты на страничке, то нужно также включить последний чекбокс с названием "включи это если..." - Имей в виду что после отправки формы в личном кабинете яндекса api ключ активируется не сразу (даже не смотря на то что он выдается тебе сразу). Поэтому чтобы активировать версию api 3 с этим ключем может потребоваться немного подождать пока яндекс обновит данные - Обрати внимание что параметры нужно указывать прямо как написано для ориентира полупрозрачным. Именно в таком формате ожидает ввода генератор - Лучше использовать в поле «Ограничение по HTTP Referrer» только твой подключенный домен, чтобы твой api-ключ нельзя было использовать с любого поддомена Тильды
(т.е. сайт должен быть не .tilda.ws а например .ru .com и тд.)
- Войди в свой аккаунт яндекса (к нему будет привязана эта карта, поэтому можешь сразу создать для клиента отдельный аккаунт яндекса для удобства)
- Выбери "подключить API"
- Выбери пункт "Javascript API и HTTP Геокодер"
- Заполни форму на подключение и нажми "Продолжить" и затем "Перейти к API"
- Открой настройки ключа по кнопке "Изменить"
- В поле «Ограничение по HTTP Referrer» впиши доменное имя, на котором будет отображаться карта. Если у тебя поддомен Тильды, то пиши tilda.ws. Если подключен свой домен, то нужно прописать его, например - voron-dev.ru. Сохрани изменения.
Сюда нужно вставить только ссылку на саму картинку которую ты можешь получить также как и ссылку на иконку (см. п. 6)
Сюда соответственно пропиши вместо ссылки на мой сайт свою ссылку, а вместо слова "ссылка" текст на который применится ссылка
undefined
undefined
undefined
undefined
undefined
6. Загрузи в любую галерею на любой страничке твоего сайта (лучше отдельной) изображение, которое должно заменять метку на карте (при наличии), кликни по нему ПКМ и выбери "скопировать ссылку на изображение"
undefined
7. Вставь эту ссылку в генератор и укажи размеры которые она должна иметь будучи меткой и остальные настройки
8. Задай координаты центра карты при запуске. Для этого перейди на
здание/объект и скопируй его координаты. Масштаб можешь посчитать просто отдалив карту на максимум и дальше считай все клики на плюсик которые тебе понадобятся чтобы приблизить карту в нужное положение
и выбери нужное тебе
undefined
9. Сгенерированный код поставь ниже зеро с html из п. 1 в блок т123
- Открой его в простом блокноте, скопируй из него всё содержимое и вставь в поле "импорт меток из конструктора" в генераторе
Отчистить поля
undefined
(Только для api версии 2.1)
(Только для api версии 3)
Скопировать код
Этот мод доступен в PRO тарифе
0
349
₽
₽
Voron Free
Voron Pro
всего за
/ 1 мес.
Доступ ко всем модификациям библиотеки
Просмотр используемых блоков и их настроек для любого сайта, сделанного на Tilda, в том числе step-by-step анимаций
После создания они будут работать даже если PRO доступ закончится
123
Карта версии api 2.1 с поиском, метками и нормальной темной темой без шейпов и костылей:) Обрати внимание, если тебе нужно делать несколько карт на странице, то для этого подойдёт только api версии 3. Этот пример - исключение)
Пример работы модификации 1
Также карта версии api 2.1, но со скрытым поиском и элементами управления + очень темной и черно-белой темой одновременно, для демонстрации вариативности
Пример работы модификации 2
Карта версии api 3 позволяет задать цвета для поверхности, дорог, строений, водных объектов, поп-апа для меток и по умолчанию быстрее загружается (в 3 раза быстрее)
Пример работы модификации 3
Также карта версии api 3 полностью совместима с autoscale
Пример работы модификации 4
Опиши нужный функционал через эту форму и он будет добавлен!
Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности