Карты являются неотъемлемой частью любого бизнес-сайта. Даже если вы полностью работаете в Интернете, клиенты все равно хотят знать, кто вы и где вы живете. Карты Google теперь используются по умолчанию для многих веб-сайтов, поскольку они наиболее просты в использовании, кажутся наиболее точными и бесплатными. К концу этого урока вы будете точно знать, как встроить адаптивную карту Google на свой веб-сайт.
Карты Google по умолчанию не всегда отзывчивы, поэтому могут не масштабироваться на экранах разных размеров. В зависимости от того, используете ли вы плагин WordPress или встраиваете его самостоятельно с помощью кода, может потребоваться добавить пару строк CSS, чтобы сделать карту адаптивной.
Адаптивный веб-дизайн
Отзывчивый является ключевым термином здесь. В нем описывается веб-дизайн, который учитывает пользовательский опыт и устройство, чтобы обеспечить его одинаковое независимо от того, какое устройство вы используете для доступа к веб-сайту. Например, адаптивный веб-сайт должен обеспечивать одинаковое качество обслуживания, независимо от того, посещаете ли вы его на рабочем столе, планшете или смартфоне.
Для этого веб-сайт должен адаптироваться к различным разрешениям, размерам экрана и сенсорной.
Встраивание адаптивной карты Google в веб-сайт
Есть три способа встроить Карты Google в веб-сайт. Если вы используете тему WordPress, она может иметь встроенную функцию. Вы также можете использовать плагин или встроить код прямо из Google на любой веб-сайт. Первый и второй варианты отлично подходят для пользователей WordPress, другие CMS тоже используют плагины, так что вы здесь. Последний вариант использования кода должен работать на большинстве веб-сайтов независимо от того, как они построены.
Используйте тему WordPress для встраивания адаптивной карты Google
Некоторые темы WordPress будут иметь функцию специально для Google Maps. Поскольку карты являются основой для современных веб-сайтов, некоторые дизайнеры тем внедрили их непосредственно в свои дизайны. Если ваша тема имеет функцию карты, вам, вероятно, понадобится API Карт Google, чтобы она работала. Вы добавляете API в опции темы, и он будет напрямую общаться с Google, чтобы создать карту при каждом посещении.
- Посетите эту страницу на сайте Google, чтобы начать процесс API.
- Выберите синюю кнопку «Начать».
- Выберите значок меню из трех строк в левом верхнем углу нового экрана.
- Выберите API и сервисы, а затем учетные данные.
- Выберите «Создать учетные данные», а затем «Ключ API».
- Выберите Restrict Key и выберите HTTP Referrers.
- Выберите Сохранить.
- Скопируйте ключ API и вставьте его на нужную страницу параметров дизайна.
Получив API-ключ, вы можете внедрить карту Google на свой веб-сайт с помощью инструментов дизайна тем. Пока тема отзывчива, карта тоже должна быть.
Используйте плагин для вставки адаптивной карты Google
WordPress использует плагины, Joomla использует расширения, Drupal использует модули или плагины, а другие CMS используют аналогичные соглашения об именах. В любом случае, плагины относятся к модульным элементам, которые вы можете прикрепить к своей базовой CMS для добавления функций. Одной из полезных функций является карта Google. Если тема вашего веб-сайта не содержит элемента maps и вы не хотите писать код самостоятельно, плагин - это следующая лучшая вещь.
- В WordPress перейдите к плагинам и добавьте новый.
- Найдите Карты Google и выберите плагин, который вам нравится.
- Включите его в плагинах и перейдите к его настройкам.
- Добавьте API Карт Google, который вы создали выше, где указано, и сохраните.
- Реализуйте плагин везде, где вы хотите, чтобы карта появилась.
Другие CMS немного различаются по именам и позициям меню, но принцип почти такой же. Большинству, если не всем, подключаемых модулей для карт потребуется API Google Maps для работы.
Используйте код для встраивания адаптивной карты Google
Если вы не используете WordPress или другую CMS, вы все равно можете встроить адаптивную карту Google. Вам просто нужно использовать код вместо модуля. Это займет немного больше работы, но будет доставлять такие же адаптивные карты.
- Посетите Карты Google и перемещайтесь, пока карта, которую вы хотите отобразить, не заполнит экран.
- Выберите синюю ссылку «Поделиться» и скопируйте код с встроенной карты.
- Добавьте ваш конкретный код для встраивания в код ниже между и.
- Добавьте код в HTML вашей веб-страницы, где вы хотите увидеть карту.
- Сохраните ваши изменения.
Код:
Это не мой код, я нашел его в Интернете, но протестировал на своем сайте. Он работает как шарм и должен работать независимо от того, используете ли вы CMS, HTML, Hugo или один из множества других языков веб-сайта или инструментов для страниц.
