Google maps в Wordpress | DAndreev.com

Google maps в WordPress

thumbnail

Часто бывает необходимость в статье указать какие-либо места или объекты на карте. У меня такая необходимость возникла при работе над сайтом Novrealty. Здесь я расскажу как использовать Google Maps в блоге на WordPress.

У меня такая необходимость возникла при работе над сайтом Novrealty. Потому пришлось разобраться со всем доступным Google Maps API

Создание карты делится на два этапа:

  1. Вывод информации о карте в виде html кода (включая информацию о маркерах) из WordPress.
  2. Посредством jQuery находим код, предназначенный для карты и создаем карту используя Google Maps API.

1. Вывод html кода для карты

Я сначала долго думал, как вывести всю информацию для создания карты и нанесения маркеров на неё так, чтобы их количество было не ограничено. Решение оказалось очень простым. Создать HTML структуру из блока, где будет выводиться сама карта или сообщение о невозможности создать карту и скрытый блок, где будут параметры для карты. А после просто посредством jQuery получить значения из скрытого блока и передать их в функцию, которая создает карту и которая добавляет маркеры на JavaScript.

Для обозначения параметров я использовал списки. Один для параметров самой карты (“viewport“), каждый элемент которого являлся параметром и для маркеров (“markers“), каждый элемент которого являлся маркером, и в нем несколько элементов “span” для обозначения каждого параметра маркера.

У каждого списка стиль: display:none. Чтобы исключить их появление на странице.

Для создания такой структуры я создал функцию в файле темы functions.php

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

Ниже представлен код, который разбирает массив маркеров, каждый из себя представляет вложенный ассоциативный массив, в котором хранятся данные маркера (координаты,  заголовок, описание).

Данные о каждом маркере добавляются в переменную вывода уже оформленными в виде html.

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

Функция готова. Теперь при ее вызове будет создана нужная мне структура из которой уже можно создать карту и нанести на нее маркеры.

2. Хранение маркеров в meta-полях поста в WordPress

Для вывода карты я предлагаю сейчас воспользоваться meta-полями в WordPress. А в следующей статье я опишу как это лучше сделать с помощью шорткодов.

И так при написании статьи, где нужна карта, добавляем Custom field с названием marker. В значении этого поля нужно записать через точку с запятой координаты, разделенные запятой, заголовок, и описание маркера как показано ниже.

Я добавил в страницу шаблона, которая выводит посты (скорее всего index, single или же какие-то более специфичные, но это уже за рамками этой статьи)  в цикл вывода статей код, который будет получать значения custom-fileds и, в случае наличия поля с названием marker выводить карту и наносить на нее все маркеры.

На этом этап работы с WordPress и php закончен,  теперь пришла переходить к JavaScript и собственно Google Maps API.

3. Инициализация карты c помощью Google Maps API

Итак для всей работы я создал три функции на JavaScript.

Первая создает карту по заданным параметрам, вторая – добавляет маркер с заданными параметрами, а третья – собирает все вместе (по html коду создает карту, и добавляет на нее все маркеры).

И так сначала приведу код функции, которая инициализирует google карту и сохраняет ее в глобальной переменной map.

Следующей я создал функцию для создания маркера на карте. В качестве параметров ей передаются объект карты и массив параметров (координаты, заголовок и описание). Ниже представлен ее код.

А теперь я объединил все созданные функции в одной главной, которая на основе html кода, созданного в первом разделе инициализировать карту и добавлять на нее все маркеры. В качестве параметров ей передается объект DOM, который содержит в себе всю информацию о карте и маркерах.

В начале я из html кода получил параметры карты, и инициализировал карту с помощью функции daInitGMap.

После создания карты, я на основе html кода добавил на карту маркеры, используя функцию daSetMarker следующим кодом

И в самом конце я сделал центрирование и масштабирование карты так, чтобы все добавленные маркеры были видны. Именно для этого в предыдущем фрагменте кода я координаты каждого маркера добавлял в объект view.

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

Заключение

Собственно все готово для того чтобы использовать в блоге Google Maps. Теперь надо только подключить JavaScript c кодом для создания карты. Я его сохранил в папке “js”, где находится моя тема блога. А для подключения скрипта я добавил следующий код в файл темы functions.php

Здесь DA_GMAP_KEY – константа, в которой сохранен ключ для Google Maps. Вам будет необходимо получить его для своего сайта. Это можно сделать здесь.

B конце вы должны получить результат, как внизу этой страницы.

Исходный код всех функций можно скачать здесь (он уже доработан в следующей статье
Google maps. Шорткоды в WordPress
).


Retweet

Похожие статьи

Комментарии

Griedy
31 Oct, 2010в18:24

Просматриваю сообщения у вас уже небольшое время. И говорю сразу что буду продолжать это делать :P

Дмитрий Андреев
13 Nov, 2010в00:10

Спасибо, очень приятно, постараюсь почаще писать.

Юрий
09 May, 2011в13:44

Скажите пожалуйста, а как можно сделать, чтобы карту выводить на странице архива категории, где бы ставились метки со всех постов с произвольным полем market. Тоесть, выводится карта с метками из записей этой категории и под ней, список постов этой категории.
Это один вопрос.
И второй. Можно ли реализовать вывод меток без указания координат, а только адрес.

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

Спасибо большое.

Дмитрий Андреев
10 May, 2011в06:20

Юрий, добрый день.
Ну на первый вопрос ответ очень простой, сначала вы выводите все посты в цикле и во время вывода просто получаете данные о маркерах поста с помощью функции $meta = get_post_custom($post_id);
и из соответствующих полей для каждого поста данные маркеров заносить в глобальный массив.
А затем просто вывести карту как уже описано в посте. Единственное, для того, чтобы вывести карту в шаблоне архива при помощи шорткодов, необходимо использовать функцию:
echo do_shortcode('[googlemap width=600 height=200 zoom=6]')

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

ob_start();
...
Здесь цикл вывода постов
...
$posts = ob_get_contents();
ob_end_clean();

echo do_shortcode('[googlemap width=600 height=200 zoom=6]');

echo $posts;

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

Еще замечание, вывод маркеров необходимо убрать из этой функции вывода карты и вставить его отдельно, перед выводом карты, из глобального массива данных маркеров, который вы насобирали.

А по поводу полечения данных маркера, в API Google карт есть такой класс, как GClientGeocoder, он как раз и преобразует адрес в координаты маркера, о нем можете почитать вот сдесь.

Юрий
10 May, 2011в07:12

Спасибо большое за ответ. Попробую разобраться

stal
30 Sep, 2011в13:58

Добрый день,
а есть ли готовое решение, чтобы информация о маркерах бралась c базы даных?
например mysql?

спасибо.

stal
03 Oct, 2011в09:02

Может кто-нибудь подскажет, как выводить информацию в маркерах из БД MySQL?
так же хочу сохранять координати маркеров в той же базе
спасибо.

Сергей
26 Mar, 2012в18:40

Здрасте Дима.
У меня есть тема недвижимости, при подаче обьявления пользователь может указать на карте гуугл местоположение обьекта и эти координаты потом записываютса в произвольные поля ( ключ geo_latitude – значение 48.92457888074512, geo_longitude – 24.70771551132202 ), также каждому обьекту присваиваетса еще несколько ключей и значений (Город, тип недвижимости…). Вопрос как вывести на одной карте несколько маркеров (Например с ключом add_location – значение odessa )если ключи geo_latitude и geo_longitude заполнены.
За ранее благодарю.

Дмитрий Андреев
12 Apr, 2012в09:16

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

Оставить комментарий