Как добавить Яндекс карту на сайт — пошаговая инструкция

Быстрая навигация по этой странице:

Если вам требуется добавить Яндекс карту на сайт для того, чтобы предоставить посетителям возможность видеть в удобном формате расположение вашего (или не вашего) магазина, компании сервиса — то вы зашли по адресу: именно этому вопросу мы и решили посвятить нашу сегодняшнюю статью. Юзабилити — одна из самых важных вещей в сайтостроении, так как в первую очередь ваш ресурс должен быть удобен пользователю (именно потому поисковые системы и учитывают поведенческие факторы — читайте об этом подробнее в статье про поведенческий анализ сайта), и как раз наглядная карта города, региона или даже страны для многих ресурсов позволяет значительно поднять их юзабилити и пресловутые поведенческие факторы.

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

1. Регистрируемся на Яндексе и получаем ключ

Вставка карты Яндекс на сайт производится при условии обязательной регистрации на их сервисе и получении специального ключа. Для того, чтобы пройти регистрацию, необходимо зайти на http://api.yandex.ru/maps/ и залогиниться под своей учетной записью на Яндексе (если вы никогда не регистрировались на Яндексе — тогда будет нужно предварительно зарегистрироваться — процесс занимает не более одной минуты).

После этого нужно кликнуть на ссылку «Получить API-ключ» в разделе «Разработчикам»:

вставка карты яндекс на сайт

На следующей странице Вам будет предложено ввести адрес вашего проекта и принять пользовательское соглашение — заполняем и нажимаем кнопку «Получить API-ключ».

Следующая страница выдает желанный результат: указан Ваш ключ (который служит в качестве уникального идентификатора) и заботливый Яндекс даже сразу предлагает Вам пример html-кода, который нужно вставить на страничку для того, чтобы карта начала показываться:

Ключ:

BB21NWVEBAAAAPwvKTAIA0hsUOvbe4BCoxOUzvhVFRTmlOmsAAAAAAAAAAADPY7DBQ78niNkhgt2sLHhTZL2pVQ==

Пример кода, предложенный Яндексом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Примеры. Знакомство с JavaScript API. Простой вызов карты.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=BB2NWVEBAAAAPwvKTAIA0hsUOvbe4BCoxOUzvhVFRTmlOmsAAAAAAAAAAADPY7DBQ78niNkhgt2sLHhTZL2pVQ=="
	type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
        }
    </script>
</head>
<body>
    <div id="YMapsID" style="width:600px;height:400px"></div>
</body>
</html>

2. Создаем собственную карту

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

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

Открывается достаточно понятный и простой интерфейс:

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

Предположим, наш офис находится по адресу Ленинградский пр., дом 10. Укажем этот адрес в поле «Найти место на карте» и нажмем кнопку найти:

офис на карте яндекса

Нажимаем кнопку «ОК», выбираем нужный нам масштаб и вид карты («Интерактивная» — пользователи смогут ее масштабировать и перемещаться по ней или «Статическая» — будет неподвижной) и нажимаем кнопку «Получить код».

В качестве результата получаем следующее:

<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=7UXGfpfzOI0mK6VKESxAMdk08M4kyvtr&width=600&height=450"></script>

Копируем этот код, вставляем на страницу своего сайта и радуемся жизни!

Кстати говоря, сам конструктор обладает и другими дополнительными функциями — можно нарисовать схему проезда, выделить какую-то область прямоугольником, разместить на карте не один, а несколько объектов, изменить размер карты — все достаточно просто делается с помощью кнопок в том же самом интерфейсе.

3. Решение для WordPress

Добавить добавить карту на сайт, выполненный на движке WordPress (речь идет о географическом инструменте, карта сайта для WordPress со ссылками на страницы — это совсем из другой области) , можно также с помощью специального плагина, который называется Yandex Maps for WordPress и доступен для скачивания на официальном сайте WP.

Этот плагин не имеет большого смысла, если вам нужно только один раз добавить карту, так как для него все равно требуется получать API-ключ от Яндекса, а если вы получили ключ, то Вам не сложно тогда и сконструировать нужную Вам карту без установки ради этого плагина — так как каждый плагин хоть немного, но замедляет работу вашего ресурса.

Тем не менее, если вам потребуется производить такую вставку на каждой странице (например, у вас на сайте имеется каталог фирм и вы хотели бы наглядно показать расположение каждой из них), то тогда данное решение имеет смысл: плагин добавляет в админку в раздел с созданием записи новую панель, прямо в которой вы можете заполнить все нужные вам параметры — это значительно сэкономит вам время.

Если Вы нашли для себя что-то полезное на этой странице, пожалуйста, нажмите на одну из этих кнопок:
Комментарии
  1. Валерий

    Можно ли вставить яндекс карту в изображение с прозрачным фоном? Если можно, то как?

  2. Юрий

    Спасибо, помогло, разобрался! ;)

  3. Евгений

    А можно ли вставить карту на сайт чтобы пользователь отмечал две точки маршрута?

  4. Светлана

    Благодарю за помощь!Инструкция очень подробная,я считаю у меня получится вставить схему проезда на свой сайт!

  5. ВоВиК

    Спасибо. Благодаря Вам установил карту.

  6. Татьяна

    Подскажите пожалуйста, как убрать карту с сайта?

  7. Светлана

    Спасибо! Искала и нашла!

  8. Максим

    Есть ли стандартные инструменты чтобы пользователь при регистрации указывал свои координаты, и потом можно было бы видеть всех пользователей на общей карте?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>