Вход
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
Евгений44
$102
2
Первый_нах
$96
3
Tomato
$81
4
Egorka
$79
5
Noname
$70
6
Pros100
$53
7
Носок судьбы
$33
8
ЮныйМаг
$30
9
Альфа
$27
10
jony09
$6

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

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

Videoroll.net

Владелец
Полгода
Год
1
webmaster1
13 403 930 ₽
21 177 128 ₽
2
webmaster2
7 360 197 ₽
16 348 605 ₽
3
webmaster3
4 028 991 ₽
14 613 560 ₽
4
webmaster4
3 382 780 ₽
14 475 995 ₽
5
webmaster5
3 332 313 ₽
9 643 713 ₽
6
webmaster6
3 225 045 ₽
8 179 320 ₽
7
webmaster7
3 134 277 ₽
6 113 663 ₽
8
webmaster8
2 955 422 ₽
5 918 981 ₽
9
webmaster9
2 575 206 ₽
5 874 635 ₽
10
webmaster10
2 516 286 ₽
5 135 605 ₽
Рекомендуем
Новые публикации
Новые кейсы