Как добавить карту на сайт

Карты стали популярным сервисом для сайтов. Удобно показать клиенту проезд к офису или выложить маршрут путешествия. Карту можно взять готовую или сделать самому. В настоящее время существует огромное количество онлайн сервисов, десктопных программ и просто API (application programming interface – интерфес программирования приложений) для работы с картами. В этой статье мы разберем, как добавить готовую карту на сайт без программирования.

Самые известные сервисы, предоставляющие нам доступ к картам – это Яндекс и Google. Помимо них есть еще множество небольших, но для решения простых задач этих хватает с избытком.

Выкладка карты Google


Сначала, для простоты, покажем, как вставить фрагмент карты на сайт без программирования. Для этого воспользуемся сайтом Google maps, где можно настраивать карту по своему вкусу:
  • добавлять маркеры;
  • создавать маршруты и описания;
  • просматривать пробки и т.д.
Зайдите в свой аккаунт Google или создайте его, если у вас еще нет. И перейдите по указанному адресу. Чтобы перейти в меню, щелкните по «сендвичу» на панели в левом верхнем углу.

Попробуйте отобразить карту в разных видах – это может быть интересным.
Давайте попробуем разместить карту Екатеринбурга на нашем сайте. В Google картах масштабируйте по своему вкусу и переведите на Екатеринбург. Настройте масштаб.

Щелкните по меню и выберите «Ссылка/Код». Появится вот такое окно.

Это ссылка на часть карты. Нам нужна вкладка «Код».

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

И далее перейдите в редактор и создайте блок в том месте, где хотите видеть карту.

Добавьте в блок виджет «HTML-код» и вставьте код из буфера обмена.

Попробуйте запустить страницу. Вы увидите на ней карту Екатеринбурга. При этом она масштабируема. Фактически, вы вставили обычную карту Google, только с центровкой в Екатеринбурге.

Создаем карту в Яндекс


Здесь мы тоже воспользуемся конструктором карт. Перейдите по адресу
https://yandex.ru/map-constructor/
Вам необходимо имеет аккаунт в Яндекс. Если его нет – создайте.
Вы увидите следующее окно.

Здесь мы уже выбрали Екатеринбург. По умолчанию открывается Москва. Нажмите внизу «сохранить и продолжить». Дальше откроется ваш фрагмент карты. Можно изменить размер.

Теперь осталось нажать кнопку «Получить код карты» и скопировать код в буфер.

Вставьте этот код на свой сайт в виджет «HTML-код» и посмотрите результат.

Яндекс карты обладают более широким функционалом, чем Google. В них вы можете посмотреть пробки прямо на вашей карте, наложить слои, построить маршрут. Google maps этого не позволяют. Еще Яндекс карты разрешают ставить метки в конструкторе, которые будут отображаться и на вашем сайте. В Google метки ставятся, но на сайт не переносятся. Это очень неудобно.
Давайте разберем, как поставить метку и дополнить ее описанием. Перейдите в конструктор и увеличьте карту. Давайте поставим метку на зоопарке. Для этого надо найти его и щелкнуть по кнопке «Метки».

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

Как видим, метка сохранилась.

Заключение


Мы раскали о том, как вставить карту на сайт. Это самый простой способ, в котором вам нет необходимости программировать. У карт Google функций совсем нет, а вот Яндекс дает вполне приличную карту.
На самом деле, если освоить программирование в минимальном количестве, можно создавать собственные карты, выкладывать другие из открытого доступа и делать с ними много полезных вещей. Но об этом в следующий раз.
03 августа 2017, 15:44    Ivan Web-дизайн 0    2 0

Комментарии (0)

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