Быстрый старт: от регистрации до карты на сайте

В этой инструкции мы пройдём весь путь от создания аккаунта до установки готовой карты на сайт.

В результате у вас будет:

• зарегистрированный аккаунт Mapfolio;
• подключённый API-ключ Яндекс Карт;
• первая опубликованная точка;
• настроенный виджет;
• карта, установленная на сайте.

Откройте страницу регистрации Mapfolio. 

В форме регистрации необходимо заполнить три поля: почта, пароль, повторите пароль, а так же ознакомиться и согласиться с Публичной офертой, и дать согласие на обработку персональных данных.

После заполнения формы и согласия с документами - нажмите кнопку «Зарегистрироваться».

Если данные введены правильно, Mapfolio создаст аккаунт и выполнит вход.

API-ключ нужен для загрузки Яндекс Карт внутри виджета.

Сначала получите ключ для JavaScript API Яндекс Карт в кабинете разработчика Яндекса. Подробнее как это сделать рассказали тут. После этого добавьте ключ в Mapfolio.

1. Откройте раздел «Настройки».
2. Перейдите на вкладку «API ключи».
3. Вставьте полученный ключ в поле «Введите API».
4. Нажмите «Сохранить».

Теперь добавим объект, который будет показан на карте.
Откройте раздел «Главная» и нажмите круглую кнопку «+».
Откроется форма создания точки.

В поле «Название точки» напишите понятное название объекта.

Например:

• Магазин на Ленина;
• Главный офис;
• Выполненный проект;
• Парк Горького.

Название увидят посетители сайта.

Найдите блок «Адрес» и нажмите на поле «Фактический адрес».

Начните вводить адрес. Mapfolio покажет подходящие варианты.

Нажмите на правильный вариант в выпадающем списке. После этого карта переместится к выбранному месту.

Включите переключатель «Указать свой адрес».

После этого появится поле «Отображаемый адрес». В нём можно написать более понятное описание места.

Например: «Вход со стороны парковки».

Фактический адрес используется для определения координат, а отображаемый адрес видит посетитель.

В блоке «Описание» можно добавить информацию об объекте.

Для первого запуска достаточно создать одно поле, например «Об объекте», и написать несколько предложений.

Этот шаг необязателен. Точку можно сохранить только с названием и выбранным положением на карте.

Перейдите на вкладку «Медиа файлы».

Перетащите фотографию в область загрузки или нажмите «Выберите файлы».

Дождитесь появления фотографии в форме.

Перед сохранением откройте вкладку «Предпросмотр».

Проверьте:

• название;
• адрес;
• фотографию;
• описание;
• положение маркера на карте.

Если всё указано правильно, нажмите «Сохранить».

Откройте раздел «Виджеты».

Нажмите на карточку с большим знаком плюса. Откроется страница создания виджета.

1. Выберите «Встроенный блок».
2. Введите название виджета.
3. Нажмите «Подтвердить выбор».
4. В блоке «API карты» выберите подключённый ключ.
5. Перейдите к параметрам и дизайну.

Для первого запуска можно оставить большинство настроек без изменений.

Проверьте параметры для мобильных и десктопных устройств, а затем выберите подходящий дизайн.

При необходимости можно изменить:

• ширину и высоту виджета;
• блок-превью перед открытием карты;
• текст и название кнопки;
• фоновую фотографию;
• фоновое видео;
• затемнение фона;
• тень;
• скругление углов;
• цвета интерфейса;
• стандартный и активный маркеры;
• отображение надписи Mapfolio.

Перейдите к блоку «Предпросмотр».

Переключайтесь между кнопками «Десктоп» и «Мобильный», чтобы проверить оба варианта.

Откройте первую точку и убедитесь, что отображаются карта, маркер и карточка объекта.

Нажмите «Сохранить» в нижней части страницы.

После сохранения в блоке «Код для установки» появится готовый код.

Нажмите кнопку копирования рядом с кодом. Mapfolio скопирует весь необходимый код в буфер обмена.

Первая строка определяет место, в котором появится карта.

Вторая строка загружает виджет Mapfolio.

Копировать и устанавливать нужно обе строки.

Откройте редактор страницы, на которой должна находиться карта.

Добавьте блок для HTML-кода и вставьте в него скопированный код Mapfolio.

Сохраните или опубликуйте страницу.

Откройте опубликованную страницу как обычный посетитель.

Проверьте работу карты.

1. Убедитесь, что карта загрузилась.
2. Найдите маркер первой точки.
3. Откройте список точек.
4. Нажмите на карточку.
5. Проверьте название, адрес, фотографию и описание.
6. Откройте страницу на телефоне.
7. Проверьте мобильный режим виджета.

1. Убедитесь, что страница сайта опубликована.
2. Проверьте, что вставили обе строки кода.
3. Убедитесь, что код находится в HTML-блоке.
4. Проверьте, что виджет включён.
5. Проверьте, что точка опубликована.
6. Убедитесь, что в виджете выбран API-ключ.
7. Проверьте ограничения доменов в настройках API-ключа Яндекс Карт.
8. Обновите страницу сайта.

Перед завершением убедитесь, что:

• почта подтверждена;
• API-ключ подключён;
• домен сайта разрешён в настройках ключа;
• первая точка опубликована;
• у точки правильно указано место на карте;
• виджет сохранён и включён;
• код скопирован из личного кабинета;
• карта работает на компьютере;
• карта работает на телефоне.