Подключение карты Google Map в WordPress

Для интеграции данной функции найдете с десяток подходящих плагинов Google Map под Wordpress. Однако сегодня хочу рассказать о другом варианте реализации задачи, можно сказать, «практически вручную». В некоторых случаях этот подход будет более подходящим. Для его внедрения нам понадобится один из плагинов произвольных полей, которые я рассматривал ранее: Advanced Custom Fields, либо Custom Field Suite. Хорошо, если один из них уже используется у вас на сайте — в таком случае никакой дополнительной функциональности для создания Google карт в вордпресс не потребуется.

Google карта и Advanced Custom Fields

Начнем с популярного модуля Advanced Custom Fields, поскольку в нем по умолчанию предусмотрен соответствующий тип произвольного поля. Детальное описание интеграции + разные вопросы по теме найдете на этой странице официального сайта. Я лишь вкратце рассмотрю этапы процесса установки и приведу работающий пример кода.

1. Итак, первым делом после активации плагина создаете новое произвольное поле, выбрав тип «Google карта». Для него нужно указать: имя поля (только латинские, т.к. используется в коде), ярлык и описание (редактору), а также определить масштаб, высоту карты и координаты по умолчанию.

2. После этого добавляете данный элемент на страницу сайта (например в «Контакты») и указываете значения координат (lat, lng).

3. Далее требуется внедрить скрипт и стили карты Google Map в WordPress шаблон (в блок HEAD). Я не буду рассказать обо всех вариантах как можно было бы это сделать и почему, а сразу приведу итоговое решение. Для него, во-первых, добавляете на хостинг файл gsite-map.js (например, в папку js) со следующим кодом:

(function($) {
 
/*
*  new_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/
 
function new_map( $el ) {
 
	// var
	var $markers = $el.find('.marker');
 
 
	// vars
	var args = {
		zoom		: 16,
		center		: new google.maps.LatLng(0, 0),
		mapTypeId	: google.maps.MapTypeId.ROADMAP
	};
 
 
	// create map	        	
	var map = new google.maps.Map( $el[0], args);
 
 
	// add a markers reference
	map.markers = [];
 
 
	// add markers
	$markers.each(function(){
 
    	add_marker( $(this), map );
 
	});
 
 
	// center map
	center_map( map );
 
 
	// return
	return map;
 
}
 
/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/
 
function add_marker( $marker, map ) {
 
	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
 
	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});
 
	// add to array
	map.markers.push( marker );
 
	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// create info window
		var infowindow = new google.maps.InfoWindow({
			content		: $marker.html()
		});
 
		// show info window when marker is clicked
		google.maps.event.addListener(marker, 'click', function() {
 
			infowindow.open( map, marker );
 
		});
	}
 
}
 
/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/
 
function center_map( map ) {
 
	// vars
	var bounds = new google.maps.LatLngBounds();
 
	// loop through all markers and create bounds
	$.each( map.markers, function( i, marker ){
 
		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
 
		bounds.extend( latlng );
 
	});
 
	// only 1 marker?
	if( map.markers.length == 1 )
	{
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}
 
}
 
/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @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(){
 
		// create map
		map = new_map( $(this) );
 
	});
 
});
 
})(jQuery);

Во-вторых, в файле header.php до закрывающегося тега </head> размещаете строки:

<?php   if (is_page('contact')) { ?>
 
<style type="text/css">
.acf-map {
	width: 100%;
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}
 
/* fixes potential theme css conflict */
.acf-map img {
   max-width: inherit !important;
}
 
</style>
<script src='https://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/gsite-map.js" type="text/javascript"></script>
 
<?php } ?>

Здесь есть несколько нюансов:

• Условный оператор с функцией is_page выводит весь код в HEAD только для страницы с адресом ссылки (slug) = contact (нужно менять на значение нужной вам страницы!). Это сделано для того чтобы лишний код не грузился в остальных разделах сайта, где карта попросту не отображается.
• Во втором вызове скрипта подключаете созданный файл с названием gsite-map.js (или другим вашим).
• Стили, определенные в самом начале, можно добавить в style.css (их не так и много).
• Для особо крупных и посещаемых сайтов, возможно, придется получить Google API ключ. Эта опция доступна по ссылке и позволяет преодолеть ограничение гугла на число загрузок карты. В таком случае вызов API скрипта заменяете на следующий, указав при этом свой YOUR_API_KEY:

<script src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false' type='text/javascript'></script>

4. Последний шаг — вставка кода вызова Google Map в вордпресс шаблоне, например, с помощью такого кода:

<?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; ?>

Здесь считываются координаты для карты Google Map, указанные пользователем в WordPress админке. Внимание! Убедитесь, что имя массива переменных (в данном примере location) совпадает с именем созданного произвольного поля на первом этапе.

Что касается стилей оформления, то проще всего, конечно, когда у вас имеется готовый макет и верстальщик грамотно вписал карту в общий дизайн сайта. В таком случае просто размещаете код вызова Google Map в нужное, заранее заготовленное, место. Иначе придется немного пошаманить с CSS. Кстати, если стоит задача добавить несколько маркетов на карту, то решение и дополнительную информацию по интеграции плагина Advanced Custom Fields найдете по этой ссылке.

Подключение Google Map через Custom Field Suite

Я разбирался с настройкой обоих модулей, но для внедрения Google карт в WordPress остановил выбор именно на Custom Field Suite. Дело в том, что в моем случае на сайте нужно было реализовать и другие произвольные поля, с которыми предыдущий плагин не справляется (а оставлять 2 модуля — избыточная функциональность).

Да, в Custom Field Suite нет специального типа поля под карты, но это не страшно, т.к. для реализации Google Map нужны всего лишь 2 значения координат по широте (lat) и долготе (lng). На самом деле процесс интеграции получился даже проще.  Если вы еще не работали с модулем советую почитать пост о произвольных полях где я детально рассмотрел использование Custom Field Suite. Алгоритм решения задачи следующий:

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

Здесь же ниже в правилах отображения создается ограничение показа полей только на нужной вам странице (например, Кконтакты). Далее заходите на нее и вводите данные для карты:

2. После этого открываете файл шаблона, где должна отображаться карта Google Map и добавляете туда код:

<div class="map">
	<div class="map-inner">
	<?php
	$lat_coord = CFS()->get( 'map_lat' );
	$lng_coord = CFS()->get( 'map_lng' );	
	if ((!empty($lat_coord)and(!empty($lng_coord)))):
	?>
	<div id="map" style="width: 100%; height: 470px;"></div>
	<script src='https://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
 
	<script type="text/javascript">
	  //<![CDATA[
		function load() {
		var lat = <?php echo $lat_coord ?>;
		var lng = <?php echo $lng_coord ?>;
	// coordinates to latLng
		var latlng = new google.maps.LatLng(lat, lng);
	// map Options
		var myOptions = {
		zoom: 17,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	   };
	//draw a map
		var map = new google.maps.Map(document.getElementById("map"), myOptions);
		var image = 'http://ВАШ_САЙТ/image/logomap.png';
		var marker = new google.maps.Marker({
		position: map.getCenter(),
		map: map,
    	icon: image
	   });
	}
	// call the function
	   load();
	//]]>
	</script>
	<?php endif; ?> 
	</div>
</div>

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

В данном коде важно чтобы названия map_lat и map_lng соответствовали именам произвольных полей, создаваемых в админке через плагин Custom Field Suite. Второй момент — использование переменной image, позволяющей добавить логотип компании. Не забудьте поменять адрес к изображению http://ваш_сайт/image/logomap.png.

Основные размеры карты задаются также в коде (width: 100%; height: 470px;) хотя можно вынести их в style.css. Внешние классы «map» и «map-inner» достались мне из базовой верстки, поэтому тут все зависит от вашего шаблона — возможно, будут какие-то другие внешние контейнеры. При хорошо посещаемом сайте также понадобиться регистрировать Google API ключ и добавлять соответствующий параметр в строку вызова скрипта.

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 3, средний балл: 5,00 из 7)

Загрузка...

Категории: Возможности;
Теги: google сервисы, вордпресс веб-разработка, карты, решение задач wordpress, сниппеты.