Яндекс карты возможности, народная карта, использование API-конструктора и вставка Yandex Maps на свой сайт

Всякое разное про front-end

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

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

Для вставки интерактивной карты может использоваться конструктор карт
https://tech.yandex.ru/maps/tools/constructor/:

В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/. В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.

Для начала подключим компоненты API:

Если разрабатывается какое-то большое приложение с использованием карт, то лучше подключать компоненты API определённой версии, чтобы при обновлении API на стороне Яндекса у нас ничего не сломалось на продакшине:

Карту необходимо будет расположить в каком-нибудь блоке, например в div#map. Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):

Здесь мы указываем:

  1. идентификатор блока «map», где у нас будет создана карта;
  2. center — центр карты с указанием ширины и долготы;
  3. zoom — коэффициент масштаба карты.

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

  1. из элементов карты присутствует только ползунок изменения масштаба;
  2. карта не должна менять масштаб скроллом мыши.

Для выполнения этих требований дополняем код:

Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.

Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:

Здесь мы объявляем переменную myPlacemark, в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:

  1. указываем в iconLayout, что будет использоваться пользовательское изображение метки;
  2. iconImageHref — путь к изображению;
  3. iconImageSize — указываем размеры изображения;
  4. iconImageOffset — указываем сдвиг от левого верхнего угла картинке к точке изображения, которая показываем на нужный нам объет. Нужно это чтобы при масштабировании карты положение метки не сбивалось. Почему смещение указывается в отрицательных значениях — одному Богу создателю API известно.

И через myMap.geoObjects.add() добавляем метку на карту.

А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241

Здесь мы:

  1. в balloonContent указываем контент, который будет отображаться при открытии балуна;
  2. balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;
  3. balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;
  4. balloonImageHref — путь к изображению;
  5. balloonImageOffset — смещение относительно левого верхнего угла;
  6. balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).

Карта для сайта (Яндекс)

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

В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.

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

Для чего нужна карта на сайте?

Вы, возможно, улыбнетесь, прочитав этот, казалось бы, риторический вопрос. “Карта нужна, чтобы посетители знали, где мы находимся”, – это простой ответ слишком прост для понимания роли карты особенно для коммерческого сайта. Вот некоторые важные аспекты наличия карты на сайте:

  • Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: “а вдруг обманут и исчезнут?”), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
  • Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам – проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
  • Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.

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

Следует воспользоваться конструктором API Яндекс.Карт.

В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:

Шаг 1. Начальная настройка Яндекс карты для сайта:

  • Откройте страницу конструктора Яндекс.Карт для сайта.
  • Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
  • Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
  • Укажите в соответствующем поле название будущей карте.
  • Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.

Шаг 2. Рисование на карте точек (меток):

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

Шаг 3. Настройка свойств установленной на карте метки:

  • Кликаем непосредственно по нарисованной нами метке.
  • В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
  • Любую метку можно удалить в соответствующем окошке свойств.
  • Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.

Шаг 4. Рисование линий на карте:

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

Шаг 5. Рисование многоугольников, заполненных цветом контуров:

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

Шаг 6. Изменение размеров карты для сайта:

  • Кликаем по кнопке изменения размеров.
  • Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
  • Переходим к финалу создания карты.

Шаг 7. Получение кода карты для сайта (Яндекс):

  • Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
  • На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку “Сохранить и получить код”.
  • Даже после сохранения карты всегда можно вернуться к редактированию.
  • Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом “Народной карты”.
  • Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
  • Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.

Создание карты для сайта от Яндекса – это нетрудоемкое, не требующее специальных знаний и навыков действие на фоне куда более сложных проблем сайтостроительства. Если при создании вашего сайта вы столкнулись с более серьёзными трудностями, обращайтесь к нам. Мы постараемся решить ваши проблемы!

Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. “Социальные кнопки” находятся справа. Такова наша маленькая корысть .

Сайты Общий веб-дизайн Дизайн полиграфии
Зоны особого интереса:

  • Москва
  • Подмосковье
    (Московская область)
  • Зеленоград
  • Санкт-Петербург
  • Нижний Новгород
  • Ярославль

Все права защищены ©
www.site-dom.ru

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

Мы находимся в Зеленограде – наукограде России.
Зеленоград – город спутник и юридический район города Москвы.

“Интернет – не знает границ”. Продукты нашего труда – располагаются в виртуальной реальности. И соответственно мы готовы сотрудничать не только с жителями Москвы, Зеленограда или Подмосковья, но и со всеми “жителями русскоязычного Интернета”.

Яндекс карта для сайта: создаем и вставляем с помощью конструктора карт и API библиотек

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

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

  • Раздел контакты с полными данными компании;
  • Форма обратной связи на сайт в виде чата ;
  • Четкая структура сайта (особенно если это интернет магазин или каталог);
  • Красивый и удобный дизайн;
  • Адаптивная мобильная версия сайта ;
  • Простота и легкость кода.

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

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

Яндекс карта для сайта с помощью API

Помимо получения просто кода для вставки интерактивной схемы на страницы своего сайта вы также можете использовать для различных целей API сервисы. Давайте расскажу, что нам предлагает Yandex.

Что такое API?

API – это программный интерфейс предоставляющий библиотеки классов и функций которые мы можем использовать в виде стороннего приложения. Одним словом нам дают инструменты, которые мы уже немного подгоняем и настраиваем под себя.

Если мы перейдем в раздел Яндекса по адресу: https://tech.yandex.ru/maps/?from=bno, то нам предложат воспользоваться рядом продуктов для своих проектов, о которых поговорим далее.

  • Геокодер – это API элемент карт, который позволяет при нажатии на любой адрес и место на карте России с последующим получением gps данных этого места. Тем самым мы можем переводить географические координаты в точные адреса нужных нам мест.
  • Statiс API – это раздел позволяющий получить статическую схему, которая будет загружаться очень быстро даже если связь с интернетом будет очень низкая. Тут очень интересным является то, что вы берете просто кусок карты с нужным масштабом и указываете на ней автомобильные пробки или различные элементы, которые при каждом новом отображении на сайте будет автоматически обновлять актуальную информацию без дополнительных вмешательств в код. Имеется бесплатная и платная версия продукта.
  • JavaScript API – это библиотека позволяющая работа и создавать схемы на местности в браузерах, а также использовать в приложениях на Адройде при создании окон. Один самых интересных элементов является возможности вставки своих панорам на сайт, а также устроить поиск по организациям. В качестве панорамы можно вставлять любое изображение или использовать координаты карты для указания местности.
  • API бизнес – это программное расширение, которое помогает настроить возможность отслеживания по геолокации транспорта, а также вести диспетчеризацию транспорта компании и прочие виды. Есть платная и бесплатная версии. Также можно использовать запросы по местоположению координат нужного объекта.
  • Поиск по организациям – этот раздел подойдет для размещения как раз на своем проекте. Очень интересен если у вас каталог организаций и подобного рода проекты. Для поиска используется Яндекс.Справочник и для реализации поиска на сайте необходимо будет пополнять и обновлять базу организаций своими руками.
  • YMapsML – это раздел API Яндекса в котором мы можем любую планировку передавать посредством текстового документа. Не знаю, зачем это, но это предусмотрено в сервисе поисковика. Работает все на Javascript.

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

Конструктор карт яндекс для сайта

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

Лично я предпочитаю просто получить код и вставить его на сайт. Итак, давайте покажу, как это сделать очень быстро.

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

После загрузки сервиса, нам необходимо придумать название схемы, которую мы будем создавать и нажимаем «создать новую».

Далее нам предстоит просто выбрать интересующий нас адрес. Я выберу офисное здание в г.Казани по адресу: г.Казань, ул. Татарстан, д.20. Вводим в строку поиска адрес, как показано на скриншоте.

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

Выбираем тип из списка:

  • Печатная схема – этот тип файл больше подойдет для последующей распечатки на рабочем компьютера и имеет более компактный вид. Я его не использую если честно.
  • Статическая – данный тип карты выходит в виде картинки формата .png. Разместить сможем ограниченное число объектов на местности.
  • Интерактивная карта – это самый оптимальный вариант вставки кода на свой сайт. На сайте в разделе «контакты» пользователь сможет просто работать со схемой на местности и менять масштаб на местности как ему удобно для разъяснения маршрута.

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

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

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

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

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

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

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

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

Вот так она будет выглядеть в качестве примера урока:

Ну, вот и все. Теперь вы научились создавать Яндекс карты для сайта и вставлять их на свой сайт. Если остались вопросы, то пишите их в комментариях. Не забываем подписаться на рассылку блога и сделать репост статьи. Всех благ -))).

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

API Яндекс.Карт поможет создать уникальную интерактивную карту. Делимся примерами.

28 Ноября 2016 | 5917 | 0

Карта на сайте служит проводником между вами и вашими клиентами/пользователями.

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

В данной статье рассмотрим 3 примера карт и научимся их создавать.

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

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

Инструментов Яндекс API довольно много. Ознакомиться с ними можно на странице API карт . Забегая немного вперед хочется отметить, что при создании собственных карт использовались только JavaScript API и Геокодер .

Пример 1

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

На данной карте метка объекта была изменена на логотип компании. При наведении на логотип можно отображать необходимую нам информацию

Добавлен функционал Яндекс.Пробки:

Рис.2 – Слои на Яндекс.Карте с помощью API Карт

Указание и поиск необходимого адреса, геопозиционирование и масштабирование:

Рис.3 – Вспомогательные кнопки на Яндекс.Карте с помощью API Карт

Карта состоит из html-кода, который нам нужен для вставки карты на сайт. Ну и собственно подключаемый JS-файл, который содержит запрограммированную нами информацию.

В рассматриваемом примере html-код для вставки на сайт:

ymaps.ready(function () <
var myMap = new ymaps.Map(‘map’, <
center: [55.71136156901162,37.65276849999999],
zoom: 16 >),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), <
hintContent: ‘Artox Media Digital Group ул.Ленинская Слобода 26, стр. 5’ >, <
// Опции. Необходимо указать данный тип макета.
iconLayout: ‘default#image’,
// Своё изображение иконки метки.
iconImageHref: ‘http://seo.artox-media.ru/local/img/logo.png’,
// Размеры метки.
iconImageSize: [161, 25],
// Смещение левого верхнего угла иконки относительно её “ножки” (точки привязки).
iconImageOffset: [-60, -15] >);
myMap.geoObjects.add(myPlacemark); >);

Пример 2

26 октября 2016 года вышло обновление Яндекс API , в котором были добавлены некоторые полезные возможности:

  • Подключение API при использовании CSP
  • Интерактивные маркеры POI на подложке
  • Новые балуны маршрутов
  • Управление с клавиатуры в плеере Панорам

Во втором примере хотелось бы поговорить про интерактивные маркеры POI.

Points Of Interest или POI – это маркеры на подложке карты, которые обозначают наиболее значимые или заметные объекты и помогают ориентироваться на схеме. Это могут быть как организации, так и, например, достопримечательности.

Теперь точки POI на карте стали интерактивными – при выборе откроется карточка с информацией об объекте. (кликабельно)

Следует заметить, что нововведение оказалось интересным и полезным. Теперь на карте можно сразу увидеть не только местоположение объекта, но и режим работы, номер телефона, адрес сайта, как добраться и отзывы.

Как сделать такую карту для своего сайта?

HTML-код для вставки на сайт остается без изменений:

function init() <
var myMap = new ymaps.Map(‘map’, <
center: [55.71136156901162,37.65276849999999],
zoom: 18,
controls: [] >);

// Создадим экземпляр элемента управления «поиск по карте» с установленной опцией провайдера данных для поиска по организациям.
var searchControl = new ymaps.control.SearchControl( <
options: <
provider: ‘yandex#search’ >>);
myMap.controls.add(searchControl);

// Программно выполним поиск определённой компании в текущей прямоугольной области карты.
searchControl.search(‘Artox Media Digital Group’); >
ymaps.ready(init);

Пример 3

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

На карте задано построение маршрута из определенной до указанной точки. Отображены маршруты, расстояние пешком, тип транспорта. Также можно отобразить время для пеших сегментов по клику на кнопку. При клике по маршруту отобразится структура маршрута (в данном случае “Пешком – На метро – Пешком”), общее расстояние и затраченное время:

Рис.4 – Новые балуны маршрутов API Карт

HTML-код для вставки карты на сайт без изменений:

function init () <
var multiRoute = new ymaps.multiRouter.MultiRoute( <
referencePoints: [
[55.7182901653654,37.69726548703039], “Москва, ул.Ленинская Слобода 26, стр. 5”],
params: <
routingMode: ‘masstransit’ > >, <

// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
boundsAutoApply: true >);

// Объявляем обработчики для кнопки.
changeLayoutButton.events.add(‘select’, function () <
multiRoute.options.set(
// routeMarkerIconContentLayout – чтобы показывать время для всех сегментов.
“routeWalkMarkerIconContentLayout”,
ymaps.templateLayoutFactory.createClass(‘<< properties.duration.text >>’)); >);
changeLayoutButton.events.add(‘deselect’, function () <
multiRoute.options.unset(“routeWalkMarkerIconContentLayout”); >);

// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map(‘map’, <
center: [55.71136156901162,37.65276849999999],
zoom: 16,
controls: [changeLayoutButton] >, <
buttonMaxWidth: 300 >);

// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute); >
ymaps.ready(init);

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

Ознакомиться с примерами можно в “Песочнице Яндекс” .

12 лет опыта

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

Выводы

  • Старайтесь делать сайты полезные и удобные для пользователей
  • Яндекс API Карт обладает безграничным функционалом, на основе которого может быть придумано и внедрено огромное количество полезных возможностей
  • Не бойтесь познавать новое. Развивайтесь, придумывайте, внедряйте

Удобных и полезных карт вашему сайту!

Автор: Евгений Соболь,
SEO-специалист Artox Media Digital Group

Как вставить карту Яндекс, 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. Делается это в два счета.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Никогда так не делайте или как выдернуть объект map из конструктора Яндекс Карт

Сервис Яндекс Карты предоставляет один “чудесный” инструмент Конструктор Яндекс Карт. Хотя уже пару лет существует более удобный “аналог” конструктора, пользователей продукта от Яндекс не убавляется. Ко мне обратился один программист и попросил добавить некий функционал к карте, созданной на этом конструкторе. На первый взгляд ничего сложного, карта создается на Мапс АПИ Яндекс и оно без проблем могло бы быть использовано. Однако у программистов Яндекса свое мнение на этот счет – весь API они прячут в контейнер функции и никаких интерфейсов не предоставляют. Чтобы как-то манипулировать картой, создавать на ней объекты и прочее, необходимо иметь доступ к экземпляру ymaps.Map , созданному в недрах конструктора. Чтобы было понятнее приведу пример

Вот, что дает конструктор от Яндекс

А вот этот код уже в развертке, пропущенный через jsbeautifier.org

Все завернуто в анонимную функцию. Экземпляр ymaps.Map создается на строке 64. Как видите он запоминается в локальную переменную, которую увидеть извне невозможно. Так как же получить доступ к этой переменной?

Далее пойдет код, который можно смело показывать в рубрике: Как не следует программировать на JavaScript

План такой: переопределить функцию, которая вызывается в момент когда АПИ карт загружено. Потом в его вызове переопределить конструктор ymaps.Map , и в нем уже каждый созданный экземпляр сохранять в глобальной области видимости.

Как же это сделать?

На помощь нам придет вся сила JavaScript, а именно такая его фишка, что любую функцию или метод, можно переопределить. Что нам это дает? Еще раз взгляните на код выше. Функция callback, которая вызывается для создания карты, по готовности API, получает название на строке 17. Оно формируется случайно

По идее переопределить функцию, не зная названия, мы не можем. Может тогда капнем глубже и переопределим Date и Math.random ?!

Финт ушами и никакого мошенничества. Теперь мы можем использовать функцию window[‘fid1111111111111000000’] . Ее тоже нужно переопределить

API Яши доступно через поле window.ymaps_ctor . Это вы поймете, анализируя первый листинг. Это все! На 6-ой строке мы переопределяем конструктор. Меняем его на свой, а уже в нем вызываем старый конструктор, сохраняя ссылку на карту в свою переменную. Profit.

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

Яндекс тролит программистов делая вот такую документацию API Конструктора карт в которой нет ни слова о том, что вообще можно сделать используя конструктор. Есть в этом доля смысла – если вы хотите большего, то почему бы не использовать само АПИ.

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

Код, приведенный выше ужасен. И не стоит прибегать к нему в серьезных проектах. Лучше сразу воспользоваться нормальным конструктором карт, который выдаст вам код на API. и уже вы сможете делать с ним все что хотите. А если у вас сайт на Joomla, то можно вообще не программировать, а воспользоваться компонентом Яндекс Карты – тут Вам доступен и визуальный редактор ака Конструктор, и все плюшки API Yandex Maps

Не бойтесь сложных решений, JavaScript гибок и этот пост в очередной раз доказывает, что в нем нет закрытых тем. Возможно все!

Яндекс карты для Joomla 3

Яндекс карты предлагают нам два варианта использования:

В каком случае использовать эти варианты.

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

Если для метки нужно описание, ссылка на сайт или что-то ещё, то без API не обойтись.
Выглядит это примерно так (плюс индивидуальный вид метки на карте):

Рассмотрим по-подробнее каждый из вариантов и при помощи каких расширений это можно реализовать.

Вариант 1. Вывод карты через конструктор.

Если нужна простая карта, то идём в конструктор и создаём новую карту.
Указываем её название и описание.

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

Далее жмём “Сохранить и продолжить”.

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

И в конце получаем код для вставки на свой сайт.

Вставить карту можно как в статью, так и в модуль.
Обратите внимание, что код карты содержит яваскрипт код, который обрезается редактором Joomla.
Поэтому для вставки можно использовать наш модуль JT Code или плагин Sourcerer

Вот собственно и всё.

Вариант 2. Вывод карты при помощи API

Один из мощных компонентов – это Zh Yandex Map, он бесплатный и использует последнюю версию API 2.0 или 2.1 (на выбор).

У компонента очень много возможностей, поэтому мы рассмотрим только базовые, которые используются чаще всего.
А именно вывод карты с меткой и расширенным описанием.

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

Итак, компонент установили, можно зайти в его настройки и выбрать версию API, а также протокол по которому он будет работать: http или https.
Остальные настройки можно оставить по-умолчанию.

Далее переходим в раздел “Карты” и создаём новую карту.

В настройках указываем:

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

Настроек ещё полно, но для обычной карты на этом можно закончить и перейти к созданию метки.

Для создания метки переходим в раздел Метки.

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

На вкладке “Атрибуты представления” можно настроить вид метки.

Сделать отступы, изменить иконку и т.д.
Чтобы использовать стандартные иконки Яндекса, выбираем для метки – предопределённая иконка.
И ниже в поле “Предопределённая стандартная иконка” вставляем её название. Его можно взять кликнув по кнопке “Список стандартных иконок”.
Из названия иконки нужно убрать кавычки.

На этом можно закончить создание метки для карты и вывести карту на сайте.
Потом вы можете изменять настройки карт и меток так как вам будет нужно.

Вставка яндекс карты в материал Joomla.

В нужной статье (или модуле) достаточно вставить специальный тег
Где 11 – это ID вашей созданной карты.

Прим: заметил что при вставке e-mail адреса в HTML-описание метки карта работает некорректно. Это на всякий случай.

Также можно создавать несколько меток на одной карте и объединять их в категории или группы.
Можно создавать маршруты, пути и разные типы карт.
Настроек у компонента очень много, чтобы разобраться с ними, нужно понять возможности API Яндекс карт. Они очень большие.

Ну а для обычной карты достаточно того что здесь написано.
Документацию к этому компоненту можете посмотреть на сайте разработчика >>
Там же можно найти компонент для карт Google и Baidu.

Спасибо за внимание)
Удачной разработки!

Ссылка на основную публикацию