Google Maps: как создать и добавить интерактивную карту Google на сайт

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

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

Потом перейдите в конструктор Google My Maps (Карты Гугл).

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

Кнопка создания 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 такое поле называется «Код отображения карты проезда». Оно находиться в разделе панели управления «Контактные данные сайта».

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