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


Как вставить карту Яндекса на сайт — Примеры

Чтобы сайт искался на Яндекс.Картах, его нужно зарегистрировать в Яндекс.Справочнике.

Чтобы разместить фрагмент карты у себя на сайте, нужно заполнить пару полей в конструкторе [api.yandex.ru/maps]. Конструктор Яндекс карт Предполагаю, что лучше на HTML страницу установить код статической схемы, со ссылкой на Яндекс.Карты, поскольку скрипт может барахлить на устройствах с медленным интернетом. Конструктор Яндекс карт в виде изображения Результат:

<div><a href="ссылка_на_Яндекс_Карты" target="_blank"><img src="адрес_из_конструктора" alt="название_компании"/></a></div>

Режим панорамы также можно добавить к себе на сайт Как вставить панораму Яндекса на сайт Результат (содержимое можно вертеть, если захватить его участок мышкой, переходить по улицам щёлкая по стрелкам):

Советую посмотреть это видео для вдохновения:

Добавить карту на сайт: две картинки рядом (HTML / CSS)

Можно возле карты поставить изображение организации. При уменьшении окна браузера картинки будут уменьшаться пропорционально.

Самарский академический театр драмы им. М. Горького
<table><tr> <td><img src="" alt="Как добраться к Самарскому академическому театру драмы им. М. Горького"/></td> <td><img src="/800/600/http/3.bp.blogspot.com/-KRDixkPlXaQ/U2PkCGBI_JI/AAAAAAAAEYc/gsI1e8ktw_E/s624/samara-dram-teatr.jpg" alt="Самарский академический театр драмы им. М. Горького"/></td> </tr></table> Но я считаю так: пользователь ищет организацию и ему в первую очередь нужно узнать как до неё добраться. Поэтому лучше, если он увидит достаточного размера карту, чем мелкую карту и мелкое рядом стоящее фото здания. При уменьшении экрана максимально долго будет оставаться правая часть фонового изображения. <figure><img src="" alt="Самарский академический театр драмы им. М. Горького"/></figure> А здесь левая: <figure><img src="" alt="Самарский академический театр драмы им. М. Горького"/></figure> Если нужно, чтобы фотография перемещалась на новую строку, когда две картинки не умещаются вместе на текущей? Скульптура «Родина-мать зовёт!» <figure><img src="" alt="Мама́ев курган на карте Яндекса"/><img src="/800/600/http/1.bp.blogspot.com/-hmGBTV4UzwI/U2pcQDnKLtI/AAAAAAAAEYs/81ideAbrrPQ/s570/rodina-mat.jpg" alt="Скульптура «Родина-мать зовёт!»"/></figure> И последнее, вставка карты поверх фото. Описание картинки будет находиться либо справа от изображения с адресом фирмы, либо под ним. Скульптура «Родина-мать зовёт!»Скульптура «Родина-мать зовёт!» <figure><img src="//api-maps.yandex.ru/services/constructor/1.0/static/?sid=DY8eBS0sa_ho7LNOXUBj9QjqBMiC8dA3&amp;width=530&amp;height=358" alt="Мама́ев курган на карте Яндекса"><img src="/800/600/http/4.bp.blogspot.com/-7f6hSStSMQw/U28c3-fWTSI/AAAAAAAAEZg/3KFey3SnKkA/s870/rodina-mat.jpg" alt="Скульптура «Родина-мать зовёт!»"><figcaption>Скульптура «Родина-мать зовёт!»</figcaption></figure>

shpargalkablog.ru

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

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

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

Примечание. Один и тот же код может быть вставлен на одну страницу неограниченное число раз.

С помощью конструктора можно вставить два типа карт: интерактивную и статическую.

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

Как получить код:

  1. Перейдите в Конструктор Яндекс карт.
  2. Введите адрес вашего офиса или магазина в соответствующее поле и нажмите кнопку Найти.
  3. Настройте карту по вашему усмотрению и нажмите кнопку Получить код.
  4. Скопируйте полученный код из соответствующего поля и вставьте его в разметку вашего сайта.

В случае, если ваш сайт является копией нашего демонстрационного сайта demo.pixlpark.ru, и вы хотите заменить уже имеющуюся карту, например, на странице контактов, то вам нужно зайти в панель управления сайтом, открыть раздел CMS > Страницы сайта, найти страницу «Контакты», зайти в ее редактирование, затем открыть расширенные настройки страницы (см. скриншот ниже) и в поле «Слайдер» вставить полученный в конструкторе яндекс карт код вместо текущего.

Как вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина) и height (высота), — они показаны стрелками на скриншоте. Вы можете установить оптимальные для вашего сайта значения (на ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением нужно просто удалить из кода. На скриншоте показана выделением часть кода, которую нужно удалить для установки ширины карты равной ширине сайта.

Яндекс документация: Как добавить карту на сайт или в блог.

pixlpark.ru

Создание карты - Конструктор карт Яндекса. Помощь

  • В окне Создайте собственную карту нажмите кнопку Создать карту:

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

    В каждой строке списка отображаются название и дата последнего обновления карты, а также кнопка, при нажатии на которую открывается меню.

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

    Нажав кнопку К импорту, вы запустите процедуру импорта карты из файла:

  • В открывшемся окне Конструктора карт создайте объекты — метки, линии, многоугольники.

    Внимание.

    Существуют определенные ограничения на создание объектов:

    • На карту может быть добавлено не более 10 000 объектов (включая и метки, и линии, и многоугольники).

    • Одна линия или многоугольник могут включать не более 1 000 вершин.

      Если число вершин объекта превышает эту величину, объект можно автоматически упростить: удалить некоторые вершины таким образом, чтобы максимально сохранить общий вид объекта.

  • Выберите вид своей карты. Для этого нажмите кнопку Слои и в открывшемся меню выберите вариант:

    • Схема — схематическое изображение картографических объектов: дорог, домов и т. д.

    • Спутник — снимок местности, сделанный из космоса,

    • Гибрид — снимок местности, сделанный из космоса, дополненный информацией карты: названиями улиц, адресами и др.

  • Вы можете дополнить свою карту отображением слоя автомобильных пробок. Для этого нажмите кнопку Пробки. Чтобы выключить режим — нажмите ее повторно.

    Степень загруженности участка дороги показывается цветом:

    • — дорога свободна;
    • — скорость движения на этом участке ниже, чем на свободной дороге;
    • — пробки;
    • — движение перекрыто.
  • В области Редактирование карты задайте для карты название (оно пригодится при выборе нужной карты из списка ваших карт) и описание (оно поможет вспомнить подробности, относящиеся к карте):

    Список созданных вами объектов отобразится в области Список объектов. Если вам понадобится отредактировать объект — нажмите на его название в этом списке.

    Примечание.

    Вы также можете изменить порядок отображения объектов внутри каждой категории, перемещая нужную метку (или линию, или многоугольник) на первый или, наоборот, на задний план. Подробнее см. раздел Создание объекта.

    После того как все нужные объекты будут созданы, нажмите кнопку Сохранить и продолжить. Откроется панель Тип карты:

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

    Это можно сделать несколькими способами (подробнее см. раздел Выбор типа карты и получение кода или ссылки).

  • Вы также можете сохранить объекты вашей карты на Яндекс.Диск в виде файла определенного формата (KML, CSV, GPX или GeoJSON).

  • Чтобы вернуться в режим редактирования карты, перейдите по ссылке Вернуться к редактированию карты.

  • Чтобы перейти к списку своих карт, нажмите кнопку Перейти к списку карт.

  • yandex.ru