Home / Сайтостроение / Как вставить карту Яндекс, Google или карту метро на сайт?

Как вставить карту Яндекс, Google или карту метро на сайт?

Привет, друзьям блога nazyrov.ru!

Сегодня замечательный пост, который многим может пригодиться. А точнее, я расскажу, как вставить карту на сайт. Нет, это не XML или HTML карта, которые обязательно должны быть на любом блоге, о них я уже рассказывал здесь.

вставить карту на сайт

Я расскажу, как вставить обычную графическую карту, или карту проезда, можно назвать как угодно. Такую карту можно позаимствовать с Яндекс карты или Google maps. Зачем же ее нужно ставить на сайт, спросите вы. Это интересное дополнение сайта и улучшение удобства пользования. На тревел блогах, благодаря таким картам, можно указывать маршрут и отмечать какие-то интересные места. Для сайтов визиток, это указание как до них добраться. Идей применения такой карты предостаточно, стоит только включить фантазию.

Быстрая навигация:
Вставить Яндекс карты на сайт
Вставить карту Гугл на сайт
Как установить карту проезда на сайт
Карта метро на сайт

Вставить Яндекс карты на сайт

Вставить Яндекс карту на свой сайт можно несколькими способами:

  • Использование возможностей конструктора;
  • При помощи плагинов и модулей;
  • API от Яндекс;

Использование возможностей конструктора.

Если ваш сайт создан при помощи какого-то конструктора, вроде uCoz или WIX. Проверьте, поддерживает ли конструктор эту возможность. На многих конструкторах эта идея продумана и порой достаточно вставить виджет в необходимое место, и можно любоваться картой от Яндекс на сайте.

Карта при помощи плагинов и модулей.

Для большинства CMS разработаны различные плагины и модули. Если у вас сайт на WordPress и вы не умеете или не любите возиться с кодами, вставить Яндекс карту на сайт можно при помощи плагина Oi Yandex.Maps for WordPress.

Установка и настройка плагина стандартная. После того, как вы активируете плагин, в визуальном редакторе появится кнопка «Яндекс карта», нажав на которую вы сможете вписать населенный путь, и плагин при помощи шорткода выведет карту. Эта карта ничем не будет отличаться от той, к которой вы привыкли, просматривая пробки в Яндекс. Карту можно передвигать, менять масштаб, переключаться на вид со спутника и прочие фишки, которые есть в стандартных Яндекс картах.

Выглядит такая карта вот так:

карта яндекс плагин

Благодаря плагину, на карте можно сделать отметку любого адреса, вставить всплывающий текст (описание местоположения – «кабак у дяди Васи»).

Плагин Oi Yandex.Maps for WordPress очень легок и прост, но не без минусов. Если вам необходимо указать какой-то мелкий, никому не известный населенный пункт, придется сначала узнать его координаты, иначе Он может быть просто не найден, или найден «тезка» вашего городишки. Но в целом оценка 5 баллов!

Возможно вас заинтересует:  Делаем хлебные крошки на сайте!

Нашел еще несколько аналогичных плагинов, принцип работы схож, поэтому смысла не вижу их описывать.

API от Яндекс.

Третий способ вставить Яндекс карту на сайт, это использование API (Интерфейс Программирования приложений) от Яндекс. Не пугайтесь умных словечек, вам не нужно быть программистом, чтобы добавить Яндекс карту на сайт при помощи API. Делается это в два счета.

Просто переходим по ссылке — https://tech.yandex.ru/maps/tools/constructor . На этой странице можно сконструировать карту Яндекса любого размера, при этом проложив маршрут и сделав пометку об объекте. Затем нужно скопировать предоставленный код и вставить на свой сайт.

Процесс конструирования Яндекс карты опишу чуть ниже. Да и на странице конструктора карт тоже имеются все необходимые подсказки.

Результат будет примерно такой:

конструктор карт Яндекс

Как вставить карту гугл на сайт

Не знаю, пользуетесь ли вы картами от гугл. Лично я ими перестал пользоваться после одного не совсем приятного случая, который произошел со мной около полугода назад.

Поехали мы с ребятами в Москву по делам на своей машине, и чтобы не заблудиться, скачали навигатор (уже не помню какой) на планшет. Навигатор использовал технологии Google Maps, предупреждал о камерах на дороге и прочие навороты. Как оказалось, Москва строится семимильными шагами, и в гугл картах это не учитывалось. Карты просто устарели, в одном месте построили новую развязку, в другом идет стройка новой высотки и переулок перекрыли, отправляя машины в объезд.

Результат работы навигатора нас не порадовал. Дали мы километров 12 круга по утренней Москве, а могли просто свернуть в небольшой переулок, который появился недавно. Бывало едешь в каком-нибудь тоннеле, навигатор говорит: «Поверните направо», а поворачивать некуда, справа стена 🙂

Но у гугл карт есть и большие плюсы. В отличие от Яндекса, который ориентирован в основном на Россию и ближнее зарубежье, Google Maps может показать самые отдаленные уголки нашей планеты.

Вставить карту от гугл (Google Maps) на сайт можно так же как в предыдущем способе.

  • С использованием виджета конструктора, если таковой поддерживает ваш конструктор сайта;
  • При помощи плагина;
  • С использованием API;

Использование виджета конструктора для вставки гугл карты (Google Maps) на сайт.

Я не любитель конструкторов. Поддерживает ли ваш конструктор эту технологию, можно узнать у тех поддержки. На uCoz такой виджет присутствует, это знаю точно.

Вставка карты Гугл на сайт WordPress при помощи плагина.

Вывести карту от гугл (Google Maps) на сайт WordPress можно при помощи плагина MapPress Easy Google Maps. После установки и активации плагина, на экране добавления новой статьи, появиться раздел «MapPress».

Возможно вас заинтересует:  Как убрать ссылку – сайт размещается на Спринхост

Для создания новой карты, нужно кликнуть по кнопке «New Map».

new map

И в появившемся окне заполнить информацию – название карты, размер и маркер. К тому же есть возможность вставки своей картинки, которая будет появляться при клике по маркеру.

Вот пример, как будет выглядеть карта от гугл, выводимая плагином MapPress Easy Google Maps:

карта гугл плагин

Добавление карты Гугл на сайт при помощи Google Maps.

Это еще один способ добавить карту Гугл на сайт. Для этого находим в Гугл картах необходимый населенный пункт, затем нажимаем на значок шестеренки в правом нижнем углу, и во всплывшем окне выберете раздел «Поделитесь с друзьями или получите код карты».
Затем необходимо скопировать код и вставить на сайт.

Выглядеть такая карта будет вот так:

Google Maps

Как установить карту проезда на сайт?

Для реализации этой цели, больше всего мне понравился конструктор Яндекс Карты. Как я уже упомянул выше, на странице конструктора есть инструкция по созданию и добавлению карты проезда на сайт. Но все же давайте вкратце опишу сам процесс.

Страница конструктора карт от Яндекс доступна по ссылке — https://tech.yandex.ru/maps/tools/constructor.

Для создания карты проезда, введите в поисковую строку название населенного пункта. Конструктор сам найдет нужное место. Наша задача только немного отредактировать карту и задать схему проезда.

При необходимости сразу измените масштаб карты.

новая карта

Теперь воспользуемся панелью инструментов. Можно отметить несколько точек (маркеров), изменить их цвет и задать описание.

расстановка маркеров

При помощи инструмента «рисование линий», нужно нарисовать маршрут проезда к объекту.

маршрут на карте

Инструмент «Рисование многоугольников» позволит отметить какую-то область на карте.

отметка отдельной площади

При помощи инструмента «Изменение размеров карты» можно подогнать ее под размер вашей web страницы.

И в заключение нужно ввести название карты проезда, сохранить ее и получить код, который можно вставить на сайт.

код карты Яндекс

Как видите все очень просто.

Карта метро на сайт

Вставить карту метро на сайт можно двумя способами.

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

Второй способ вставить интерактивную карту метро на сайт – вывести ее во фрейме с сервиса Яндекс Метро.

Буду признателен, если кто-то подскажет другой способ!

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

35 комментариев

  1. Интересно, теперь надо придумать зачем ее вставлять 🙂 Но тем не менее, спасибо за информацию.

    Ответить
    • Андрей, я ведь в статье написал, что карта нужна преимущественно для сайтов визиток и мелких компаний.

      Ответить
    • Для блогов про путешествия тоже необходимая вещь… Часто встречаю интересную статью, а вот как добраться и точки на карте нету.

      Ответить
  2. Привет. А я частенько вставляю карты. Когда показываю маршрут как добраться.

    Но пользуюсь Гуглами, они мне больше нравятся. Знают такие места на Урали, о которых Яндекс не подозревает 🙂

    Ответить
    • Привет. Это точно )) Я сам тоже это заметил. Если бы гугл еще регулярно обновлял карты мегаполисов, вообще цены бы ему не было.

      Ответить
      • А я пока еще не встречался с затруднениями. Мегаполисы меня не особо интересуют, а вот места отдаленные от цивилизации он показывает хорошо. Даже встречал 3 вида маршрута — автомобиль, велосипед и пешком 🙂

      • Согласен, у Google хорошая спутниковая топографическая съемка. Ради интереса смотрел город в котором я родился (в Киргизии), Яндекс показывает только в виде схемы, никаких отметок улиц и тем более съемок со спутника. А при помощи Google карт увидел даже крышу дома своего ))
        Сложность видимости города в том, что он расположен в ущелье горной местности.

      • У Гугла, видимо, хорошие спутники))

      • Ну уж получше чем у Яндекса 🙂

    • Да, на Яндекс.Карте не обнаружила здание, которое построено еще в 50-х годах прошлого века. Пришлось карту от Гугла ставить.

      Ответить
  3. Андрей, оказывается все так просто, как «дважды два»! Как раз, в скором времени буду делать для подруги сайт-визитку, так там нужна будет карта проезда. Очень и очень помогли! Спасибо!

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

    Ответить
  5. Когда-то еще на CMS Drupal делал сайт-визитку и использовал API Яндекса. Все было достаточно просто.
    Для обычных блогов это конечно не нужно, но для визиток и тревел блогов и правда будет полезно.
    Андрей, чем делал рейтинг статей?

    Ответить
  6. Довольно часто пользовался вставкой карт, когда были у меня три сайта туристической тематики. А недочеты есть и гугловских карт и у яндекса, так что прежде чем ставить нужно убедиться в том что нет ошибок

    Ответить
    • У любого сервиса есть свои плюсы и минусы. Думаю исходя из этого и нужно выбирать то, что подходит именно вам.

      Ответить
    • Помню когда по Бали путешествовал, несколько раз по таким картам отправлялся совсем в другую сторону. Координаты в статье правильно напишут, а точку на карте отметят криво или ошибки какие-то.

      Ответить
  7. Елена Прекрасная:

    О прикольная штука, Андрей! Я как раз не знала как это делать, очень удобно, особенно при объяснении карты проезда. Спасибо, буду знать.

    Ответить
  8. Полезная штука для магазинов и сайтов визиток. Вопрос, как сильно такая карта грузит сайт? Андрей, ты случайна не проверял этот момент?

    Ответить
    • Нет не проверял, но думаю не больше чем видеоролик вставленный с ютуб.
      По сути API карта это обычный виджет, и нагрузка от него не сильно отличается от виджета группы соц. сети. Плагин конечно немного тяжелее.

      Ответить
  9. Классная статья! Думаю стоит взять её на вооружение)) Кстати, это первый пост, который я встречал в сети на такую тему, так что Андрей, первые позиции в поисковых системах обеспечены! 🙂

    Ответить
    • Спасибо, Жень.
      Надеюсь на первые позиции 🙂 По одному НЧ запросу на эту статью уже есть трафик с ПС.

      Ответить
  10. Гугловская больше нравиться.Заметил. что яндекс копирует все примочки, которые вводит гугл. сначала гугл изменит тон карты.потом яндекс сделал тоже самое.
    не так давно гугл ввёл меню в виде небольших иконок. Через некоторое время аналогичное появилось и у яндекса.

    Ответить
    • Сам не раз замечал, что Яндекс повторяет за «старшим братом». Это касается всех сервисов — карты, поиск, картинки, фильтры и т. д.

      Ответить
  11. Рита Молчанова:

    Пожалуй буду использовать 3 способ( API от Яндекс).Теперь осталось вникнуть. А идея очень даже….Спасибо, Андрей.

    Ответить
  12. Долматов:

    Я на свой сайт не смог вставить две карты, т.к. два пункта выдачи товара! Может вы подскажете, как вставить две карты сразу и возможно это вообще?

    Ответить
  13. Очень красиво выглядит на сайте трехмерная карта, показывающая трек, записанный в GPS. Вот только для планшетов она не работает, софта нет. Получается вид с высоты птичьего поета!

    Ответить
  14. Alex:

    Здравствуйте. а как вот сделать подобное подскажите http://www.vodokanal.spb.ru/dev/map/

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *