Яндекс карты код для вставки на сайт


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

Обычно карта проезда помещается на странице контактов под указанными данными для связи. Вставляется она с помощью специального программного кода (скрипта). Самыми простыми способами получения такого скрипта, является использование готовых API-решений от Google или Яндекс. Для вставки карты на сайт нет никакой необходимости в знании программирования, следуя изложенным ниже инструкциям, вы получите наглядную и удобную карту.

Вставка карты с помощью Яндекс Карт

1. На данный момент (начало 2013 года) конструктор карт от Яндекс доступен в версии 2.0, очень удобный и логически понятный. Для создания карты даже не требуется быть авторизованным пользователем. Первым делом необходимо создать саму карту с адресом. Для этого переходим по ссылке  и в нижнем поле ввода прописываем адрес компании. После нажатия кнопки "найти" система выдаст варианты найденных адресов.


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

 

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

Настройка карты

 

3. Далее переходим на вкладку просмотр. Здесь можно выбрать, статической будет ваша карта или интерактивной. Лучше выбирать второй вариант, так пользователь сможет сам просмотреть близлежащий район и сориентироваться. 

Интерактивность карты

 

4. Вкладка "Код для вставки" предлагает прочесть пользовательское соглашение. После его подтверждения вам откроется код для вставки. Его можно немного отредактировать, например, убрать ссылку на Яндекс, подогнать по размерам точнее, однако существенных изменений лучше не делать.


Код схемы проезда

 

5. Копируем данный код и вставляем на страницу контактов через HTML-редактор после текста. 

Вставка кода

 

6. Сохраняем внесенные изменения и проверяем полученный результат на странице сайта.

Вид карт на сайте

Вставка карты с помощью Google Maps

1. Алгоритм действий схож с описанным выше. Переходим по ссылке   и вводим в строке поиска адрес организации. Можно также посмотреть, как это выглядит со спутника. Далее для получения кода нажимаем на знак ссылки слева. Можно скопировать имеющийся код, а можно нажать ссылку "настройка и предварительный просмотр встроенной карты".


Вставка карты Google

 

2. При выборе редактирования откроется дополнительное окно, где можно скорректировать ее размеры. 

Настройка карты Google

 

3. Копируем полученный код и вставляем его через html-редактор на страницу сайта. Выглядеть она будет абсолютно так же, как при предварительном просмотре. В отличие от карт Яндекса, карты Google всегда только интерактивные, здесь меньше возможностей редактировать саму карту, однако можно посмотреть на местность со спутника, рельеф с названиями объектов и 3D карту.

Вернуться назад

www.kasper.by

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

Обычно страница Контакты на вашем сайте создана через Сайт->Страницы или Магазин->Витрина->Страницы. Откройте её на редактирование и перейдите на вкладку HTML. В этом режиме необходимо вставить код предлагаемый картографическими сервисами. Основные картографические сервисы: Google.Карты, Яндекс.Карты и OpenStreetMap. Стоит выбрать тот который представляет лучшее отображение вашего региона.


Google.Карты

На странице https://www.google.ru/maps/ найдите местоположение и в левом выпадающем меню по кнопке ☰ выберите «Поделитесь с друзьями или получите код карты». Переключитесь на вкладку Код, отцентрируйте карту и скопируйте код вида:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d4490.729912544475!2d37.61565403902758!3d55.752162152658855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1446321871360" width="600" height="450" frameborder="0" style="border:0" rel="border:0" allowfullscreen></iframe>

Яндекс.Карты

Для Яндекс.Карт существует конструктор https://tech.yandex.ru/maps/tools/constructor/ доступный после регистрации или авторизации для уже существующих яндекс-аккаунтов. С его помощью сформируйте карту, добавьте нужные отметки и пути подъезда. Нажмите «Сохранить карту и получить ссылку» и скопируйте код вида

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=tr5dHkPra7srQ0N0DjEJ6Bu5JM_F2CV1&width=500&height=400&lang=ru_RU&sourceType=constructor"></script>

OpenStreetMap

Пройдите по адресу http://www.openstreetmap.org/ и выберите местоположение. В правом выпадающем меню выберите иконку Вставить на сайт и отметьте вкладку Код. Здесь вы можете настроить параметры и скопировать код:


<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=37.60612607002258%2C55.74793660031878%2C37.624043226242065%2C55.75346149255379&layer=mapnik" style="border: 1px solid black" rel="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/#map=17/55.75070/37.61508">Посмотреть более крупную карту</a></small>

После получение нужного кода вставьте его на страницу Контакты и сохраните. В предпросмотре можете сравнить размер и при необходимости изменяя в коде значения width и height настроить ширину и высоту карты.

support.webasyst.ru

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

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

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

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

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

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


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

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

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

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


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

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

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

pixlpark.ru

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

На страничке https://yandex.ru/map-constructor предлагается с помощью специального сервиса компании создать собственную карту с метками на нужных объектах, со схемами проезда и выделенными областями. После создания карту можно вставить на сайт с помощью сгенерированного сервисом кода. Подробная инструкция по использованию сервиса представлена в разделе «Помощь» (https://yandex.ru/support/maps-builder/concept).Официальная документация и условия использования данного веб-ресурса опубликованы в разделе «Технологии Яндекса» (https://tech.yandex.ru/maps/constructor).

 

Главные особенности


  • сервис доступен всем зарегистрированным пользователям, завести аккаунт в Яндексе для всех сервисов компании можно на странице https://passport.yandex.ru;
  • работает во всех версиях джумла (вставляется на сайт с помощью модуля «HTTP-код» или в материал путём добавления кода на страницу в соответствующем текстовом редакторе);
  • не адаптивный (размеры задаются при создании и прописываются в кодировке).

 

Возможности

Создаваемой карте можно дать название (сервис позволяет создать несколько карт) и описание. Объекты наносятся с помощью мыши, после нажатия на соответствующую кнопку: метки, линии, многоугольники. Линиям и многоугольникам может быть присвоено описание, задан цвет и толщина линий. А меткам — название, описание, а также может быть задан цвет метки, добавлена иконка внутрь метки. Карта может иметь привычный схематичный вид, либо отображать картинку со спутника. Возможен и третий вариант — гибрид (на спутниковое изображение нанесены названия улиц, дорог, номера домов).

При сохранении можно выбрать тип карты:

  • интерактивный, с которым можно взаимодействовать (например, перетаскивать объекты),
  • статичный или печатный для сохранения в виде рисунка.

Созданные объекты можно сохранить в файл спецформата для импорта в программы-навигаторы, для просмотра в других программах, таких, как, например, Google Earth.

Для вставки карты на сайт используется сгенерированный сервисом код (вставляется в любую из позиций с помощью модуля «HTML-код»).

skin27 1.1.1

skin27 1.1.2

skin27 1.1.3

skin27 1.1.4

skin27 1.1.5

Описание модулей для joomla

В последнее время популярность набирают разработки сторонних авторов. Рассмотрим функционал наиболее распространенных из них: конструктора кода, двух компонентов и модулей. Эти modules и components позволяют не только показать пользователю местонахождение компании, а поисковику определить региональную принадлежность, но и проложить маршрут, можно отобразить местонахождение пользователей и контактную информацию о них и даже развернуть целую баталию прямо на карте (за счет неё можно организовать взаимодействие участников рынка недвижимости, а точнее обеспечить отношения «Арендодатель-арендатор»).

 

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


До сих пор на слуху и в приоритете был рекомендованный самой компанией Yandex «Конструктор Яндекс карт» (mod_xdsoft_ymaps): он позволяет отображать карту на сайте в её обычном виде, настраивать размер, масштаб, добавлять множество объектов в виде меток, полигонов. При этом количество создаваемых объектов не ограничено. С его помощью можно создать несколько карт на одной странице. Функционал конструктора впечатляет. Но главное его преимущество — он избавляет от необходимости подготовки кода в сервисе Яндекса (только для зарегистрированных) и последующей вставки кода на сайт joomla. Появившись в 2013 году плагин стал для вебмастеров первым и основным инструментом для вставки карт на веб-ресурсы.

 

Главные особенности

  • совместим с joomla 2.5-3.x;
  • распространяется бесплатно;
  • адаптивен (ширина может быть задана параметром auto)

 

Возможности и настройка

После установки с официального сайта разработчика xdan.ru (страница загрузки: https://xdan.ru/joomla/modul-konstruktor-yandeks-kart-dlya-joomla/skachat-modul-konstruktor-yanleks-kart-dlya-joomla/joomla-1-2-0-8), переходим в менеджер модулей и находим неопубликованный под названием «Конструктор Яндекс Карт от XDSoft».

Основные действия по настройке совершаем в первой же вкладке: задаем позицию для модуля, вводим адрес в поле под картой, задаем размеры, потянув за нижний правый край, масштаб с помощью привычного бегунка слева, ставим метку, рисуем объекты. Нет необходимости нажимать кнопку сохранить после каждого добавленного объекта, модуль автоматически сохраняет все изменения с помощью AJAX.

Проверяем настройки в других вкладках и сохраняем модуль.

skin27 1.1

skin27 1.2

skin27 1.3

skin27 1.4

skin27 1.5

skin27 1.6

skin27 1.7

Модуль от joomly

Из-за удобства использования (настраивается всего за 4 минуты) наиболее популярным является модуль «Яндекс.Карты» от joomly.ru.

 

Главные особенности

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

Кроме этого, модуль Яндекс карта для joomla:

  • работает на joomla 2.5-3.x;
  • базовый вариант распространяется бесплатно, есть и полная версия за 190 р. (разово, без абонентской платы);
  • является адаптивным («резиновая» верстка).

 

Возможности

Удобство использования и быстрота настройки – это ещё не всё. Для вебмастера не менее важны и возможности модуля. «Яндекс.Карты» от joomly можно скачать со страницы http://joomly.ru/yandex-karta и настроить следующим образом:

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

Установка осуществляется обычным способом. После её завершения в менеджере модулей окажется неопубликованный элемент — Yandex maps. Активируем модуль, зададим масштаб (при настройке ширины auto карта «растянется» на весь экран). Выберем тип карты, тип метки, а в следующей вкладке определим точки координат (достаточно ввести адрес объекта) и опубликуем (можно в любой из позиций шаблона, можно внутри материала). С помощью сервиса на рекомендованном сайте (www.webpagefx.com) можно поменять цвет метки. Для вставки в материал, воспользуйтесь стандартной функцией CMS Joomla, в редакторе статьи.

skin27 1

skin27 2

skin27 3

skin27 4

skin27 5

 

Компонент от xdan.ru

Гораздо больше возможностей предоставляет компонент другого разработчика, который можно скачать с официального сайта xdan.ru. Идеально подходит для установки на информационные порталы на joomla (карта с многочисленными метками, например, карта памятников, сайты туристических фирм, каталоги магазинов и других предприятий).

 

Главные особенности:

  • реализуется в 3-х платных версиях с автообновлением – Lite (раньше распространялась бесплатно, теперь имеет чуть больше настроек и стоит 1 000 р., её можно использовать на одном сайте), Medium (также на одном сайте, но с техподдержкой, с дополнительным плагином определения местонахождения пользователей, стоимость – 2 000 р.), PRO (без ограничений по доменам, плюс поддержка К2, ZOO, плагин «Арендодатель-Арендатор», стоимость – 4 000 р.);
  • адаптивный (карта выводится на весь экран);
  • подходит для джумла последних версий, начиная с 2.5 (соответствует версия компонента 2.1.9, для поздних – вплоть до 4.0.13).

 

Возможности

Чтобы познакомиться с возможностями разработки нужно скачать любую из платных версий со страницы: https://xdan.ru/komponent-yandeks-karty-dlya-joomla.html#download. Расширение включает компонент, модуль, плагин, в платных версиях – дополнительные плагины и возможности. Возможен импорт и экспорт элементов. Расширение регулярно обновляется. На официальном сайте имеются подробные инструкции по применению (документация, видео уроки и скриншоты).

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

 

Настройка

После установки пакета Lite находим «Яндекс карты» в компонентах.

skin27 6

Начинаем создавать:

  1. карту (неограниченное количество);
  2. категорию (для объединения карт по признаку);
  3. объект (в менеджере объектов создаются метки, изображения, геометрические фигуры и линии для определенной карты или целой категории карт).

В первую очередь в графическом редакторе находим ту местность, которую вы желаете отобразить на сайте, отметить метками. Например, вводим в строку поиска Петербург. И с помощью быстрых подсказок находим город. Далее заполняем поля: «Название», «Псевдоним» (введёте на русском, а система сама подготовит для публикации url латинские буквы). При желании можно заполнить и поле «Описание» (если собираетесь отображать его на сайте).

skin27 7

Переходим в следующую вкладку настроек – «Поведения», где можно настроить «реакцию» карты на «поведение» мышки. Во вкладке «Элементы управления» можно включить: кнопку разворачивания карты на весь экран, панель поиска, панель пробок и т.д.

skin27 8

На вкладке «Метаданные» можно отобразить ключевые слова, описание для поисковиков. Во вкладке «Общие настройки» можно задать множество нюансов. Например, пользователю дать возможность кликом открывать всплывающее окно. Отключить или включить фильтр, отобразить его вверху или в любой из предложенных позиций.

skin27 9

Спустившись вниз с помощью бегунка, мы увидим «Список объектов». Если вы планируете создать несколько меток на карте, то стоит здесь в поле «Показать список объектов» выбрать позицию, например, сверху. Если объект будет только один, как в нашем случае — ЖК Элит плюс — то ставим здесь значение «Нет». Можно разрешить пользователям добавлять свои объекты, но раз мы создаём карты для сайта новостроек, то ставим здесь запрещающее «Нет».

skin27 10

Переходим к последней вкладке – «Настройки карты». Помимо окна карт и максимального масштаба можно выбрать тип карты. Вместо стандартной выберем «Гибрид». И не забудет сохранить все настройки — кнопка «Сохранить и закрыть» вверху. Одну карту мы создали, теперь можем перейти к созданию категории. Например, «Новостройки Петербурга». Для этого переходим в менеджер категорий (Компоненты-Яндекс карты в joomla), нажимаем «Создать». Вводим название и выбираем в соответствующем поле нашу карту «Новостройки Петербурга». Сохраняем и закрываем категории.

skin27 11

Теперь можно перейти к объектам.

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

skin27 12

Чтобы отобразить карту на странице, её нужно создать. Например, в верхнем горизонтальном меню. Для этого переходим в «Менеджер меню». Находим горизонтальное и нажимаем, чтобы добавить новый пункт. Нажимаем «Создать».

skin27 13

skin27 14

 

Любую из созданных карт можно вставить на страницы сайта через модуль или в материал джумла. Например, отобразив карту со списком объектов на главной. Можно создать отдельный пункт меню для её отображения или для отображения нескольких карт, категорий.

Поработав с картами, категориями и объектами, можем зайти в настройки. Здесь вебмастеру открываются дополнительные возможности компонента Яндекс карт: можно редактировать описания, настраивать всплывающие окна, отображать списки категорий, карт, объектов. Можно отобразить на странице поле поиска сразу над списком объектов, установить ссылку «подробнее».

skin27 15

В расширенных версиях компонента доступны и другие настройки: карты местонахождения пользователей, карты материалов (в которых источник карты – материал джумла с «географической привязкой», т.е. адресом). В версию PRO встроены плагины вывода материалов ZOO и К2, плагин «Арендатор-Арендодатель» — для взаимодействия участников рынка недвижимости через удобную карту (владельцы добавляют предложения на карту, арендаторы бронируют через всплывающее окно).

 

Модуль от студии spb-webmaster.ru

Через данный модуль карта в joomla может быть выведена с множеством точек и описаний указанных мест. По своим возможностям разработка может занять достойное место между первым и вторым модулем нашего списка.

 

Главные особенности:

  • распространяется бесплатно;
  • адаптивен (ширина может быть задана в процентах – карта растянется по ширине экрана);
  • подходит для всех версий начиная с joomla 2.5 и выше.

 

Настройки

После установки с официального сайта (страница для загрузки module: http://spb-webmaster.ru/mod/yandexmap), переходим в модуль и на первой же вкладке определим все настройки.

Что можно изменить:

  • установить координаты для центра карты;
  • изменить масштаб, чтобы изначально карта в joomla открывалась в удобном виде (объекты были достаточно приближены);
  • для пользователей можно по умолчанию оставить на карте показ пробок, кнопку выбора списка типов карты (кнопка «слои»), прокрутку масштаба с помощью мыши, оставить на карте или убрать поле поиска адреса;
  • прописать в пикселях ширину и высоту карты;
  • установить для показа объекта собственную иконку (выбрав изображение в медиа-менеджере), для остальных объектов можно выбрать флажки из списка стандартных;
  • добавить точку, введя координаты и описания (для оформления описания на карте можно использовать HTML-код).

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

skin27 16

skin27 17

skin27 18

skin27 19

skin27 20

skin27 21

 

Zh YandexMap

Расширение для установки Яндекс карт на сайт Zh Yandex Map от разработчика Dmitry Zhuk позволяет настроить оформление карты, назначить расположение объектов (добавив метки) и даже отобразить список меток. Среди дополнительных параметров – предоставление пользователям возможности ставить на карту свои метки.

 

Главные особенности:

  • распространяется бесплатно;
  • не адаптивен (ширина и высота задается в пикселях);
  • последняя версия работает на joomla 3.x.

 

Возможности

Расширение Яндекс карты для joomla включает компонент, модуль и плагин. Его можно скачать с официальной базы расширений для joomla, со страницы: https://extensions.joomla.org/extension/zh-yandexmap. С бесплатным модулем вы получаете техподдержку, последние обновления и официальную документацию. Админпанель удобная, русскоязычная. Однако инструкции по применению на официальном сайте написаны на английском (перевод не всегда дает четкое представление о том, как использовать ту или иную функцию).

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

С помощью расширения вы сможете:

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

referte.net

Получаем Яндекс карту

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

Создание карты

Создание карты ограничивается тем, что вам нужно просто вставить нужный адрес в поле под картой и найти место на карте. Так же вы можете изменить размеры карты, растягивая ее за правый нижний угол. Еще, есть возможность поменять вид отображения карты и масштаб. Я всегда ставлю «Народная», мне она больше нравится.    Затем ставим нужную точку на карте и подписываем ее. Все карта создана.

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

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

Яндекс карта для сайта и блога на WordPress

Получить код Яндекс карты

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

Получить код Яндекс карты

Вставляем карту Яндекса на WordPress сайт

Теперь у вас есть код Яндекс карты и вы можете вставить карту на свой WordPress сайт.

Полученный код Яндекс карты у вас должен быть примерно следующим:

<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->  <div id="ymaps-map-id_13485848986165892726" style="width: 450px; height: 350px;"></div>    <script type="text/javascript">function fid_13485848986165892726(ymaps) {var map = new ymaps.Map("ymaps-map-id_13485848986165892726", {center: [37.617671, 55.75576799999372], zoom: 10, type: "yandex#map"});map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));};</script>  <script type="text/javascript" src="http://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=fid_13485848986165892726"></script>  <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->

Его можно разделить на две части: сам скрипт и блок DIV. Для отображения Яндекс карты на вашем сайте нужно подключить скрипт к сайту. Вы можете сделать это в файле header.php, но я рекомендую подключить скрипты в файл footer.php. Скрипты нужно подключить до закрывающего тега </body> добавив подобный код (у вас он может быть другим, вы его получили ранее):

<script type="text/javascript">function fid_13485848986165892726(ymaps) {var map = new ymaps.Map("ymaps-map-id_13485848986165892726", {center: [37.617671, 55.75576799999372], zoom: 10, type: "yandex#map"});map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));};</script>  <script type="text/javascript" src="http://api-maps.yandex.ru/2.0/?coordorder=longlat&load=package.full&wizard=constructor&lang=ru-RU&onload=fid_13485848986165892726"></script>

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

<div id="ymaps-map-id_13485848986165892726" style="width: 450px; height: 350px;"></div>

В этом коде 450px является шириной Яндекс карты, а 350px является высотой Яндекс карты — эти параметры вы можете отредактировать по желанию.

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

www.onwordpress.ru

Бром
Блина ну кото так делает. Вы же рассказываете как сделать!!! Под рукой должен быть ваш примерник, а все ссылки без таржет бланк ((
NMitra
"Под рукой должен быть ваш примерник" — вы про API Яндекс.Карт? Каких именно примеров не хватает?
"все ссылки без таржет бланк" — это не всегда удобно в первую очередь для посетителя.
Штиф Васлер
А как сделать кнопку раскрытия карты на всю страницу? Как на озоне, например
http://www.ozon.ru/context/map/?areaId=2
(в верхнем правом углу)
NMitra
Через IP Карт ( https://tech.yandex.ru/maps/ ) — нужно разбираться в JavaScript, читать документацию, в интерфейсе представлены не все возможности Карт
Штиф Васлер
А Вы не знаете?
Штиф Васлер
о, нашел
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#enterFullscreen
только как использовать не понял еще
NMitra
Я не читала, не было необходимости

shpargalkablog.ru

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

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

  • Использование возможностей конструктора;
  • При помощи плагинов и модулей;
  • 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 страницы.

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

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

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

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

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

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

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

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

nazyrov.ru

Почему именно ставить карту от Яндекса?

Ответ на этот вопрос должен найти каждый вебмастер, так как это сродни вероисповеданию. У меня, к примеру, был выбор между картами от Google, от Yandex и картами от 2GIS. Возможно выбор сервисов намного шире, но мне хватило рассмотрения этих трех. Можете полистать форум о компьютерном железе, может там есть какая-нибудь информация по этому вопросу.

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

Карты от 2GIS – это просто шикарные карты, но для доступа к их API необходимо написать официальную заявку, которую будут несколько дней мурыжить и в итоге так и не понятно – дадут возможность использования их или нет. У кого много времени или есть дотошный заказчик – велком в тех. поддержку 2GIS.

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

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

Все просто. Давайте по-порядку.

  1. Нужно зайти на сайт http://api.yandex.ru/maps/tools/constructor/ и зарегистрироваться. Эта общая регистрация для всех дополнительных сервисов, таких как Яндекс.Вебмасте, Яндекс.Директ и так далее. Если Вы уже зарегистрированы, то дополнительно делать ничего не нужно. Хотелось бы немного дополнить: если вы добавляете карты не для себя, а для заказчика, то будет честнее и проще вам в будущем создать новый аккаунт для заказчика.
  2. Далее в поиске ниже ищем нужный вам регион, ищем улицу. После того, как вы нажали найти, метка будет стоять на том здании, которое вам нужно. Если здание не найдено или не обозначено на карте, то можно просто подвинуть метку как надо. Жмем во всплывающем окне ОК и ставим свою метку. Можно как выделить некоторую область, так и просто поставить метку в виде точки. Добавляем текстовое описание и если нужно меняем стиль оформления.
    Как добавить карту от Яндекс на свой сайт?
  3. Далее переходим к 3 шагу Код для вставки и вводим доменное имя, где будет красоваться карта, ставим галку, что согласны с условиями размещения карты. Давим на Получить код карты.
    Как добавить карту от Яндекс на свой сайт?

Это все! Далее Вам будет предложено скопировать html-код на страницу своего сайта и лицезреть красивую карту с вашей меткой.

P.S. Для того, чтобы валидатор W3C не ругался на вставленную вами карту, необходимо все символы амперсанда – & заменить на XML-обозначение – &#38;. Почему этого не делает сам Yandex, не понятно.

adminway.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.