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

Как добавить карту на сайт или на страницу контакты

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

После того, как создали карту, нажимаем «Получить код карты». Вы увидите кусочек кода, который нужно встроить в сайт.

Обычно карту на сайте размещают:

• На странице «Контакты»;
• В подвале (футере) сайта;
• Реже – на главной странице или странице «Доставка и оплата» (в основном, если речь идет о самовывозе).

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

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

Рассмотрим, как вставить карту на сайте WordPress на страницу «Контакты». У нас на этой странице уже написан наш адрес, телефон, а внизу под всем контентом будет размещаться карта.

Заходим в административную панель сайта. Переходим в раздел «Страницы»:

Затем находим там нашу страницу «Контакты» и выбираем «Изменить». Переключаем редактор из режима «Визуальный» в «Текст». В конструкторе карт выбираем код iframe и копируем его:

В самом низу, после текста, вставляем этот код и обновляем страницу. 

Вот теперь наша карта на сайте:

Отредактировать ширину и высоту можно прямо в коде, который дал Яндекс (теги width, height – задаем нужное числовое значение в кавычках).

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

На WordPress отредактировать футер можно через админпанель. Зайдите Внешний вид – Редактор – Подвал:

Чтобы отредактировать файл, нужно иметь хотя бы базовые знания HTML. Если с этим у вас все не так хорошо, лучше доверьте работу веб-разработчику (найти умельца можно даже на фрилансе).

Это интересно: Виджеты обратного звонка для сайта

Плагины Яндекс.Карт

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

Например:

• Для 1С Битрикс: «Ваша сеть офисов на карте» и «Яндекс.Карта объектов инфоблока»;
• Для Drupal: «Geofield Yandex Maps»;
• Для WordPress: «Yandex Maps API»;
• Для Joomla!: «Яндекс.Карты для Joomla» и другие.

Полный список плагинов вы можете посмотреть в Справке Яндекса.

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

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

Подробнее о добавлении новой карты

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

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

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

Дополнительные карты отображаются под основной.

Добавление метки

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

Чтобы поставить метку, нужно создать переменную для объекта метки. Она должна быть объявлена на глобальном
уровне, то есть, до функции initMap().

var marker;

Внутри функции initMap(), после создания карты нужно добавить такой код:

marker = new ymaps.Placemark(, {
  hintContent: 'Расположение',
  balloonContent: 'Это наша организация'
  });
map.geoObjects.add(marker);

Скрипт работает так: создаётся объект класса ymaps.Placemark. Указывается
два параметра. В первом указываем координаты метки. Второй параметр — это объект с настройками метки. Можно
указать такие настройки:

hintContent — текст, появляющийся при наведении на метку

balloonContent — текст в окне, которое появляется при клике не метке

В 23 строке созданная метка добавляется на карту.У объекта карты есть метод
geoObjects.add(), который добавляет на карту объекты. В нашем примере
объект карты записан в переменную map. К ней применён этот метод.

Весь код скрипта, добавляющего карту с меткой, выглядит так:

var map;
var marker;
function initMap ()
  {
  map = new ymaps.Map("yandexmap", {
    center: ,
    zoom: 16
    });
  marker = new ymaps.Placemark(, {
    hintContent: 'Расположение',
    balloonContent: 'Это наша организация'
    });
  map.geoObjects.add(marker);
  }
ymaps.ready(initMap);

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

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

Прежде всего, необходимо зарегистрировать компанию в сервисе Google My Business

Обратите внимание, что компания уже может существовать на картах. Введите название компании в проверочную форму

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

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

1. Укажите название вашей компании, в появившемся окне регистрации.

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

В поиске ваш профиль в Google будет выглядеть следующим образом:

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

А вот как выглядит точка компании на карте без профиля Google My Business:

Отслеживание эффективности размещения на «Яндекс.Карты»

Эффективность отслеживается в разделе «Статистика». В нем есть три главных подраздела: «Основная», «На картах» и «Геовизор».

«Основная». Здесь собраны диаграммы с данными, которые можно отразить понедельно или помесячно:

• Аудитория.
• Просмотры профиля.
• Клики на кнопки — «Построить маршрут», «Позвонить», «Перейти на сайт».

Основная статистика

«На картах». Здесь собирается статистика за 30 дней и за последнюю неделю. Берется она из «Яндекс.Карты».

• Запросы по рубрикам.
• Конкуренты.
• Прямые переходы.
• Переходы в процессе поиска других организаций — дискавери-переходы.

Статистика в картах

Также здесь вы найдете диаграммы, которые сравнивают метрики, рассмотренные выше.

Анализ метрик

«Геовизор». В этом разделе собраны действия пользователей — по каким запросам они перешли в вашу карточку.

Данные запросов

Как настроить отложенную загрузку карты на сайте

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

Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:

Фрагмент проверки

Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.

Загрузка карты по доскроллу до нее

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

Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.

Пример исходного кода:

Его нужно изменить вот так:

Браузер будет получать src = «», когда читателю понадобится карта.

Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):

Загрузка карты после наведения курсора

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

При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:

На сайте нужно написать контейнер для блока с картой:

Также нужны стили для статичной картинки, подойдет скриншот.

Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

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

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

Фрагмент проверки сайта

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

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

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

На страничке 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-код»).

Как создать Google Карту: пошаговая инструкция

Есть 2 способа создать Гугл Карту с помощью кнопки «Поделиться» и сделать свою карту.

1 способ: через кнопку «Поделиться»

Сработает, если место уже есть на Гугл Картах. Например, вы арендуете офис в бизнес центре, и его уже добавили на карту до вас.

Заходим на сайт с картами — https://www.google.ru/maps/. Пишем адрес офиса, например, Москва, Пресненская набережная, Москва Сити.

Затем жмем кнопку «Поделиться».

Сервис предлагает две возможности поделиться — скопировать ссылку или скопировать код. Так как нам нужно разместить карту на сайте, выбираем «Встраивание карт».

Выбираем размер карты — средняя, маленькая, большая, свой размер, а затем копируем html-код, он нам понадобится для вставки на сайт. О добавлении карты на сайт через код написано ниже.

Важно: обратите внимание, если в Google есть карточка организации, то кроме точки на карте с адресом, можно посмотреть рейтинг, отзывы, номер телефона, часы работы и фотографии компании. Карточка организации помогает продвигать бизнес, содержит важную информацию для клиентов, повышает лояльность (они видят, что компания реально существует). Как добавить компанию в Google, читайте в нашей статье про Google Мой Бизнес

Как добавить компанию в Google, читайте в нашей статье про Google Мой Бизнес.

2 способ: создаем свою карту

Мы сначала создаем свою карту, а потом добавляем ее на сайт.

Заходим на сайт Google Maps — https://www.google.ru/maps/ и нажимаем на меню (3 горизонтальных полоски).

Нам нужен пункт «Мои места».

А в нем «Карты».

Пока здесь ничего нет, жмем «Создать карту».

Базовая карта не имеет названия. Чтобы назвать карту и добавить ей описание, жмем на строчку «Карта без названия».

Добавляем название и описание, после чего жмем «Сохранить».

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

Нажимаем на здание. Точка добавлена, теперь нужно ее назвать и добавить описание. Нажимаем «Сохранить».

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

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

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

Точку можно отредактировать или удалить — значки карандаша и корзины.

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

Также можно настроить совместный доступ и сделать карту видимой для всех, все это делается через кнопку «Поделиться». Особой необходимости в совместном доступе нет, достаточно создать карту один раз и добавить на сайт, но сама функция присутствует. Она нужна для более сложных проектов, например, для тех, кто разрабатывает маршрут для экскурсий.

Для простого добавления карты на сайт нужно один раз сделать ее видимой для всех с помощью вышеупомянутой функции «Поделиться». Созданную карту также можно будет добавить через html-код.

Это интересно: Продвижение YMYL-сайтов

Способ 1: Указание личной информации

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

Вариант 1: Веб-сайт

1. С помощью представленной выше ссылки откройте веб-сайт сервиса и щелкните левой кнопкой мыши по аватарке профиля в правом верхнем углу страницы. После этого через главное меню перейдите в раздел «Закладки».

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

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

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

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

Вариант 2: Приложение

1. Откройте мобильное приложение Яндекс.Карт и коснитесь значка главного меню в левом верхнем углу. Через представленный список нужно перейти в раздел «Закладки». Безусловно, это возможно только при наличии учетной записи.

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

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

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

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

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

Способ 4: Создание и настройка организации

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

Шаг 1: Регистрация организации

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

Заполните текстовое «Название компании» в соответствии с желаемым наименованием. Именно это значение отображается в заголовке карточки каждого предприятия на Яндекс.Картах.

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

Так как добавление организации является основной целью, на следующем этапе нажмите «Да, есть филиал, магазин, офис».

Заполните поле «Адрес офиса» в соответствии с местоположением нужного объекта. Можете здесь же воспользоваться миниатюрной копией карты, чтобы установить маркер в точное место.

На последнем этапе укажите контактные данные и выполните подтверждение любым удобным способом.

Шаг 2: Настройка компании

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

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

Шаг 3: Управление адресами

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

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

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

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

Способ 2: Добавление отсутствующего объекта

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

Вариант 1: Веб-сайт

1. При использовании полной версии сайта коснитесь значка профиля в правом верхнем углу и в появившемся слева блоке выберите пункт «Добавить объект на карту». Также можете кликнуть правой кнопкой мыши в рабочей области и воспользоваться опцией «Добавить объект» в контекстном меню.

Какой бы вариант не был выбран, после этого в левой части сервиса появится список основных объектов. Щелкните по строке с подходящим вариантом, чтобы открыть форму для уточнения деталей.

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

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

Для отправки заявки на добавление места заполните каждое доступное поле и нажмите кнопку «Отправить». Точность указанной информации напрямую повлияет на решение модераторов.

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

Вариант 2: Приложение

1. Находясь в мобильном клиенте рассматриваемого сервиса, на верхней панели коснитесь значка главного меню и перейдите в раздел «Добавить объект на карту».

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

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

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

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

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

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

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

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

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

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

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20charset%3D%22utf-8%22%20src%3D%22%2F%2Fapi-maps.yandex.ru%2Fservices%2Fconstructor%2F1.0%2Fjs%2F%3Fsid%3D7UXGfpfzOI0mK6VKESxAMdk08M4kyvtr%26width%3D600%26height%3D450%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

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

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

Заключение

В этой статье мы рассмотрели два сервиса «Яндекс»: «Яндекс.Карты» и «Яндекс.Бизнес», выяснили, как добавить карточку организации и как правильно ее оформить.

Карточки организаций появляются не только в «Яндекс.Карты», но и в других сервисах

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