Большинству компаний полезно и даже необходимо размещать интерактивную карту на сайте, чтобы посетителям было удобнее вас найти. Это особенно актуально для больших городов: вашим клиентам будет намного легче сориентироваться, если они визуально увидят местоположение офиса, смогут продумать маршрут и рассчитать время на дорогу.
Добавить интерактивную карту на свой сайт позволяет, например, всемирно известная поисковая система Google. Сделать это можно с помощью бесплатного сервиса Google Maps .
Шаг 1. Получить код для установки карты Google на сайте
Итак, чтобы разместить интерактивную карту Google на своем сайте, в первую очередь нужно получить код карты с отметкой Вашей организации. Для этого на GoogleMaps введите адрес или название компании в строку поиска, либо вручную найдите необходимый дом на карте и установите метку кликом мыши.
Когда отметка на карте установлена, нажмите на значок меню рядом со строкой поиска.
В открывшемся списке меню выберите пункт «Ссылка/код».
В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.
Шаг 2. Как вставить код карты 2gis на сайт
Итак, код получен, осталось только разместить его на нужной странице сайта. Мы решили добавить карту в раздел «Контакты». Заходим в админку «Нубекса», на панели управления выбираем раздел «Страницы» , находим в списке нужный раздел и нажмимаем «Редактировать» .
Работать будем с текстовым блоком. Нажимаем кнопку «Источник» , чтобы перейти в режим редактирования кода. Вставляем в текстовое поле код, полученный на GoogleMaps, и сохраняем изменения.
Заходим на страницу «Контакты» нашего сайта и радуемся обновлениям!
Благодаря Google maps любой посетитель вашего сайта сможет увидеть местоположение организации, проложить маршрут на автомобиле, на общественном транспорте или пешком, а так же сохранить ваш адрес в своих заметках.
Кроме карт от Google, вы так же можете разместить на сайте карты от и 2gis , о них мы расскажем в соответствующих статьях.
Доброго дня всем читателям. Google maps или говоря по русски — гугл карты, давно стали популярнейшим инструментом для миллионов пользователей. Не буду сейчас перечислять все достоинства этого замечательного проекта. Вы и сами знаете. Интерактивные гугл карты на страницах типа «О нас» или «Как добраться?» уже давно стали необходимыми атрибутом на любом корпоративном сайте или тем более, сайте с магазином. Давайте поговорим о том, как эти карты удобнее вставить на WordPress сайт.
Любую гугл карту можно заполучить у себя на сайте путем ручной вставки кода или с помощью соответствующих плагинов. Рассмотрим подробнее первый вариант.
Как вставить Google Maps с помощью ручной вставки кода
Топаем на сами карты от Гугла и находим нужное вам географическое место. С некоторых пор карты стали иметь совсем минималистичный интерфейс для удобства просмотра. Нам же нужен классический вариант. Жмем кнопку справа вверху браузера — «Справка и отзывы» и затем — «Классический интерфейс».
Слева появится своеобразный сайдбар, где нам нужна кнопка «Сссылка». Нажимаем её и появляется окошко с двумя полями:
- Короткий код (для быстрой отправки ссылки на вашу карту).
- HTML-код для добавления на веб-сайт
Внизу есть еще ссылка — «Настройка и предварительный просмотр встроенной карты». Кликаем на неё и попадаем в всплывающее окно тонкой настройки представления нашей карты. Тут можно отрегулировать масштаб отображения карты, размер окна для показа карты и скопировать нужный код из нижнего поля на свой сайт. При этом, если вы внимательно присмотритесь, то увидите как в этом поле будут меняться цифры во время изменения настроек отображения карты.
Перейдите в ваш WordPress сайт и вставьте код в публикации, страницы или шаблон. Вот и все. Осталось только сохранить свой пост или страницу и увидеть как карты Google «поселятся» на вашем сайте.
Как вставить Google Maps с помощью плагина
Первый способ хорош, если вы только хотите встроить карту гугл в одном месте WordPress сайта. Но если карты играют важную роль на вашем сайте и в основном содержании вам требуется часто добавлять карты в ваших постах, то я рекомендую использовать специальный WordPress плагин — . После установки и активации идем в любую вашу запись и прокручиваем вниз до метабокса MapPress . Тут нужно создать новую карту — New Map .
Вводим название нашей карты, выбираем размер. В поле Add POI: вводим названия или координаты для поиска нужного места. Кстати, можно таким образом добавить несколько мест на одну карту. В отдельном окне задайте свои описания. Сохраняем и для вставки на страницу жмем Insett Into Post.
Для более детальной настройки этого в общем то, довольно мощного плагина переходим в меню MapPress в админке вашего сайта. Тут вы вольны изменить разные аспекты работы плагина по умолчанию, под свои нужды. Например, определить место для автоматического вывода карт в постах и страницах, изменить интерфейс управления картами и их внешний вид, и прочее. При желании, так же, можно изучить по ссылке подробнейшую инструкцию от автора плагина.
Google Maps в ваших виджетах с эффектом Lightbox
Еще один очень простой и эффектный способ добавить гугл карту на ваш сайт это использование плагина . После установки и активации плагин даст возможность использовать новый виджет с одноименным названием.
Переходим к своим виджетам. Перетаскиваем новый виджет Google Maps Widget в нужное вам «виджетоместо». Например, в сайдбар. Вводим название требуемого населенного пункта и страну. Указываем уровень зума. Кроме показа карты в сайдбаре, еще есть возможность по клику разворачивать карту с помощью эффекта . Соответственно, внутри виджета есть еще две закладки с дополнительными настройками — для сайдбара и для развернутого вида.
Премиум плагин — 5sec Google Maps
Для тех кто предпочитает премиум плагины, хочет «все в одном» и привык всегда иметь великолепную поддержку от автора, могу порекомендовать прикупить популярный плагин — .
За свои 10 баксов плагин умеет следущее:
- Не требует API, никакой установки, без редактирования кода
- Работает в сайдбаре, записях, страницах и вообще везде прямо » из коробки»
- Поддержка полноэкранного режима.
- Используемый по умолчанию код, , могжет быть легко изменен.
- Несколько карт для каждой записи/страницы.
- 12 предопределенных маркеров/иконок
- Полностью настраиваемое HTML описание
- Использует локальный кэш для геокодирования (адрес lat/СПГ mapping) для максимальной скорости
- Обширная документация с примерами
И в заключение, не могу не отметить тот факт, что очень многие современные премиум темы по умолчанию имеют в том или ином виде, поддержку гугл карт. Выводятся они как правило, с помощью . Иногда имеют отдельное меню с настройками. В общем, обращайтесь к документации.
Надеюсь, данная статья поможет вам выбрать нужный именно вам вариант для вставки любых необходимых Google Maps на ваш WordPress сайт.
От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как вставить карту Гугл на сайт WordPress. Google карта это очень удобная штука, поскольку позволяет визуализировать, например, на странице контактов ваш адрес или просто показать какое-либо место на карте.
К слову, если вместо Google карты вы хотите использовать Яндекс карты, то в этом случае можете ознакомиться со статьей .
Итак, давайте приступим к установке и настройке Google Sitemap, то бишь Гугл карты. Здесь мы рассмотрим два способа добавления карты: попроще и чуточку посложнее. Начнем с простейшего варианта, по результатам которого мы получим карту в виде статической картинки. Для его реализации нам даже не потребуется обращаться к сервису Google Maps (Google Карты), достаточно лишь узнать и запомнить технику добавления карты.
Итак, для добавления карты нам необходим тег img с примерно таким кодом:
< img src = "//maps.googleapis.com/maps/api/staticmap?center=нужный +адрес&zoom=17&size=600x300 " alt = "" > |
Как видим, картинка берется с сервиса Google Maps и к ней добавляются несколько параметров, в частности такие:
center — адрес, который необходимо показать на карте;
zoom — величина увеличения (чем большее число, тем крупнее), максимальное значение — 22;
size — ширина и высота карты.
Давайте попробуем добавить карту к статье. Для этого обязательно перейдите в режим HTML кода (вкладка Текст вверху редактора) и добавьте нужный код.
После этого вполне можете вернуться во вкладку Визуально и, если все сделано верно, мы уже в редакторе сможем увидеть выбранное место на картинке Гугл карты.
Также убедимся в том, что Google карта появилась и на сайте WordPress.
Отлично! Теперь мы научились добавлять и производить необходимую настройку карты Google на сайте. Заметьте, нам не пришлось при этом устанавливать никакого плагина, все можно сделать и без плагина в течение буквально одной минуты.
Однако этот способ может не всем подойти. В результате мы получили статическую карту, по которой нельзя перемещаться, т.е. мы получили обычную картинку. Чтобы получить динамическую карту, придется обратиться к сервису Google Карты.
Осталось вставить в статью полученный код. Напоминаю, вставлять код в редактор необходимо в режиме Текст.
Сохраним изменения и проверим, появилась ли Гугл карта на сайте WordPress.
Все получилось. В статье появилась динамическая карта, по которой можно перемещаться. Очень удобно. При этом данный способ не намного сложнее, просто нам дополнительно пришлось обращаться к сервису Google Maps, чтобы найти место и получить код карты.
Повторюсь, для использования Google Maps нам даже не пришлось искать плагин WordPress. К слову, если вы хотите научиться писать плагины, позволяющие легко добавлять на ваш сайт любую Google карту, тогда познакомьтесь с нашим .
На этом у меня все. Удачи!
Недавно я писал статью как добавить свою организацию на Яндекс карты, детальнее читайте: “ ”. Сегодня же пришло время посмотреть как можно добавить организацию на карты Google в Google Places (Гугл места) . Многие подумают зачем, мне добавлять свой сайт в данный сервис, у меня и так все хорошо. Возможно хорошо но может быть еще лучше.
Для чего нужны Google Places (Гугл места)
Изначально Google формировалась только из страниц, которые заданному запросу. Сейчас же, выдача довольно таки видоизменилась, она включает в себя:
- картинки,
- видео
- новости
- по региональным запросам Google карты, на которых находятся специальные метки.
Если Вы введете в поисковую строку региональный запрос “натяжные потолки в Киеве ” или “рестораны в Москве ”, то увидите слева карту и в выдаче дополнительные 7 позиций, которые формируются из организаций, которые пользователи добавляют в Google Places.
Вот как получить такую метку мы сегодня и будет разбираться.
Плюсы добавления организации на карту
Я уже довольно таки давно тестирую на разных клиентских ресурсах и могут сказать, что по региональным запросам:
- идет увеличение получения трафика ;
- увеличивается узнаваемость бренда ;
- увеличивается скорость нахождения фирмы. Даже если пользователь не переходит на сайт, он может просто позвонить по указанному телефону.
Пошаговое руководство добавления организации в Google Places
Для начала необходимо завести себе почту gmail, у кого она уже есть, необходимо авторизоваться. После того, как успешно авторизовались, необходимо перейти по ссылке:
В строке поиска вводим название вашей компании и нажимаем “Поиск ”, возможно кто-то уже добавлял ее ранее. Если компании нету, то в появившемся окне необходимо выбрать пункт “Ввести данные о компании полностью ”.
Теперь необходимо заполнить все пункты, они обязательные. Проблемы могут быть с категорией, которую нужно выбрать из списка и после нажать кнопку “Отправить ”.
На следующем шаге необходимо подтвердить, что Вы являетесь представителем данной компании и нажать кнопку “Отправить ”.
Все теперь появится окно в котором необходимо выбрать пункт “Отложить проверку и продолжить ”.
Все теперь Вас перекинет на страницу, которую необходимо заполнить информацией о компании. Заполнять нужно все пункты, чем больше информации тем лучше, добавляем:
- описания;
- картинки;
- видео (как сделать видео для YouTube можете прочитать в статье: « «)
- адреса;
- логотип;
- телефоны
Что бы подтвердить отображение компании на карте, необходимо на странице компании сверху найти кнопку “Подтвердить ”. При нажатии на нее следовать всем указанным шагам. Подтверждение производится под средством получения письма на почту в котором находится PIN — код , который необходимо ввести на той же странице компании сверху при нажатии на кнопку “Введите код ”.
Я уже говорил в начале, что используя Google Places, по региональным запросам можно получить хороший дополнительный трафик. Что бы попасть в ТОП необходимо правильно оптимизировать страницу компании, для этого нужно:
- в названии компании указывать ключевое слово например: “ ”;
- правильно выбрать категорию, в которую тоже будут входить ключевые слова;
- получать как можно больше отзывов;
- заполнить всю необходимую информацию;
- добавить , плюсом так же будет добавление видео.
- добавить логотип для узнаваемости бренда.
Просите своих довольных клиентов или друзей оставлять хорошие отзывы на странице, гугл любит когда много отзывов и добавляется новая информация.
После всех проделанных шагов и заполнения страницы компании, необходимо ждать, как правило письмо с PIN — кодом должно прийти в течении 1-2 недель. После подтверждения страницы, заявка еще будет рассматриваться и отметка не сразу появится на Картах Гугл. Данная процедура может занять от 1-2 недель, до нескольких месяцев. Тут главное терпение.
Используйте Google Places для своих целей, повышайте количество трафика и продаж на своем сайте.
Код для вставки Google Map , чтобы повысить ценность вашего сайта
Если вы добавите расположение на ваш веб-сайт, то посетителям будет легче запомнить место и найти к нему дорогу. Если вы добавите карту на свой сайт, то посетители определенно лучше запомнят ваше местоположение и смогут легче до вас доберутся. Многие владельцы сайтов интересуются, как вставить Google Maps в Joomla, вот краткое руководство, которое поможет вам добавить карту Google на сайт.
Ниже перечислены шаги, которые помогут вам сделать это очень просто, и успешно добавить карты Google на сайт с нашим генератором Google Maps:
- Выберите адрес, по которому вы хотите, чтобы посетители вас нашли, и добавьте карту расположения на сайт.
- Выберите тип карты: спутниковый, гибрид или местность. Посмотрите внимательно, какой тип лучше подходит именно вам.
- Укажите ширину и высоту, чтобы сделать ее подходящей для вашего сайта.
- После того, как вы закончили с этими настройками, нажмите на кнопку “Сгенерировать мой код” под нашим инструментом. Кроме того, вы можете выбрать полный код, нажав “>> Нажмите здесь – Нажмите Ctrl + C <<“
- И, наконец, вставьте HTML-код в исходный код вашего веб-сайта. Пожалуйста, обратите внимание, что вы можете вставлять карты Google в разных частях вашего сайта, таких как статьи, информация/страницы контактов или виджеты.
Преимущества внедрения карты Google на веб-сайт
Если вы вставите карты Google на веб-сайт, то клиентам будет удобно вас найти. Если им понравится ваш продукт, услуга или идея, и они захотят связаться с вами лично, то они смогут легко вас посетить. Не каждый посетитель вашего сайта будет достаточно терпелив, чтобы искать ваш адрес на карте. Тем не менее, если вы добавите карту Google на сайт, тогда им не потребуется прилагать дополнительные усилия, чтобы определить ваше местоположение и направление.
Благодаря размещению карты, вам удастся создать интерфейс, который будет визуально насющен и больше понравится пользователям. Такой интерфейс будет стимулировать ваших пользователей на взаимодействие с вами и, таким образом, создавать более прочные связи. С новым API Google, добавление карты Google на ваш сайт стало очень простым, и даже новичок сможет легко это сделать. Карты полностью настраиваемые, и поэтому вы сможете изменять различные свойства в соответствии со своими предпочтениями.
