Как добавить Google Maps на свой сайт?

26 июля 2016 г. Время чтения: 1 минута Опубликовано в разделах: Блог

В данной статье поговорим о том как добавлять Google карты на сайт.

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

Добавить Гугл карты на сайт можно несколькими способами: с помощью плагинов и просто вставкой кода на сайт. При чем, любой из вариантов установки карты будет достаточно прост.

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

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

Первым делом, что необходимо сделать — это зайти на страничку сервиса Google maps:

https://www.google.com/maps/

И задать интересующий адрес в поиске. Далее необходимо зайти в раздел настройки (шестеренка) и нажать «поделиться».

260716

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

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

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

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

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

Width – это ширина

Height – это высота.

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

В итоге получилось следующее. Вот такая Google карта у вас получится, если следовать инструкции.260701

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

Есть еще очень много настроек, которых можно задать для карты:

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

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

Понравился пост?

Подпишитесь на ежедневное обновление нашего блога прямо сейчас! Будьте в курсе новостей интернет-маркетинга!

Интернет-магазин и развитие
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Интернет-магазин и развитие на 100%
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Корпоративный сайт и развитие
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Корпоративный сайт и развитие на 100%
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Сайт-визитка и развитие
Получать новости компании 


×
Сайт-визитка, тексты и развитие
Получать новости компании 


×
Сайт-визитка и развитие на 100%
Получать новости компании 


×
Сайт, тексты и развитие (36 262 р)
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж и Google.Adwords
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ и Adwords
Получать новости компании 


×
Лэндинг пейдж и Яндекс.Директ 35 300 руб.
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Пакетное предложение
Получать новости компании 


×
Курс «Продвижение сайта без бюджета»
Получать новости компании 


×
Курс «Продвижение сайтов. Модуль 2»
Получать новости компании 


×
Курс «Профессиональная работа с контекстной рекламой»
Получать новости компании 


×
Курс «Создание Landing page + Яндекс.Директ»
Получать новости компании 


×
Курс «Создание сайта на Joomla 3! Модуль 2. Разработка»
Получать новости компании 


×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании 


×
Курс «Создание интернет-магазина на VirtueMart»
Получать новости компании 


×
Курс «WordPress. Модуль 1. Управление сайтом»
Получать новости компании 


×
Курс«WordPress. Модуль 2. Разработка»
Получать новости компании 


×
Курс «Создание интернет-магазина»
Получать новости компании 


×
Курс «Создание сайта на основе CMS/HTML»
Получать новости компании 


×
Курс «Профессиональная веб-аналитика Google и Яндекс»
Получать новости компании 


×
Курс «Непоисковое продвижение сайтов в Интернет»
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Google Adowrds
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds
Получать новости компании 


×
Лэндинг пейдж на готовом дизайне и Яндекс.Директ и Google Adowrds 2 месяца
Получать новости компании 


×