Вход
huffson.com
huffson.com
testopay.com


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

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

Google карты для сайта

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

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

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

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

Способ № 1.

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

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

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

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

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

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

код карты

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

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

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

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

Способ № 2.

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

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

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

Способ № 3.

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

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

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

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

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

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

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

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

настраиваем доступ

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

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

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

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

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

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

Обсуждение статьи

Богдан 31.03.22 12:09:19 Ответить

Комментарий:

Отличная статья, разрешите Вам задать вопрос: как установить карту или приложение с картой со строкой поиска. 2ГИС предлагает то, что нужно, но в 2ГИС нужно сначала добавить компанию с инн, огрн, фото фасада здания с табличкой, но я не предприниматель и не самозанятый, я занимаюсь сетевым маркетингом. Может вы подскажете, как посетителям моего сайта можно решить вопрос поиска нужной аптеки не покидая сайт, используя поиск по карте? Спасибо

ТОП заработки

Google Adsense

Владелец
полгода
год
1
Носок судьбы
$16
2
ЮныйМаг
$14
3
Альфа
$12
4
Egorka
$6
5
Первый_нах
$4
6
Noname
$3
7
Pros100
$2
8
Tomato
$2
9
Евгений44
$2
10
jony09
$1

Яндекс Рекламная сеть

Владелец
полгода
год
1
birds
2
Noname
3
Pros100
4
Первый_нах
5
Egorka
6
Tomato
7
Носок судьбы
8
ЮныйМаг
9
Злодейка
10
Optimist

Videoroll.net

Владелец
Полгода
Год
1
webmaster1
8 358 718 ₽
21 177 129 ₽
2
webmaster2
4 671 301 ₽
15 654 185 ₽
3
webmaster3
4 630 316 ₽
14 613 562 ₽
4
webmaster4
4 407 170 ₽
11 165 657 ₽
5
webmaster5
4 336 665 ₽
7 456 232 ₽
6
webmaster6
3 225 065 ₽
7 130 955 ₽
7
webmaster7
3 124 234 ₽
6 836 957 ₽
8
webmaster8
3 012 273 ₽
6 281 791 ₽
9
webmaster9
2 966 028 ₽
5 874 635 ₽
10
webmaster10
2 644 698 ₽
5 796 477 ₽
Рекомендуем
Новые публикации
Новые кейсы