Как встроить карты Google на свой сайт

Опубликовано: 2022-05-15

Помощь покупателям или клиентам в поиске вашего реального магазина имеет важное значение для максимизации ваших личных продаж. Вы можете добавить свою компанию на Google Карты с помощью Google My Business. Но вы также можете встроить Карты Google на свой веб-сайт, например, на страницу контактов.

Это проще, чем кажется.

Встраивание Карт Google в веб-сайты — это простой способ помочь потребителям найти вашу компанию. Ежемесячно к Картам Google обращаются более 150 миллионов пользователей, и вы хотите подключиться к этой пользовательской базе. В конце концов, это удобный способ найти предприятия и компании, независимо от того, являетесь ли вы клиентом, клиентом или даже потенциальным сотрудником.

вставить карту гугл, вставить карты гугл на сайт

В этой статье мы объясним, как встраивать Карты Google на веб-сайты — будь то сайт компании или местный магазин.

Поднимите свой маркетинг! Запишитесь на бесплатную консультацию, чтобы увеличить продажи с помощью SEO и PPC уже сегодня!

Как встроить карты Google на веб-сайты

Есть два разных способа встроить Карты Google на веб-сайт: код HTML или ключ API.

Использование HTML-кода

В Google Maps встроена функция «Поделиться или вставить карту». Вы используете HTML-код карты внутри HTML-кода вашего веб-сайта, чтобы создать на странице прямую ссылку на Карты Google.

  1. Перейдите на google.com/maps.
  2. Найдите место, которое вы хотите встроить, и выберите его.
  3. Нажмите на три горизонтальные линии на вкладке меню в верхнем левом углу.
  4. Выберите опцию «Поделиться или встроить карту».

Вы можете использовать ссылку «Поделиться», чтобы отправить или поделиться ссылкой в ​​социальных сетях, таких как Facebook или Twitter, или на других совместимых платформах.
Чтобы добавить ссылку на свой сайт, нажмите на вкладку «Вставить карту».

  1. Решите, насколько большой должна быть карта, на раскрывающейся вкладке слева во всплывающем меню: Маленький, Средний, Большой или Пользовательский размер.
  2. Выберите опцию «КОПИРОВАТЬ HTML» и вставьте ее в раздел HTML вашего веб-сайта.
  3. Вы можете разместить карту в любом месте на своей веб-странице. Однако, встраивая карту, вы соглашаетесь соблюдать условия обслуживания Google. У вас также не будет доступа ко всем функциям Google Maps на встроенной карте, например к информации о пробках в реальном времени.

Рекомендуемые блоги : 20 лучших готовых идей для увеличения продаж и что такое SEO? Руководство для начинающих по поисковой оптимизации.

Использование ключа API для встраивания Google Maps

Для реализации этого метода вам потребуются некоторые навыки кодирования.

Шаг 1. Создайте ключ API.

  1. Перейдите в раздел Google Maps облачной платформы Google.
    (При настройке проекта вам понадобятся включенные API-интерфейсы)
  2. В меню слева выберите «Учетные данные».
  3. Нажмите «+ СОЗДАТЬ УЧЕТНЫЕ СВЕДЕНИЯ».
  4. Выберите в меню «Ключ API» и скопируйте появившийся API (он понадобится вам позже).

Шаг 2. Создайте код, чтобы сделать карту функциональной

  1. Определите код стиля карты для своей страницы.
    <стиль>
     # карта { ширина: 100%;

    высота: 400 пикселей;

    цвет фона: серый;

    }

    </стиль>

  2. Добавьте скрипт карты с координатами вашего бизнеса.
    <скрипт> функция initMap() {

    var macc = {широта: <широта>, долгота: <долгота>};

    var map = новый google.maps.Map(

    document.getElementById('карта'), {увеличение: 15, центр: macc});

    var marker = new google.maps.Market({position: macc, map: map});

    }

    </скрипт>

Шаг 3. Добавьте скрипт Google в HTML-документ.

  1. Добавьте ключ API в асинхронный сценарий ниже, заменив «YOUR_API_KEY».
    <скрипт асинхронный
     src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap">
     </скрипт>
  2. Добавьте сценарий в документ HTML для завершения.

Вам нужно использовать функцию initMap(), так как она нужна Google для инициализации и добавления места загрузки карты. Внутри этой функции она должна содержать широту и долготу местоположения.

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

Рекомендуемые блоги: как создать воронку контент-маркетинга, которая конвертирует, и что такое копирайтинг? Как увеличить продажи с помощью цифрового копирайтинга.

Зачем встраивать карты Google на свой сайт?

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

Найдите свой магазин

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

Возможность найти ваш магазин повысит посещаемость, продажи и прибыль. Это простой способ связать свое присутствие в Интернете с реальным бизнесом.

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

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

Указать адрес — это одно, но ваш клиент все равно зайдет только на Карты Google и будет искать. У нас есть правило в маркетинге — свести к минимуму шаги, которые должен предпринять клиент. Каждый дополнительный клик или поиск приводит к потере клиентов.

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

Демонстрация маршрутов

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

Рекомендуемые блоги : Что такое цифровой маркетинг? Основы цифровых технологий в маркетинге, преимущества Google My Business и как найти карту сайта для моего веб-сайта.

Научиться встраивать Google в веб-сайт просто

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

Конечно, если вам действительно трудно, вы всегда можете обратиться за помощью к специалисту. У нас есть опыт настройки веб-сайтов и внедрения Google Maps. И мы более чем рады помочь.