Как добавить гугл карту на сайт
Перейти к содержимому

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

  • автор:

Добавить карту Google на сайт: быстро и бесплатно

Заполните форму и нажмите ‘Предпросмотр’, чтобы увидеть, как будет выглядеть карта на вашем сайте.

Бесплатный код Без API и Регистрации. Получите html-код для встраивания карты абсолютно бесплатно
Простой сервис Всего три шага! Введите данные, нажмите «Получить код» и добавьте его на свой сайт
Адаптивная карта Карта корректно работает на десктопных, мобильных и планшетных устройствах
Создать карту

Отзывы наших клиентов

менеджер ювелирного магазина logo

В ювелирном квартале нашего города расположено более 500 магазинов и мастерских. Чтобы точно показать клиентам, где искать мой магазин я указал его местоположение на карте и добавил ее на сайт. Работает отлично, спасибо! Оливер, менеджер ювелирного магазина Бирмингем, Великобритания

менеджер ивент агентства logo

Мне впервые пришла идея добавить карту на сайт, когда я организовывала фестиваль за городом. Прочитала, что встроенная карта google поможет гостям быстро сориентироваться и легко добраться до локации. Как сказал веб-дизайнер наш сайт создан на Joomla и с инструкцией от 1Map вставить карту с меткой было делом нескольких минут. Спасибо вам, ребята!! Миа, менеджер ивент агентства Штутгарт, Германия

владелец барбершопа logo

Спустя пару месяцев после открытия нашего барбершопа мы решили создать сайт-визитку для него. Это не сложно с WordPress. И вот когда я гуглил «как добавить карту Google на сайт» — нашел 1Map. Благодаря вашей видеоинструкции вставить карту на страницу контактов оказалось очень просто!Спасибо. Николас, владелец барбершопа Тулуза, Франция

администратор медцентра logo

Мы открыли еще один медцентр довольно далеко от остановки общественного транспорта. Первое время я тратила много времени, чтобы рассказать клиентам в деталях как нас найти. Один из них предложил добавить интерактивную карту на сайт и я решила попробовать. Спасибо 1Map за сервис, больше никаких навигационных консультаций )) Мартина, администратор медцентра Неаполь, Италия

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

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

В статье рассмотрим, что требуется для добавления на страницу виджета Google Maps и как настроить его отображение.

Содержание

Получение ключа Google Maps API

Прежде чем добавить виджет на страницу, убедитесь, что вы настроили связанный с сайтом проект в Google Cloud и получили ваш личный ключ для доступа к Google Maps API.

Подготовка к подключению

Вам потребуется использовать аккаунт Google — ваш личный или связанный рабочий. Зайдите в консоль Google Cloud и создайте новый проект: задайте его название и родительскую организацию (при необходимости).

Нажмите кнопку Создать (Create).

Подключите Maps JavaScript API

Перейдите в раздел API и сервисы (APIs & services) > Подключенные API и сервисы (Enabled APIs & services).

Нажмите Включить API и сервисы (Enable APIs & services), чтобы перейти в библиотеку интеграций.

В библиотеке найдите интеграцию с Maps JavaScript API и включите ее.

Подключите платежный аккаунт

Настройка платежного аккаунта — обязательное условие для интеграции с картами.

Перейдите в раздел Выставление счетов (Billing) > Платежные настройки (Payment settings), чтобы внести нужные данные, а затем в разделе Выставление счетов (Billing) > Платежный метод (Payment method) привяжите карту для оплаты.

В начале работы платформа Google Clouds начисляет вам стартовые средства для оплаты услуг и дает возможность бесплатно использовать API на время пробного периода, который длится 3 месяца. Когда это время истечет или вы используете все средства стартового баланса, вам нужно будет улучшить тип своего аккаунта.

На платном аккаунте также доступен ежемесячно бесплатный трафик, которого хватит примерно на 28 000 сессий за месяц на страницы сайта с картами. Все, что свыше, взимается с платежного аккаунта по тарифам, указанным на Platform Pricing & API Costs.

Получите ключ

После включения интеграции с API картами вы получите уникальный ключ для доступа в проекте. Вы можете скопировать его сразу или позже в разделе Учетные данные (Credentials).

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

Также рекомендуем позаботиться о безопасности использования вашего API ключа и ограничить прием запросов только с ваших сайтов: для этого выберите пункт HTTP-рефереры (сайты) и укажите URL страниц, на которых планируете разместить виджет карт.

Добавление виджета на страницу

Выберите виджет в конструкторе

Откройте страницу сайта в конструкторе и перейдите к нужному блоку, например, Контакты. Нажмите кнопку Добавить виджет и выберите модуль Карта.

Укажите свой API ключ в форме настройки виджета и нажмите Сохранить.

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

Добавьте точки на карту

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

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

Каждый следующий адрес добавляется кнопкой Добавить адрес.

Настройте внешний вид

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

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

Скопируйте ID

Для каждого элемента предусмотрен идентификатор (ID), который определяет элемент на странице. C его помощью вы можете применять стили и скрипты, настроить показ попапов и отслеживать события по этому элементу.

Чтобы скопировать ID, нажмите на него. Чтобы отредактировать ID, нажмите на значок карандаша.

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

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