Обзор
Поле «Расположение на карте» создает интерактивную карту с возможностью размещения маркера. В этом поле есть кнопка поиска, кнопка поиска местоположения и события щелчка / перетаскивания для размещения маркера. Данные сохраняются и возвращаются как массив, содержащий маркеры lat, lng и address.
API Google карт ограничивает количество сайтов, которые ежедневно могут использовать эту бесплатную услугу. Чтобы снять это ограничение, зарегистрируйте ключ Google API, следуя инструкциям, описанным далее в этой статье.
История изменений
- Фильтр «acf/fields/google_map/api» добавлен в версии 4.3.9 (ACF) и 5.3.10 (ACF PRO)
Скриншоты
Настройки
| Имя | Описание |
|---|---|
| Центрировать | Устанавливает начальное расположение карты с помощью lat и lng параметров. |
| Масштаб | Устанавливает начальный масштаб для карты. |
| Высота | Позволяет выбрать откуда будет доступна картинка: только в текущем посте или во всей медиабиблиотеке. |
API Google карт
Скорее всего, потребуется зарегистрировать ключ Google API, чтобы карты корректно работали. Перейдите по этой ссылке, чтобы [urlspan href=»https://developers.google.com/maps/documentation/javascript/get-api-key» content=»получить ключ API Google»][/urlspan].
Чтобы зарегистрировать свой ключ Google API, используйте фильтр «acf/fields/google_map/api» в functions.php следующим образом:
function my_acf_google_map_api( $api ){
$api['key'] = 'xxx'; // Ваш ключ Google API
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');Если вы используете ACF PRO, то проще обновить настройку «google_api_key» в functions.php.
function my_acf_init() {
acf_update_setting('google_api_key', 'xxx'); // Ваш ключ Google API
}
add_action('acf/init', 'my_acf_init');Использование в шаблоне
В следующих примерах кода показано, как отображать сохраненные значения на карте.
Обратите внимание, что нужно подключить ваш ключ Google API через JS, как в примере ниже. API Google карт — отличная библиотека для рендеринга карты, однако это не единственный доступный API. В документации Google вы можете найти множество других API и учебных материалов.
Хелперы
Примеры ниже требуют обязательного подключения следующих CSS и JS файлов в шаблоны страниц. Обратите внимание, что как CSS, так и JS файлы могут быть изменены по вашему вкусу. Однако, на их примере будет понятно, как данные PHP могут быть интегрированы через HTML в JS API Google карт.
<style type="text/css">
.acf-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}
/* фиксим возможный конфликт css */
.acf-map img {
max-width: inherit !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> // Ваш ключ Google API
<script type="text/javascript">
(function($) {
/*
* new_map
*
* Эта функция рендерит Google карту внутри выбранного jQuery элемента
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $el (jQuery элемент)
* @return n/a
*/
function new_map( $el ) {
// Переменные
var $markers = $el.find('.marker');
// Переменные
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Создаем карту
var map = new google.maps.Map( $el[0], args);
// Создаем заготовку массива маркеров
map.markers = [];
// Добавляем маркеры
$markers.each(function(){
add_marker( $(this), map );
});
// Центрируем карту
center_map( map );
// Возвращаем данные
return map;
}
/*
* add_marker
*
* Эта функция добавляет маркер на Google карту
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param $marker (jQuery элемент)
* @param map (Google Map object)
* @return n/a
*/
function add_marker( $marker, map ) {
// Переменные
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// Создаем маркер
var marker = new google.maps.Marker({
position : latlng,
map : map
});
// Добавляем маркер в массив
map.markers.push( marker );
// Если маркер содержит HTML, добавим его в infoWindow
if( $marker.html() )
{
// оздаем info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// Показываем info window при нажатии на маркер
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
/*
* center_map
*
* Эта функция центрирует карту и показывает все маркеры, прикрепленные к карте
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param map (Google Map object)
* @return n/a
*/
function center_map( map ) {
// Переменные
var bounds = new google.maps.LatLngBounds();
// Перебираем все маркеры и создаем bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// Только 1 маркер?
if( map.markers.length == 1 )
{
// Центрируем карту
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}
}
/*
* document ready
*
* Эта функция рендерит каждую карту когда страница загружена
*
* @type function
* @date 8/11/2013
* @since 5.0.0
*
* @param n/a
* @return n/a
*/
// global var
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
// Создаем карту
map = new_map( $(this) );
});
});
})(jQuery);
</script>Рендеринг одного маркера на карте
В этом примере показано, как использовать одну Google карту для отображения карты и маркера на странице. Каждый маркер не содержит внутреннего HTML, поэтому infoWindow не будет создано (используется приведенный выше JS).
<?php
$location = get_field('location');
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>Рендеринг нескольких маркеров на карте
В этом примере показано поле повторителя (с именем «locations») с 3 вложенными полями (sub fields): title (текст), description (текстовое поле) и location (Google карта).
Каждый маркер содержит внутри HTML-код, поэтому будет создан infoWindow (используется приведенный выше JS).
<?php if( have_rows('locations') ): ?>
<div class="acf-map">
<?php while ( have_rows('locations') ) : the_row();
$location = get_sub_field('location');
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><?php the_sub_field('title'); ?></h4>
<p class="address"><?php echo $location['address']; ?></p>
<p><?php the_sub_field('description'); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>Решение проблем с невидимыми картами
API Google карт не будет работать, если инициализируется в невидимом элементе. Когда элемент станет видимым, карта не будет отображаться. К примеру, при использовании всплывающего модального окна.
Чтобы решить эту проблему, просто вызовите событие «resize» (изменение размера) для карты после того, как элемент карты будет виден.
google.maps.event.trigger(map, 'resize');Похожие
Фильтры: acf/fields/google_map/api