Как сделать любую карту для сайта на Tilda?

1-5 мин.

JavaScript

Zeroblock

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

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

Инструкция

Важно!

- 3я версия api карты значительно быстрее и оптимизирована сама по себе, но не позволяет добавить поиск по карте и пробки/слои и настроить свою тему. Поэтому выбирай 2.1 только если тебе нужно что-то из этого отсутствующего в 3й версии функционала
- Если тебе нужно сделать 2 и более карты на странице или если ты делаешь карту под сайт с autoscale, то используй только 3ю версию api карты. Обрати внимание что если делаешь две и более карты на страничке, то нужно также включить последний чекбокс с названием "включи это если..."
- Имей в виду что после отправки формы в личном кабинете яндекса api ключ активируется не сразу (даже не смотря на то что он выдается тебе сразу). Поэтому чтобы активировать версию api 3 с этим ключем может потребоваться немного подождать пока яндекс обновит данные
- Обрати внимание что параметры нужно указывать прямо как написано для ориентира полупрозрачным. Именно в таком формате ожидает ввода генератор
- Лучше использовать в поле «Ограничение по HTTP Referrer» только твой подключенный домен, чтобы твой api-ключ нельзя было использовать с любого поддомена Тильды (т.е. сайт должен быть не .tilda.ws а например .ru .com и тд.)

(Развернуть)

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

4. Перейди на

и получи api-ключ:

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

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

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

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

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

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

5. Для того чтобы добавить свои метки, перейди на

и поставь все нужные метки

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

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

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

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

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

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

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

8. Задай координаты центра карты при запуске. Для этого перейди на

здание/объект и скопируй его координаты. Масштаб можешь посчитать просто отдалив карту на максимум и дальше считай все клики на плюсик которые тебе понадобятся чтобы приблизить карту в нужное положение

и выбери нужное тебе

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

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

Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности

Не хватает какой-то функции?