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


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

Как-то, решив зайти в офис одной компании, я столкнулся с тем, что офис компании переехал. И на дверях старого офиса, был приклеен листок, с новым адресом офиса. Одна проблема — по этому листку, я искал новый офис примерно час, хотя он был, всего в десяти минутах ходьбы от старого. А все из-за того, что на сайте компании не было карты, с новым местонахождением офиса.

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

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

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

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

Способ № 1.

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

Как вставить Google карту

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

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

первый способ добавления карты от Google на сайт

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

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

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

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

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

Способ № 2.

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

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

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

Способ № 3.

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

www.google.com/maps

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

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

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

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

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

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

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

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

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

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

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

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

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

Загрузка...

Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!

life-webmaster.ru

Как вставить код карты на сайт?

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

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

Специально для вставки карт на сайт у Яндекса есть API Яндекс.Карт с его помощью вы можете собрать нужную Вам карту и установить ее у себя на сайте.yandex_karti

Заходим в «Карты без программирования»

Выбираем Конструктор карт

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

karta

Далее изменяем размеры карты и параметры, так чтобы карта подходила для нашего сайта.

Нажимаем на кнопку «Получить код карты». Копируем код и вставляем его в нужную нам часть сайта. Как вставить код на сайт?

widjet_kart

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

Как вставить код google карт на сайт?

google_maps

Google карты

Если вы хотите копировать код для сайта, чтобы вставить уже имеющуюся часть карты, нажмите на кнопку меню в левой части экрана в виде 3 полосок. Далее нажимаем ссылка/код выбираем вкладку код и копируем.google_maps2

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

Нажмите на нее и задайте маршрут.

google_maps3

А далее как написано выше скопируйте код Google карты. И вставьте его в любую часть сайта.

На этом я заканчиваю статью, теперь вы знаете как вставлять коды карт google и yandex.

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

mmechta.ru

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

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

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

Без лишних вступлений!

1) Идем на Яндекс или Гугл карты2) Вбиваем адрес который хотим видеть на карте, который будет отмечен маркером.3) Находим значок поделиться и забираем код, который будет предложен, и который мы в последствие вставим в любое место сайта где желаем видеть карту.4) Идем на сайт, и в режиме текста если это страница или запись вставляем код в нужное нам место.Все.

Не забудем указать размер, внимательно смотрим в видео

https://youtu.be/1qkBhjru_ss

если видео не отображается вот прямая ссылка на Ютюб https://youtu.be/1qkBhjru_ss

Ссылка на большие возможностей карт

Яндекс https://tech.yandex.ru/maps/Гугл https://developers.google.com/maps/documentation/javascript/adding-a-google-map?hl=ru

Ну и для лентяев 15 бесплатных плагинов как вставить карту на сайт.

01. Leaflet Maps Marker

При помощи Maps Marker можно легко закреплять, назначать и делиться любимыми местами и маршрутами через сайт на WordPress. Можно использовать карты из OpenStreetMap, Google Maps, Google Earth, Bing Maps или прочих карт. Дополнительно можно отображать места и маршруты оригинальными способами (например, для гаджетов в стиле дополненной реальности).

02. SimpleMap Store Locator

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

03. WP Map Markers

Добавляйте новые посты с отображением локациий при помощи нового custom post Location. Вставлять карты в посты и на страницы можно при помощи шорткодов. Интерфейс карты отображает ближайшие локации и позволяет осуществлять поиск с автозаполнением и фильтром по свойствам. Можно добавлять любое количество фильтров.

04. Google Maps via Store Locator

Усовершенствованный Store Locator позволяет добавлять и управлять всеми локациями и связанной с ними информацией. Также с ним легче найти и отметить магазины и предприятия на карте Google. Плагин имеет 2 режима отображения: либо страница с магазинами на карте Google, либо список.

05. WordPress-плагин Easy2Map

Easy2Map – это простой и действенный инструмент для быстрого создания индивидуальных карт Google для постов и страниц. Интерфейс по принципу drag’n’drop позволяет создать карты с одним и более маркерами, выставить размер карты, степень приближения и местность. Затем карту можно бросить на любую страничку или в пост, используя короткий код [easy2map]. Любая страничка или пост, которые содержат короткий код, будут отображать карту и ее маркеры.

06. NextGEN Gallery Geo

NextGEN Gallery Geo – это легко поддающийся настройке плагин, отображающий красивые карты с вашими фотографиями при помощи EXIF-данных или геокодирования. Чтобы им пользоваться, потребуется плагин NextGEN Gallery.

07. Pronamic Google Map

С этим плагином пользователи могут с легкостью добавлять метаданные локации (широта, долгота) на страничку, в пост или в custom post type. Этот плагин добавляет блок для ввода мета-данных Google Maps в редактор поста. Чтобы сохранить метаданные локации для поста, нужно просто перетащить и установить маркер на карту.

08. CP Google Maps

CP Google Maps позволяет вставлять карты Google в пост или любой другой шаблон в WordPress, содержащий более одного поста.

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

09. WP Geo

WP Geo – это плагин для использования Google Maps на платформе WordPress, который позволяет с легкостью соотносить локацию с картой или страницей. Редактируя пост или страницу, можно устанавливать физическую локацию для поста и с легкостью вставлять код карты Google.

10. WP GPX Maps

Для ввода этот плагин использует GPX-файл для отслеживания проделанного маршрута, а при выводе он показывает карту с маршрутом и интерактивную диаграмму изменения высоты (при наличии изменений).

11. XML Google Maps

Этот плагин позволяет с легкостью вставлять Google Map или Google Earth Plugin Maps в блог. Поддерживает filelink KML, KMZ, GPX и geoRSS.

12. Feedgeorge WordPress Plugin

Feedgeorge – это платформа, с помощью которой можно разыскивать, создавать и публиковать новости, информацию и данные о разных местах. Он собирает данные о локациях на одну платформу. В помощь опытным юзерам-геотеггерам на WordPress мы представляем Feedgeorge WordPress Plugin (FGWPP).

13. ExtraWatch PRO

Анализируйте поведение посетителей, оптимизируйте сайт и повышайте уровень конверсии и продаж. Однажды этот плагин назвали «швейцарским армейским ножом для сайтов WordPress». Смотрите статистику кликов на Heatmap, Facebook, Twitter и других ресурсах.

14. Basic Google Maps Placemarks

BGMP создает custom post type для меток (маркеров) на карте Google. Карта вставляется на странички и в посты посредством короткого кода, а также здесь есть настройки, влияющие на то, как она будет выглядеть. Вы можете создавать маркеры, которые отобразятся на карте, а также назначать им иконки через метабокс Featured Image.

15. Google Routeplanner

Этот плагин позволяет добавлять один или более планировщиков маршрутов на основе карт Google, чтобы помочь вашим пользователям найти определенное место (например, сайт вашей компании). Плагин интегрируется с Route Planner (планировщиком маршрутов) на основе карт Google для WordPress. Обзор плана может быстро и просто адаптировать под ваши требования и нужды. И конечно же, есть возможность создать более одного планировщика маршрута (например, для поиска заведений).

e-integrate.ru

Вставка Яндекс и Google карт на сайт: способы установки

Гугл и Яндекс карты для сайтаВсем привет!

Сегодня расскажу вам, как можно добавить на сайт или блог на WordPress карты от Яндекса или Гугла. Мы разберемся, в каких случаях может понадобиться такая функция, а также как установить карты на свой сайт с помощью плагинов и без них. Также в этой статье вы узнаете, как добавить свою организацию на Google и Yandex карты и какие это дает преимущества.

Содержание:

  1. Для чего нужны карты Яндекса и Google?
  2. Как добавить компанию на карты поисковых систем?
  3. Способы установки Яндекс карт на сайт
  4. Установка Google Карты на сайт или блог
  5. Плагины для WordPress по добавлению карт

Для каких целей нужны карты?

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

Второй вариант используется, как правило, для коммерческих организаций по продаже товаров или предоставлению услуг. В таком случае владельцы сайтов добавляют свою компанию на карты поисковых систем. Для этого они указывают реальное расположение своей фирмы или магазина, подтверждая свои права на владение ресурсом и достоверность поданной информации. Размещение на картах от Гугл или Яндекса в данном контексте происходит не только для удобства пользователей, но и как важный элемент SEO – продвижения в поисковых системах. Читайте подробнее о том, как продвигать сайт в регионах. Подобное отображение на картах Yandex и Google предоставляет дополнительные бонусы в поисковой выдаче.

Разберемся в преимуществах размещения компании на картах поисковых систем.

Google и Yandex карты в поисковой выдаче

Для того, чтобы ваша организация появилась на картах Яндекса и Google необходимо внести ее в соответствующие сервисы данных поисковых систем. Для Яндекса – это Справочник (https://yandex.ru/support/sprav/add-company/add-org.html). Для Google — Google Мой бизнес (http://www.google.ru/business).

Чтобы проверить, помогает ли такое размещение бизнесу, приведем ряд примеров. В первом мы будем искать магазин одежды для собак в Санкт-Петербурге. Это геозависимый поисковый запрос. Вводим запрос в Яндекс.Яндекс Карты в поиске

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

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

А вот еще одна особенность при размещении на карте Яндекса, которая ориентирована на удобство пользователей. Она работает, когда мы вводим запрос содержащий название фирмы.Размещение на карте Яндекса

Как видим, справа отображается карта с местоположением компании и описание ее услуг. Тут же имеется возможность для посетителей оценить данное место по пятибалльной шкале («Вы посещали это место?», после ответа «Да» можно дать оценку и добавить отзыв). Отзывы будут отображаться на Яндекс.Картах в описании фирмы. Еще ниже под названием организации, в нашем случае «Туристский клуб Пик», можно нажать кнопку «Как добраться». При нажатии мы попадаем на Яндекс.Карту, где можно простроить маршрут.

Теперь посмотрим, какие преимущества дает размещение на картах Google. Введем тот же запрос про одежду для собак.Размещение на картах Google

Видим, что карта отображается сразу после рекламного объявления. Однако при переходе на следующую страницу поисковой выдачи, карта не появляется. Кликаем на карту, раскрывается полный формат Google Map.Размещение на Гугл Картах

В левой колонке — результаты выдачи (они по позициям отличаются от основной поисковой выдачи), справа – сама карта с отмеченными на ней магазинами. Выбирая и кликая на строки слева, можно посмотреть краткие сведения об организации.Компания на Google Maps

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

Теперь введем в поисковую строку название компании.Размещение компании на Гугл Картах

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

Теперь стало очевидным, что для коммерческой компании, размещения на картах Яндекса и Google – весьма полезный инструмент привлечения новых клиентов.

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

Как добавить компанию на Яндекс Карты: инструкция

Для начала создадим карточку компании на Яндекс Картах. Для этого заходим в Справочник (https://yandex.ru/sprav/main) – Добавить организацию. Предварительно нужно авторизоваться в Яндексе. Нажимаем «Новая организация» и вносим необходимые данные: название компании, телефоны, режим работы, адрес (выбираем на карте), вид деятельности и жмем «Добавить организацию».Добавить организацию на Яндекс Карты

Теперь необходимо подтвердить права на ресурс и достоверность данных. Для этого переходим в «Мои организации» (https://www.yandex.ru/sprav/companies), кликаем «Ожидают подтверждения» и жмем «Подтвердить».

Можно также найти компанию в справочнике: вводите ее название в поиске и выбираете «Это моя компания». В всплывающем окне («Добавление организации к аккаунту» укажите номер телефона и нажмите «Получить код»).Добавление компании на Яндекс Карты

Далее полученный код нужно ввести на вкладке «Мои заявки» — «Заявки на подтверждение». (https://www.yandex.ru/sprav/requests/confirmation). После подтверждения Яндексом ваша организация станет доступна в Яндекс Справочнике, а также на картах Yandex, кроме того появится возможность редактировать адресный сниппет.

Также вы можете добавить информацию о месте на карте, заполнив «Карточку объекта».

Выбираем любое место на Яндекс Карте для примера и жмем правую кнопку мыши. Выбираем строку «Что здесь?».Организация на Яндекс Картах

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

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

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

Как добавить организацию на Google Maps?

Как ранее упоминалось, чтобы компания появилась на Гугл Картах, нужно ее зарегистрировать в Google Мой Бизнес. Для этого переходим по ссылке — https://www.google.ru/intl/ru/business/. Предварительно необходимо авторизоваться в Google. Жмем «Начать» и видим следующее:Как добавить организацию на Google Карты

Заполняем все строки и жмем «Продолжить». Свою компанию необходимо найти в перечне Гугла. Если кто-то другой уже подтвердил страницу вашей компании, тогда следуйте вот этой инструкции — https://support.google.com/business/answer/4566671.

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

Когда все поля заполнены верно, жмите – «Отправить».

Но кроме этого, вам так же нужно подтвердить данные компании. О том, как это сделать читайте здесь — https://support.google.com/business/answer/7107242. Есть варианты подтверждения по почте, телефону или электронке. Если вы ранее проходили проверку в Google Search Console, то подтверждение в Гугл Бизнес происходит автоматически. Для этого зайдите в Google Бизнес с аккаунта, с которого проходила проверка в Search Console (сервис, который позволяет увидеть, как поисковая система воспринимает ваш сайт).

После того, как проверки пройдены, можно управлять своим аккаунтом в Google Мой Бизнес и на Гугл Картах.

Вот видео-инструкция по добавлению организации в Гугл Бизнес:

Как вставить Google карту на сайт или блог?

Есть несколько способов добавить Гугл карты к себе на сайт.

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

Для этого открываем Google Maps (https://www.google.com/maps) – заходим в Меню.

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

Выбираем «Ссылка/Код».

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

 

В открывшемся окне выбираем «Код».

Карта google на сайт

Выбираем размер карты, который нам нужен (Средняя, Большая, Маленькая, Другой размер) и копируем код из строки справа. Теперь этот код можно вставить в той области сайта, где вы хотите видеть карту. Для Вордпресса код нужно вставлять в режиме «Текст», а не в визуальном редакторе. Также данный код можно добавить в виджет.

Следующий способ – создать карту с помощью конструктора (https://mapsengine.google.com/map/).Гугл карты для сайта

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

Чтобы добавить код такой карты к себе на сайт, необходимо нажать «Поделиться» и в «Уровни доступа» выбрать «Для всех в интернете».Как вставить карту Google на сайт или блог

Жмем «Готово». Теперь напротив названия карты из раскрывающегося списка выбираем «Добавить на сайт».Как добавить Гугл карту на сайт

Во всплывающем окне копируем код вида iframe.Код для вставки карты Гугл на сайт

Прямо в этом коде можно поменять ширину и высоту карты (width, height) и вставить карту Гугл на свой сайт или блог.

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

Первый самый простой метод добавления карты на страницы сайта осуществляется непосредственно через Yandex Maps.

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

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

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

Второй вариант создания в Яндексе карты для сайта — через Конструктор карт.

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

Заходим в конструктор карт по ссылке — https://yandex.ru/map-constructor/.

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

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

После того, как метки созданы, нажимаем «Сохранить и продолжить».Вставка Яндекс Карты на сайт

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

Мы выбираем интерактивную карту, к примеру, для раздела «Контакты» (а для вставки в статью вполне может подойти статическая карта).

Жмем «Получить код карты». Появляется html-код для вставки Яндекс Карты на сайт:html-код для вставки Яндекс Карты на сайт

Это код с элементами Javascript. Полученный код прописываем в HTML-редакторе на вашей странице Вордпрес-блога. Если карта не отображается, либо возникли проблемы со вставкой кода, можно воспользоваться плагинами, которые мы рассмотрим ниже.

Статическая карта Яндекса добавляется на сайт, как картинка.

Вот тут технические характеристики и особенности работы с API картами от Яндекса: https://tech.yandex.ru/maps/doc/constructor/concepts/About-docpage/

Плагины WordPress для вставки карт на сайт

Есть плагины отдельно для Google и Yandex карт.

Для Яндекса рассмотрим Oi Yandex.Maps for WordPress. Этот плагин обновляется, достаточно простой и понятный. Установка плагина стандартная. В настройках нужно указать размер и масштабы карты, выбрать метку.Плагин Oi Yandex.Maps for WordPress

Настраивать карту можно непосредственно в визуальном редакторе Вордпресс, там появится кнопка «Яндекс Карта».Плагин для вставки Яндекс Карт на WordPress

При нажатии на эту кнопку у вас появится окно настройки, где вы можете указать адрес, координаты, тип и заголовок метки, размеры и т.д. После всех настроек нажмите Add shortcode — в визуальном редакторе появится шорткод. После того, как запись будет опубликована, он преобразуется в карту на готовой странице.

Для вставки карт Google на сайт мы будем использовать плагин WP Google Maps.

После его активации, в админке появится отдельная строка Maps или Карты (в русском варианте плагина). Переходим в данный раздел и редактируем карту: указываем адрес, размер, масштаб и т.п. После того, как карта готова, копируем шорткод в верхней части экрана и вставляем его на выбранную страницу в html-редакторе.

Вот краткое видео по работе данного плагина:

Успехов и до новых встреч!

pro-wordpress.ru

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

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

Как вставить на сайт статическую карту

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

Для вставки такой карты достаточно сделать снимок карты, нанести необходимые отметки и линии маршрута (если необходимо) и после этого вставить в код HTML посредством тэга «img scr» или другого, используемого в коде вашего сайта.

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

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

Опишем процесс создания динамической карты и дальнейшего ее добавления на сайт на примере сервиса API Яндекс. Карт.

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

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

elhow.ru

как добавить интерактивную карту Google на сайт в Нубексе

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

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

Шаг 1. Получить код для установки карты Google на сайте

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

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

В открывшемся списке меню выберите пункт «Ссылка/код».

В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.

Шаг 2. Как вставить код карты 2gis на сайт

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

Работать будем с текстовым блоком. Нажимаем кнопку «Источник», чтобы перейти в режим редактирования кода. Вставляем в текстовое поле код, полученный на GoogleMaps, и сохраняем изменения.

Заходим на страницу «Контакты» нашего сайта и радуемся обновлениям!

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

Кроме карт от Google, вы так же можете разместить на сайте карты от Яндекс и 2gis, о них мы расскажем в соответствующих статьях.

nubex.ru

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

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

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

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

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

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

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

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

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

Для этого воспользуйтесь плагином MapPress Easy Google Maps. После установки плагина откройте нужную запись, прокрутите страницу вниз и создайте карту. Внизу расположена специальная форма. Заполните все необходимые поля, место на карте, размеры карты, название и описание. После этого нажмите на кнопку «Сохранить», а затем «Вставить в запись».

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

С помощью этого плагина вы также сможете выводить карту на сайте с помощью виджета.

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

Также по этой теме:

wpuroki.ru