Как‌ ‌добавить‌ ‌карту‌ ‌google,‌ ‌яндекс‌ ‌и‌ ‌2гис‌ ‌на‌ ‌ сайт:‌ ‌просто‌ ‌по‌ ‌шагам‌

Коротко о главном

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

1. Указывать только актуальную информацию (телефон, почта, адрес, сайт, график работы, цены, услуги и др.);
2. Заполнять абсолютно все данные о компании;
3. Обеспечить качественные изображения (логотипы, фото и др.);
4. Тщательно продумать и оптимизировать описание;
5. Регулярно следить за отзывами и оценками пользователей.

На этом все

Больше о ссылочном продвижении сайта в Яндексе можно узнать из нашей статьи в блоге и вебинара с Рамазаном Миндубаевым у коллаборатора:

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

Существует несколько способов, для того, чтобы вставить гугл карты на свой сайт, и не важно, работает сайт под CMS WordPress или просто на HTML

Способ № 1.

Перейдем на сайт — google.com/maps и выберем нужный адрес в строке поиска.

Обратите внимание, у карты есть два режима, упрощенный и полный. Если вы попали на упрощенный вид, то нужно перейти на полный вид

Для этого нужно просто нажать на значок в правом нижнем углу.

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

И выбрать пункт – «Код»

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

И вставить его в нужное место на сайте

Обратите внимание, если сайт на WordPress, то для вставки кода, достаточно перевести редактор в режим текста, и вставить код в нужное место. Или же вставить код в боковой виджет

И вот что получится.

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

Способ № 2.

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

Нужно перейти по адресу — www.google.ru/maps. А далее? Да все как в первом способе. Также выбираете нужное месторасположение, и выбираете код. Единственная разница – сам адрес. А так сервис полностью идентичен.

Подозреваю, что свои адреса для карт имеются для всех доменных зон, коих у Гугл совсем не мало.

Способ № 3.

Но есть и третий способ. Уж он-то отличается от первых двух. Различие – больше настроек. Давайте перейдем на него.

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

Здесь есть ряд дополнительных элементов: выбрать объекты, добавить маркер, нарисовать линию, добавить маршрут, измерить расстояние или площадь.

Вставив маркер в нужное место, можно вставить название места и его описание.

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

После этого, нужно нажать на кнопку – «Поделиться»

Добавить название и описание карты.

Настроить доступ

И сохранить изменения

Далее, нажав на три точки справа, выбрать «Добавить на сайт» в появившемся меню.

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

И вот что в результате получится

Таким образом, теперь вам не составит большого труда вставить на ваш сайт карту Гугл, и теперь, вашим клиентам, не придется искать ваш офис, как мне когда-то. И еще напомню. Эти методы, можно использовать на всех типах сайтах, будь это чистый HTML или же CMS, например WordPress.

9 ноября 2017 Сайтостроение

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

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

Добавляем Яндекс карту

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

При заходе на страницу конструктора карты, появится окно, где нужно нажать на кнопку «Создать карту»

Указываем нужный нам адрес в поисковой строке и нажимаем на кнопку «Найти» чтобы перейти к нему

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

После добавления метки или линии, они добавляются в раздел «Список объектов» слева

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

Указываем название и описание нашей карты. После чего нажимаем на кнопку «Сохранить и продолжить»

Выбираем вариант «Вставить на сайт» и «Интерактивная карта»

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

Указываем размер карты (ширину и высоту), в котором хотим добавить ее на страницу. Если хотите, чтобы карта была по всей ширине экрана — включите функцию «Растянуть по ширине». На самой карте, справа, будет выделяться область, которая отобразится на сайте.

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

Нажимаем на кнопку «Получить код карты»

Выберите вариант подключения карты (через JavaScript или iframe) и скопируйте полученный код

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

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

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

Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода». 

Скопированный код карты добавляем в настройках этого виджета

Как удалить карту из приложения «Сбербанк Онлайн»?

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

1. Пройти процедуру авторизации в «Личном кабинете».
2. Войти во вкладку «Настройка безопасности продуктов» и перейти в раздел «Настройка видимости продуктов». На экране появится перечень всех счетов, карт и депозитов пользователя.
3. Выбрать вкладку «Сбербанк Онлайн». На экране откроется список продуктов, которые доступны для управления через интернет-сервис.
4. В графе «Отображать», расположенной напротив карты, которую нужно скрыть, следует удалить галочку.
5. Для подтверждения операции следует ввести одноразовый код из СМС-сообщения.

ВНИМАНИЕ! При использовании мобильного приложения вместо вкладки «Сбербанк Онлайн» следует выбрать «Мобильные устройства»

Как добавить вторую карту?

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

ВНИМАНИЕ! Всего можно ввести не более 8 карт. Каждую из них при необходимости можно в любой момент сделать невидимой

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

Добавление карт на сайте

Доя совершения процедуры подключения к сервису нужно соблюдать следующий порядок действий:

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

Чтобы ввести карту вручную, нужно:

Войти во вкладку «Мои карты».
Перейти в раздел «Карты».
Активировать опцию «Добавить карту».
Ввести последние 4 цифры номера карточки и наименование продукта.
Для удобства дальнейшей работы рекомендуется ввести порядковый номер

Таким образом можно расставить продукты по порядку убывания их важности.

Добавление карты через мобильное приложение

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

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

• допущена ошибка при вводе номера телефона;
• некачественная связь;
• сбои в работе серверов.

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

Чтобы прикрепить карту, нужно:

1. Войти в раздел «Карты».
2. В поиске указать 4 последние цифры номера карточки.
3. По результатам запроса на экране появится необходимый продукт. Следует нажать на него и выбрать вариант «Добавить».

Через терминал

Чтобы добавить карту в «Сбербанк Онлайн» через терминал, нужно:

1. Поместить карту в картоприемник и ввести ПИН-код.
2. Войти во вкладку «Мобильный банк» в главном меню устройства.
3. Активировать функцию «Подключить основную карту».
4. Выбрать один из тарифных планов: экономный или полный с СМС-информированием. Первый вариант предполагает оплату каждой отдельной услуги и бесплатное обслуживание. Выбрав полный тариф, клиент может пользоваться всем пакетом услуг, оплата производится ежемесячно. Стоимость обслуживания — 750 руб. в год.
5. Ввести номер телефона для СМС-информирования.
6. На указанный номер поступит сообщение с одноразовым кодом. Его необходимо ввести на терминале.

ВНИМАНИЕ! Через терминал можно запросить логин и пароль для входа в «Личный кабинет». Услуга предоставляется бесплатно

Другие способы добавления карты в «Сбербанк Онлайн»

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

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

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

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

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

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

Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.

Метки

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

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

Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.

Линии

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

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

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

Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.

Многоугольники

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

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

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

После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.

Можно задать цвет контура и заливки, выбрать толщину

Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности

Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.

Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.

Пробки и слои

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

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

Теги XML-карт

Наименование тега	Обязательность	Description
<urlset>	+	Необходим для инкапсуляции карты сайта и указания текущего стандарта протокола сетевого взаимодействия
<url>	+	Родительский тег для имеющегося URL-адреса. Другие теги будут являться дочерними
<loc>	+	Включает данные о полной ссылке на имеющуюся страницу сайта, причем ссылка должна являться частью главного зеркала
<lastmode>	—	Содержит информацию о дне, когда в последний раз была изменена страница, в распространенном формате UTC
<changefreq>	—	От Change frequency — частота изменений страницы. Включает несколько параметров: Always — всегда. Hourly — ежечасно. Daily — ежедневно. Weekly — еженедельно. Monthly — ежемесячно. Yearly — ежегодно. Never — никогда. Это подсказка для поискового робота, которая включает информацию о том, как часто производится обновление. Наиболее частым параметром является еженедельное обновление
<priority>	—	Информация для поисковика. Имеет дробный тип данных и может содержать число от 0.0 до 1.0. Не рекомендуется устанавливать высокий приоритет всем страницам сайта. Тег необходим для упрощения работы поискового алгоритма. Никак не влияет на результаты выдачи
<xhtml:link>	—	Применяется для указания дополнительных ссылок на других языках
<image:loc>	—	Является дочерним элементом тега, отвечающим за указание полного адреса опубликованного изображения
<image:title>	—	Необходим для описания содержимого изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор за вами.
Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

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

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

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

← назад к блогам

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

Через код (HTML)

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

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

Нажимаем на добавление элементов (+), затем «Вставка» — «Вставка кода» — HTML iframe.

На странице появляется блок, добавляем в него код и нажимаем кнопку «Применить» .

Получается вот такая карта на странице.

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

С помощью плагина (для WordPress и других CMS)

Если ваш сайт создан на CMS, и вы не умеете работать с кодом, проще установить плагин. Для WordPress создано несколько плагинов карт, но чаще всего используют WP Google Maps — у него более 400 000 активных скачиваний.

В админке сайта заходим в плагины — добавить новый.

Пишем WP Google Maps или просто Google Maps, если хотите посмотреть, какие еще плагины есть.

Нажимаем «Установить» и «Активировать».

В этом плагине нужно создавать карту с нуля. Нажимаем «Создать карту» или «Create map» и создается первая карта, которой сразу присваивается шорткод — его потом нужно будет добавить в нужную часть страницы. Нажимаем «Редактировать» или «Edit».

Плагин предлагает 2 инструмента для создания карт, один не использует Api key, второй (Google Maps) использует.

В разделе Markers указываем адрес точки, можно добавить анимацию. Справа нужно масштабировать карту до нужного размера, например, увеличить до конкретных улиц. Сохраняем точку «Save Marker» и указываем Api Key (справа окно, где написано Please ensure you enter a Google Maps API key to continue using Google Maps), нужно нажать на ссылку.

Ключ вставляется в соответствующее окно.

Для его получения нужно зарегистрироваться на сайте https://cloud.google.com/maps-platform/. Использование ключа платное — от 2 $ в месяц и выше. Есть бесплатный тариф, но с ограничениями. Если не хочется возиться с ключом — тогда выбирайте плагин, где не нужен API key или добавляйте через html-код, про который мы писали выше. Также на Google Maps Platform есть функции для кастомизации Google Карт.

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

Чтобы карта начала отображаться на странице, в нужную часть вставляем шорткод и сохраняем страницу.

Заключение

Google Карта на сайте, помогает клиентам понять, где вы находитесь. Ее актуально использовать владельцам оффлайн бизнеса — торговых точек, кафе, офисов. Можно взять готовую карту и добавить ее на сайт или создать свою с нуля. На сайт карта добавляется при помощи html-кода или плагина. В некоторых случаях может понадобиться API key.

Полезные ссылки:

• Как добавить организацию в Дубль Гис
• Как добавить компанию в Яндекс.Справочник
• Реклама в Яндекс.Район

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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