Создаем картографический сервис, с использованием API Яндекс.Карт и WordPress

Автор: | 27.10.2013

CMS WordPress активно используется для создания не только блогов, но также для различных типов сайтов, начиная от простых сайтов-визиток до интернет-магазинов.

В нескольких заметках на своем блоге я расскажу, как можно использовать совместно API Яндекс.Карт и WordPress для создания картографического сервиса.

И начнем мы с установки WordPress на локальный компьютер.

Заходим на сайт по адресу http://ru.wordpress.org/ и скачиваем последнюю версию CMS Worpress.

В качестве локального сервера я использую Open Server — это портативная программная платформа, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий.

Сайт программы — http://open-server.ru/

Я предлагаю загрузить версию Open Server Mini — урезанная версия Open Server.

Содержит в себе только серверную часть платформы без пакета дополнительных программ и документации по модулям.

Загружаем отсюда или отсюда.

Устанавливаем и запускаем программу, смотрите подробнее в этом видео

Устанавливаем WordPress и заходим в его админку.

Заметки на блоге будут представлять из себя метки на карте, а статьи дополнительные страницы.

Чтобы в месте с заметкой хранились значения координат установим дополнительный плагин, который я разработал по аналогичному для Google Maps.

Загрузить его можно здесь.

Устанавливаем и активируем плагин.

Создаем новую заметку и видим новые поля

Wordpress - новые поля ввода

В поле «Адрес» мы вводим адрес для нашей метки, например Нижний Новгород, ул. Белинского, 59.

Затем нажимаем кнопку «Определить координаты».

Wordpress - новые поля с Яндекс.Картой и координатами

С лева от полей ввода появляется карта с меткой, а вполе «Координаты Lat/Lng » значения координат.

Мы можем подвинуть метку мышкой, если адрес определен не правильно.

Далее остальные поля заполняем как обычно.

Название заметки — это название метки, текст замеки будет отображаться в балуне, раздел — это категория метки.

Значок метки мы можем указать в свойстве «Миниатюра записи».

Как видите пока все просто.

Давайте выберем в качестве текущей темы Twenty Twelve, эта тема идет в составе дистрибутива WordPress.

И посмотрим на главную страницу.

Wordpress - главная страница

Мы видим обычные записи.

Чтобы они выводились в виде меток на карте необходимо создать собственный шаблон.

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

Вы можете взять любой шаблон, какой Вам нравиться и отредактировать его.

Я за основу шаблона взял Twenty Twelve.

В начале мы скопируем папку twentytwelve с файлами из каталога /wp-content/themes/ куда-нибудь в другое место на Вашем компьютере.

Переименуем саму папку и отредактируем несколько файлов.

Я переименовал ее в twentytwelveymaps.

Теперь заходим в неё.

С начала нам понадобится создать файл выводящий саму Яндекс.Карту.

Это будет файл map.js и создадим мы его в уже имеющейся папке js.

Вот его код:

ymaps.ready(init);
 
function init () {
    var myMap = new ymaps.Map("map", {
            center: [56.326944,44.0075],
            zoom: 12
        });
 
		myMap.controls.add("zoomControl").add("typeSelector").add("mapTools");
 
        for (var i = 0;i < locations.length;i++) { 
 
       myPlacemark = new ymaps.Placemark(locations[i].latlng, {            
            balloonContent: locations[i].info            
        }, {   
 
			iconImageHref: locations[i].marker			
        });
 
    myMap.geoObjects.add(myPlacemark);
 
	}	
 
}

В этом примере координаты центра карты для Нижнего Новгорода, координаты для своего города Вы сможете определить здесь ()

Далее нам необходимо подключить API Яндекс.Карт и наш новый файл map.js в разделе head шаблона.

Для этого мы открываем файл header.php и сразу после строки

<title><?php wp_title( '|', true, 'right' ); ?></title>

Добавляем две строчки кода:

<script src="http://api-maps.yandex.ru/2.0/?lang=ru-RU&load=package.full" type="text/javascript"></script>	
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ?>/js/map.js"></script>

Сохраняем файл.

Теперь открываем файл functions.php и добавляем в него новую функцию

function get_thumbnail_path($post_ID) {
	$post_image_id = get_post_thumbnail_id($post_ID->ID);
	if ($post_image_id) {
		$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
		if ($thumbnail) (string)$thumbnail = $thumbnail[0];
		return $thumbnail;
	}	
}

Перед последней функцией twentytwelve_customize_preview_js

Сохраняем файл.

Открываем файл index.php

В нем удаляем весь код начиная от строки

<div id="content" role="main">

до строки

</div><!-- #content →

И вставляем вот этот:

 <?php if ( have_posts() ) : ?>
			<!-- WordPress has found matching posts -->
			<div style="display: none;">
				<?php $i = 1; ?>
				<?php while ( have_posts() ) : the_post(); ?>
					<?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
						<div id="item<?php echo $i; ?>">
							<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
							<?php the_content(); ?>
						</div>
					<?php endif; ?>
					<?php $i++;	?>
				<?php endwhile; ?>
			</div>
			<script type="text/javascript">
				var locations = [
					<?php  $i = 1; while ( have_posts() ) : the_post(); ?>
						<?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
							{
								latlng : <?php echo '[', get_geocode_latlng($post->ID), ']'; ?>,
								info : document.getElementById('item<?php echo $i; ?>'),
								<?php if ( has_post_thumbnail() ) { ?>
								// There is a Featured Image
								marker : '<?php echo get_thumbnail_path($post->ID); ?>'
								//marker : new google.maps.MarkerImage('<?php echo get_thumbnail_path($post->ID); ?>', new google.maps.Size(20, 34) )
								<?php } else { ?>
								// No Featured Image, use fallback
								//marker : new google.maps.MarkerImage('<?php echo get_stylesheet_directory_uri() ?>/pink_Marker.png', new google.maps.Size(20, 34) )
								marker : 'http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/cinema.png'
								<?php } ?>
						},
						<?php endif; ?>
					<?php $i++; endwhile; ?>
				];
			</script>
			<div id="map" style="width: 100%; height: 500px;"></div>
 
		<?php else : ?>
			<!-- No matching posts, show an error -->
			<h1>Error 404 &mdash; Page not found.</h1>
		<?php endif; ?>

Сохраняем файл.

Теперь копируем всю папку twentytwelveymaps в каталог шаблонов WordPress /wp-content/themes/.

Заходим в админку, Внешний вид → Темы и активируем новую тему Twenty Twelve/twentytwelveymaps.

Переходим на главную страницу сайта и видим

Worpress - главная страница с Яндекс.Картой

Нам нужно ещё настроить виджеты, чтобы с правой стороны отображались рубрики.

Мы получим следующее

Worpress - главная страница с Яндекс.Картой и с категориями с права

Кликаем по метке, открывается балун с информацией

Worpress - главная страница с Яндекс.Картой и балуном

Если кликнуть по названию, то открывается заметка.

Можно оставить и так, а можно сделать чтобы при клике по категориям с права на карте выводились метки только данной категории.

Для этого из папки шаблона необходимо удалить файлы category.php и archive.php

А чтобы не выводилась заметка файл single.php.

Уже что-то получается.

Теперь можно сделать отдельные страницы для каждой метки с подробным описанием.

Займемся этим в следующей заметке.

Загрузить тему Twenty Twelve с Яндекс.Картой.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *