Как добавить адаптивную карту Google в WordPress

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

Готовы добавить карту на свой сайт WordPress? Есть несколько способов добавить его вручную и с помощью плагина. Начнем с метода DIY.

Добавление Google Карт вручную

Встраивание карты

Добавление и встраивание карты — это то, как вы получите реальную карту для отображения на странице, и для этого требуется всего пара простых шагов. Ручное добавление карты — это то, что нужно, если у вас есть только одна (или всего несколько) карт для добавления на ваш сайт.

1. Перейдите на Google Maps и введите местоположение.

2. Нажмите кнопку поиска.

3. Выберите «Поделиться» (это будет опция справа).

4. Скопируйте код для встраивания, убедившись, что он весь выделен перед копированием.

Добавление карты в WordPress

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

5. Перейдите в «Сообщения» > «Добавить» или «Страницы» > «Добавить».

6. Откройте HTML-редактор (в текстовом режиме) и вставьте код для встраивания в любое место, где должна отображаться карта.

7. Выберите «Сохранить черновик», «Обновить» или «Опубликовать» в зависимости от ваших предпочтений.

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

Делаем карту отзывчивой

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

Возможно, вы заметили, что в iframe , который вы вставили в редактор, были измерения ширины и высоты — вам нужно будет внести некоторые коррективы, чтобы сделать карту отзывчивой. Немного простого CSS сделает свое дело; все, что нужно, это добавить дополнительный тег div вокруг кода встраивания. Используйте класс responsive-map , чтобы ваш код теперь выглядел так:

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Добавьте CSS

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

.responsive-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

И это все! С помощью этих простых дополнений кода у вас будет адаптивная карта на вашем сайте. Не уверены, хотите ли вы пойти по пути «сделай сам»? Теперь давайте рассмотрим простое решение плагина.

Проверьте весь код с помощью этого CodePen!

Добавление карт с помощью подключаемого модуля MapPress Easy Google

Встраивание карты вручную — хороший подход, когда карт всего несколько, но что произойдет, если вам нужно добавить много? Например, бизнес-сайт может иметь несколько местоположений, которые необходимо отобразить. Добавлять каждую карту по отдельности может быть немного утомительно. Вот тут и пригодится плагин. Есть много отличных вариантов на выбор, но MapPress Easy Google Maps — это вариант, который стоит проверить (и то, что я буду использовать в этом руководстве).

Для начала вам необходимо установить и активировать MapPress Easy Google Maps на вашем сайте WordPress.

Настройки плагина

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

Добавление карты

Опять же, чтобы добавить карту, вам нужно будет отредактировать сообщение или страницу.

1. Перейдите в «Сообщения» > «Добавить» или «Страницы» > «Добавить».

2. Прокрутите вниз до раздела MapPress на экране редактирования и выберите «Новая карта».

3. Вы увидите редактор MapPress, где вы можете ввести адрес вашей карты. Даже если у вас нет точного адреса, попробуйте ввести название местоположения, и оно должно найти его для вас. Если вы хотите поделиться своим местоположением, ссылка «Мое местоположение» позволит плагину автоматически определить ваше местоположение.

4. Добавьте заголовок к карте и выберите размер карты.

Примечание. Ширину карты можно указать в процентах в редакторе карт или в шорткоде, что делает ее удобной для мобильных устройств. Высота обычно остается фиксированной. Если вы предпочитаете добавлять высоту и ширину к шорткоду, это будет выглядеть примерно так: [mappress map width="100%" height="400"]

5. Нажмите «Сохранить», а затем «Вставить в сообщение». Карта теперь будет в вашем посте.

6. Обновите или опубликуйте свой пост, чтобы увидеть карту.

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

Протестируйте на Local!

Помните: вы никогда не должны вносить изменения на работающем сайте. Наше бесплатное приложение для локальной разработки поможет вам упростить рабочий процесс и безопасно экспериментировать с вашим сайтом. Попробуйте сегодня!

Эта статья была первоначально опубликована 2 февраля 2016 года. Последний раз она обновлялась 14 февраля 2018 года.