Добавляем Google Maps в WordPress

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

Ручное добавление Google Maps к WordPress

Переходим к сайту Google Maps, и просто вбиваем нужное местонахождение, которое вы хотите отображать на сайте. Как только вы найдете нужную локацию, щелкните по кнопке для получения ссылки, которая находится в панели с правой стороны страницы. В итоге вы получите код внедрения карт на сайт. Скопируйте iframe-код. Также вы можете настроить внешний вид карты на вашем сайте, щелкнув по ссылке «Customize and preview the embedded map» («Настроить и просмотреть внедряемую карту»).

Переходим к своему WP-сайту и вставляем код в запись, на страницу или в шаблон. Готово! Теперь осталось сохранить страницу/запись, чтобы увидеть карты Google в действии.

Адаптивные карты Google Maps

Не считая видео и календарей, еще одна обычная проблема – это вставка карт Google. В основном мы опять пользуемся той же собственной техникой формата, а при установке padding-bottom j,обертки просто делим высоту на ширину и добавляем соотношение размеров в CSS.

Обычно код, генерируемый Google Maps, выглядит так:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A
0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>

Мы просто оборачиваем div вокруг iframe и применяем к нему знакомые стили CSS:

.google-maps {
    position: relative;
    padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Вот как будет выглядеть разметка:

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247
!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s
!4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe>
</div>

Вуаля! И снова можно просто применить EmbedResponsively для генерирования copy-paste-кода одним щелчком.

Добавление карт Google в WordPress с помощью плагина

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

Первое, что вам понадобится – установить и активировать плагин MapPress Easy Google Maps. Отредактируйте страницу/запись, в которой будет выводиться карта. Прокручиваем вниз до секции MapPress на странице редактирования записей и щелкаем по кнопке New Map.

Откроется редактор MapPress, где вы можете ввести адрес или щелкнуть по ссылке My Location, чтобы плагин автоматически определил ваше расположение. Введите заголовок вашей карты, выберите ее размер. Как только вы настроите карту, щелкните по кнопке Save, а затем по кнопке Insert into Post. В итоге карта добавится в вашу запись. Обновите или опубликуйте вашу запись, чтобы увидеть изменения.

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

Добавление карты Google в виджет и лайтбокс

Еще один простой способ добавить Google Maps на WP-сайт заключается в установке плагина Google Maps Widget. После активации плагина перейдите в раздел Внешний вид – Виджеты и перетащите виджет Google Maps Widget в сайдбар.

Введите в параметрах виджета адрес, который вы хотите отображать на карте. Вы можете выбирать размер карты, цвет значка текущего расположения, уровень зума и т.д. Щелчок по вкладке Lightbox позволяет настроить параметры лайтбокса (всплывающего окна). Чтобы сохранить настройки виджета, щелкаем по кнопке Save. Переходим к своему сайту и наблюдаем карты в действии.

Источник