Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

Для создания интерактивной Google Карты для сайта необходимо быть зарегистрированным в Google Почте (Gmail). Поэтому для начала создайте или войдите в свой личный кабинет.

Как сделать интерактивную карту google

Нажмите на кнопку «Создать новую карту».

Как сделать интерактивную карту google

Вы увидите окно создания интерактивной Google Карты.

Как сделать интерактивную карту google

Введите адрес организации в поле поиска и нажмите на кнопку поиска.

Как сделать интерактивную карту google

Интерактивные Google Карты укажут адрес на картах.

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

Вы увидите что-то вроде этого.

Как сделать интерактивную карту google

Нажмите на кнопку «Изменить».

Как сделать интерактивную карту google

Измените заголовок и информацию, а потом нажмите на кнопку «Сохранить».

Как сделать интерактивную карту google

Нажмите на кнопку «Стиль».

Как сделать интерактивную карту google

Измените цвет и дизайн иконки на подходящий для вас вариант.

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

Укажите название карты и нажмите на кнопку «ОК».

Как сделать интерактивную карту google

Появится новое окно. Нажмите на кнопку «Изменить» возле уровня доступа «Документ доступен только вам».

Как сделать интерактивную карту google

Выберите вариант «ВКЛ (для всех в интернете)» и доступ только для просмотра. Нажмите на кнопку «Сохранить».

Как сделать интерактивную карту google

Нажмите на кнопку «Готово».

Как сделать интерактивную карту google

Нажмите на кнопку «Открыть меню». Выглядеть как 3 точки.

Как сделать интерактивную карту google

Откроется меню. Нажмите на кнопку «Добавить на сайт».

Как сделать интерактивную карту google

Скопируйте из поля код интерактивной Google Карты для сайта и вставьте в блокнот.

Как сделать интерактивную карту google

Найдите строчку «width=»640″». Измените цифры размера на «100%». В нашем примере мы изменили «640» на «100%». Получилось так.

Как сделать интерактивную карту google

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

Скопируйте код из блокнота и вставьте в необходимое поле на сайте. В ezCatalog CMS такое поле называется «Код отображения карты проезда». Оно находиться в разделе панели управления «Контактные данные сайта».

Источник

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

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

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

Рекомендуем: Jesica – приложение для продвижения в Instagram (от создателей Instaplus.me). Установите Jesica на Android-телефон или компьютер и приложение будет ставить лайки, подписываться и отписываться, как будто это делаете вы сами:

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

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

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

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Через код (HTML)

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

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

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

Как сделать интерактивную карту google

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

Заключение

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

Источник

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

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

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

Как сделать интерактивную карту google

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Источник

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

Как сделать интерактивную карту google

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

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

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

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

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

Способ № 1.

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

Как сделать интерактивную карту google

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Способ № 2.

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

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

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

Способ № 3.

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

Как сделать интерактивную карту google

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *