Чтобы установить карту Mapfolio на свой сайт, необходимо получить собственный API-ключ Яндекс Карт.
Ключ создаётся не в Mapfolio, а в специальном сервисе Яндекса — Кабинете разработчика. После создания ключ нужно скопировать и добавить в личный кабинет Mapfolio.
Что потребуется перед началом
Перед созданием ключа подготовьте:
- учётную запись Яндекса;
- адрес сайта, на котором будет размещена карта;
- доступ к личному кабинету Mapfolio.
Если учётной записи Яндекса ещё нет, её можно создать во время входа в Кабинет разработчика.
Шаг 1. Войдите в Кабинет разработчика Яндекса
- Откройте Кабинет разработчика Яндекса.
- Нажмите кнопку входа.
- Введите логин и пароль от своего Яндекс ID.
- Если учётной записи нет, выберите создание нового Яндекс ID.
- После входа дождитесь открытия Кабинета разработчика.
Официальная инструкция Яндекса также указывает, что для работы с API можно использовать существующий Яндекс ID или зарегистрировать новый: инструкция по работе с кабинетом.
Шаг 2. Подключите JavaScript API
После входа в кабинет необходимо подключить продукт, который будет показывать интерактивную карту.
- Найдите кнопку «Подключить API».
- Нажмите на неё.
- В списке продуктов найдите «JavaScript API».
- Выберите этот продукт.
- Заполните форму подключения.
- Проверьте введённые контактные данные.
- Отправьте форму.
После успешного подключения JavaScript API появится в вашем кабинете.
Шаг 3. Создайте новый ключ
После подключения продукта создайте сам API-ключ.
- Откройте подключённый JavaScript API.
- Найдите раздел с ключами.
- Нажмите кнопку «Новый ключ».
- Если Яндекс предложит указать название, введите понятное имя.
Например:
Карта на сайте example.ru
- Подтвердите создание.
- Дождитесь появления нового ключа.
Согласно официальной инструкции Яндекса, новый ключ создаётся внутри выбранного API с помощью кнопки «Новый ключ».
Шаг 4. Настройте ограничение по домену
Для JavaScript API 3.0 необходимо заполнить ограничение по HTTP Referer. Проще говоря, нужно указать адрес сайта, на котором разрешено использовать ключ.
Такое ограничение защищает ключ от использования на посторонних сайтах. Это обязательная часть настройки ключа для карты Mapfolio.
Требование к HTTP Referer указано в документации JavaScript API Яндекс Карт.
Как определить домен своего сайта
Откройте свой сайт и посмотрите на адресную строку браузера.
Предположим, полный адрес страницы выглядит так:
https://example.ru/contacts
Для настройки ограничения потребуется только:
example.ru
Не нужно добавлять:
- https://;
- http://;
- адрес отдельной страницы, например /contacts;
- параметры после знака вопроса;
- номер порта.
| Полный адрес сайта | Что указать в ограничени |
|---|---|
| https://example.ru | example.ru |
| https://example.ru/contacts | example.ru |
| https://www.example.ru/catalog | example.ru |
| https://shop.example.ru | example.ru |
| https://project.tilda.ws/page1 | project.tilda.ws |
Как добавить домен в настройки ключа
- Откройте подключённый JavaScript API.
- Выберите созданный ключ.
- Нажмите кнопку «Изменить».
- Найдите настройки ограничений.
- Выберите ограничение по домену или HTTP Referer.
- Введите домен сайта, например example.ru.
- Если сайтов несколько, добавляйте каждый домен с новой строки.
- Сохраните изменения.
Яндекс рекомендует использовать ограничение по домену для JavaScript API. Домены вводятся по одному в строке, без протокола, порта и адреса конкретной страницы: настройка ограничений API-ключа.
Если карта будет размещена на нескольких сайтах
Добавьте каждый домен с отдельной строки.
Например:
- example.ru
- second-site.ru
- project.tilda.ws
Не разделяйте адреса запятыми и не записывайте несколько доменов в одну строку.
Шаг 5. Скопируйте API-ключ
После создания и настройки ключа скопируйте его полное значение.
- Вернитесь на страницу ключа.
- Найдите длинную строку с буквами, цифрами и дефисами.
- Нажмите кнопку копирования рядом с ключом. Если такой кнопки нет, выделите ключ мышкой и скопируйте его сочетанием клавиш Ctrl + C.
- Не изменяйте скопированную строку.
Ключ необходимо копировать полностью — без пробелов в начале или конце.
Шаг 6. Добавьте ключ в Mapfolio
- Откройте личный кабинет Mapfolio.
- Перейдите в раздел «Настройки».
- Откройте вкладку «API ключи».
- Найдите блок «API ключ Яндекс.Карты».
- Нажмите на поле «Введите API».
- Вставьте скопированный ключ сочетанием клавиш Ctrl + V.
- Нажмите кнопку «Сохранить».
После сохранения ключ можно будет выбрать при создании или редактировании виджета в разделе «2. API карты».
Когда ключ начнёт работать
Новый ключ или изменённые ограничения могут начать работать не сразу.
Яндекс сообщает, что активация ключа и применение ограничений могут занять до 15 минут.
Если после сохранения карта не загрузилась:
- Подождите 15 минут.
- Обновите страницу сайта.
- Проверьте, что скопирован весь ключ.
- Проверьте домен в ограничениях.
- Убедитесь, что ключ создан для JavaScript API.
- Попробуйте снова открыть карту.
Частые ошибки при настройке
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Выбран другой продукт Яндекса | Карта не загружается | Создайте ключ для JavaScript API |
| Не заполнен HTTP Referer | JavaScript API 3.0 не работает | Добавьте домен сайта в ограничения |
| Указан полный адрес страницы | Ограничение может не пройти проверку | Оставьте только домен |
| В домене указано https:// | Адрес введён в неправильном формате | Удалите https:// |
| Ключ скопирован не полностью | Mapfolio сообщает о некорректном ключе | Скопируйте ключ заново |
| Изменения проверяются сразу | Кажется, что настройка не работает | Подождите до 15 минут |
| Указан не тот сайт | На рабочем сайте карта не загружается | Добавьте домен страницы с виджетом |
Проверка перед продолжением
Перед установкой виджета убедитесь, что:
- в Кабинете разработчика подключён JavaScript API;
- создан новый API-ключ;
- ключ не заблокирован;
- заполнено ограничение по HTTP Referer;
- указан правильный домен сайта;
- ключ полностью скопирован;
- ключ сохранён в Mapfolio;
- после создания или изменения ключа прошло до 15 минут.
Если все пункты выполнены, API-ключ готов к использованию в виджете Mapfolio.