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

В этой статье рассмотрим установку Яндекс карт без использования плагина, поэтому это подойдет как для обычного сайта, так и для сайта созданного на движке WordPress. О том как добавить Google карты читайте тут.

Яндекс карты

Яндекс карты (Yandex maps) – отличный инструмент, который позволит сообщить о местоположении офиса, склада или магазина. Разместив на сайте Яндекс нарту, с подробной схемой проезда, можно быть уверенным, что клиент не заблудиться.

Если вы владелец интернет-магазина, то можно оснастить форму заказа картой, которая позволит указать клиенту свое место положения, что значительно сэкономит время ожидания. Да и курьер будет благодарен.

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

Если представить к сравнению Яндекс и Google карты (добавление Google карт на сайт), то мое предпочтение будет отдано именно сервису Яндекс карт, так как он предлагает для пользователя более широкие возможности. Не говоря уже о том, что Яндекс карты имеют лучшую детализацию, а так же народную карту, которую редактируют по спутниковым снимкам сами пользователи.

Пожалуй, с прелюдией закончим, как говорится: «Лучше один раз увидеть…».

Установка (добавление) Яндекс карты на свой сайт

Перед тем, как установить Яндекс карту на свой сайт, ее необходимо создать. Сделать это можно в конструкторе карт:

http://api.yandex.ru/maps/tools/constructor/

При переходе по ссылке вы увидите страницу:

Установка яндекс карт на WordPress

  1. Воспользовавшись поиском найдите интересующий вас город, либо конкретный район/адрес.
  2. Установка точек позволит создать точку с описанием, которое будет появляться при клике по этой точке (маркеру). Можно задать цвет и нумерацию.маркер на карте
  3. Рисование линий – удобно, если нужно проложить маршрут.
  4. Рисование многоугольника.
  5. Можно выбрать 4 варианта отображения карты: схема, спутник, гибрид, народная карта.схема

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

изменение размера карты

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

название карты

Копируем код:

скопировать код

Данный код карты легко вставить в WordPress виджет произвольного текста или html-кода:

виджет с кодом карты

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

Так же можно вставить код карты в WordPress запись или на страницу. Единственный момент – вставлять нужно в html-редакторе, а не в визуальном.

Результат работы:


Для создания раньше использовался api-ключ. В настоящее время его использование не обязательно. Однако, вам следует прочитать некоторые рекомендации Яндекса:

http://api.yandex.ru/maps/form.xml

В api Яндекс картах для разработчиков существует широкий ассортимент функций, которые можно встроить на свой сайт и значительно улучшить функциональность карт:

Маршрутизация - https://tech.yandex.ru/maps/jsbox/2.1/multiroute_driving

Пробки - https://tech.yandex.ru/maps/jsbox/2.1/traffic_control/?from=mapsfeatures

Так же есть возможность определять местоположение пользователя и многое другое.

Примеры кода этих и других карт можно посмотреть в песочнице api Яндекса:

http://api.yandex.ru/maps/jsbox/2.1/deliveryCalculator

Один из примеров (маршрутизация и стоимость) встроил на свой сайт. Выберите 2 точки на карте, затем нажмите на начальную точку, во всплывшем окне будет информация о стоимости доставки.

Комментарии к “Как добавить Яндекс карту на сайт

  1. Пожалуйста подскажите, возможно ли в бесплатном пользовании Яндекс картами вставить ссылку на внешний сайт например в hint-подсказку. Увидел такое на hh.ua — поиск вакансий по карте.

      1. всё верно. но проблема была не в этом, я не так написал. нужно было множество. Решил проблему этим методом https://tech.yandex.ru/maps/jsbox/2.0/balloon_and_hint , немного доработал, соединив с предыдущим:

        myPlacemark = new ymaps.Placemark([55.907228, 31.260503], {
        // Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
        balloonContentHeader: «Балун метки»,
        balloonContentBody: «Содержимое балуна метки»,
        balloonContentFooter: «Подвал»,
        hintContent: «Хинт метки»
        });
        myPlacemark = new ymaps.Placemark([55.907228, 31.260503], {
        // Чтобы балун и хинт открывались на метке, необходимо задать ей определенные свойства.
        balloonContentHeader: «Балун метки»,
        balloonContentBody: «Содержимое балуна метки»,
        balloonContentFooter: «Подвал»,
        hintContent: «Хинт метки»
        });

        Спасибо за помощь

  2. Здравствуйте, Юрий.
    Помогите пожалуйста разобраться как поставить на свой сайт карту маршрутизации.
    Вот на https://tech.yandex.ru/maps/jsbox/2.1/multiroute_driving мы видим 2 файла:
    multiroute_driving.js и multiroute_driving.html
    А вот что с ними делать, не понятно. Песочница какая то для взрослых…
    Ну multiroute_driving.html файл вставляем в страницу, а multiroute_driving.js куда?
    Как их связать? Нужно ли в них что-то изменять?
    Подскажите, пжласта.

    1. Добрый день. Все очень просто. В файле multiroute_driving.html есть строчка:
      <script src="multiroute_driving.js" type="text/javascript"></script>
      Именно эта строчка и подключает JS. Вам нужно изменить src="multiroute_driving.js" на src="путь_к файлу/multiroute_driving.js"

  3. Спасибо, Юрий, что ответили.
    Теперь ПОЧТИ понятно. Я с js никогда еще дела не имел.
    А куда нужно забросить файл multiroute_driving.js ? Как правильно? В папку js шаблона? Обязательно?
    И в src="путь_к файлу/multiroute_driving.js " путь должен начинаться с названия сайта?
    Например src="/мой сайт/wp-content/themes/twenty/js/multiroute_driving.js " Так правильно?

    1. Ну можно например в папку http://needsite.net/wp-content/uploads/
      Это стандартная папка загрузки. Но вы можете в любую, разницы нет. главное что бы сами потом не потерялись.
      А путь указываете полностью:
      src="http://needsite.net/wp-content/uploads/multiroute_driving.js "
      Обязательно с http, а то бывает ВП неправильно ссылку интерпретирует.

  4. Что то я делаю не так. Не открывается карта.
    Что нужно делать с файлом multiroute_driving.html ?
    Я его содержимое просто вставил в страницу. Наверно тут ошибка.

    1. Да, его нужно вставлять не полностью 🙂
      Вам нужен только этот кусок:
      <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
      <script src="multiroute_driving.js" type="text/javascript"></script>
      <div id="map" style="height:500px;width:500px;"></div>
      Только путь к JS укажите свой.

  5. Вставил в страницу так

    Карта появилась. Только на ней город Владимир, а мне бы Москву.

    1. Вы имеете ввиду в конструкторе? Там система what i see is what i get. Город который вы видите на момент сохранения карты и будет отображен на ней.

  6. Нет. Можно ссылку на этот конструктор?
    В том файле js поменял координаты города и zoom.
    А как вставить html я подсмотрел у Вас, как вставлена карта в конце этой статьи.
    Спасибо за помощь.

  7. Этим конструктором я давно пользуюсь.
    Я думал Вы говорите о каком то другом конструкторе для более продвинутых карт.
    Мне всегда хотелось поставить на сайт карты с пробками, маршрутизатор, стоянки, карту метро.
    Вот сегодня первую карту пробок сделал.
    К сожалению нигде не нашел я объяснения простым языком как делать такие карты. Информации много, но везде подразумевается, что пользователь с js на ты.

  8. Добрый день. Помогите разобраться. Я создал карту, сохранил и получил код. Но вставляя ее в конструкторе не происходит ничего. Что делать?

  9. Здравствуйте, пожалуйста помогите, пробовал разные карты, трабл один- карта встает в верхний левый угол странички, параметров чтобы это изменить не нашел, после ночи тихой истерики пишу Вам. (сайт сделан на WYSIWYG Web Builder 11)

  10. Добрый день! создал карту и скопировал скрипт на нее… но на Wix конструкторе не отображается… просто квадрат пустой

  11. Здравствуйте Юрий! Такой вопрос… Добавил яндекс карту на сайт, хочу поменять местоположение компании? Подскажите пожалуйста!

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

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