В предыдущей заметке «Реализация поиска на картах с использованием API Google Maps» я рассмотрел, как можно осуществить поиск по картам Google.
Сейчас мы рассмотрим реализацию поиска по данным пользователя с использованием PHP и MySQL.
Прежде нам нужно создать таблицу markers в базе данных, по которой мы будем осуществлять поиск.
Это можно сделать, используя утилиту PhpMyAdmin выполнив следующий SQL-код:
CREATE TABLE `markers` ( `id` int(11) NOT NULL auto_increment, `name` varchar(120) NOT NULL, `adres` varchar(160) NOT NULL, `lat` float(10,6) NOT NULL, `lng` float(10,6) NOT NULL, PRIMARY KEY (`id`), FULLTEXT KEY `name` (`name`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; |
Здесь, id – уникальный идентификатор записи, name – служит для хранения названия метки, address – адрес метки, поля lat и lng – служат для хранения значений широты и долготы.
Для заполнения таблицы используем файл markers.sql – загрузить
В примере у нас используются три файла: index.html – содержит html и Java script код вывода карты и результатов поиска
Файл phpsqlinfo_dbinfo.php – служит для соединения с базой данных
И файл phpsqlsearch_genxml.php – в нем осуществляется поисковый запрос к таблице в базе данных и формируется XML-код с результатами поиска.
Как и в прошлой заметке за основу я возьму пример для отображения карты с элементами управления.
С начала мы исправим код в разделе BODY, разместив там форму для ввода строки для поиска и кнопки найти, еще область sidebar – для вывода результатов поиска.
Привожу код данной части:
<p> Поиск: <input type="text" id="addressInput"/> <input type="button" onclick="searchLocations()" value="Найти"/> </p> <div id="mymap_div" style="width:800px;"> <div id="sidebar" style="float:left; width: 200px; height: 500px; overflow: auto;"></div> <div id="map" style="margin-left: 200px; width: 600px; height:500px;"></div> </div> |
Далее в раздел HEAD добавляем функцию searchLocations, в ней производится асинхронный вызов php-скрипта phpsqlsearch_genxml.php и в него методом GET передается параметр name – искомая строка.
После этого, обрабатывается ответ, переданный в формате xml и результаты поиска отображаются в области slidebar и на карте.
Код данной функции:
function searchLocations() {
var name = document.getElementById('addressInput').value;
var searchUrl = 'phpsqlsearch_genxml.php?name=' + name;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(56.317213,43.993976), 12);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute('name');
var address = markers[i].getAttribute('address');
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng')));
var marker = createMarker(point, name, address);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
} |
Рассмотрим, что выполняется в файле phpsqlsearch_genxml.php
<?php
header("Content-type: text/xml");
require("phpsqlinfo_dbinfo.php");
// Get parameters from URL
$name = rawurldecode($_GET["name"]);
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
$result = mysql_query("SELECT * FROM markers WHERE MATCH ( name ) AGAINST('".$name."' IN BOOLEAN MODE)");
if (!$result) {
die("Invalid query: " . mysql_error());
}
while ($row = @mysql_fetch_assoc($result))
{
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['adres']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
}
echo $dom->saveXML();
?> |
Здесь принимается преданный параметр name и производиться декодирование URL с помощью команды rawurlencode.
После этого осуществляется запрос к таблице markers в базе данных (файл phpsqlinfo_dbinfo.php содержит команды для соединения с базой данных).
После этого из ответа, используя модель DOM PHP5 формируется xml-файл с данными.
Добавляем после функции searchLocations еще одну createMarker.
В ней к маркеру добавляется обработчик события click, открывается балун с информацией и производится центрирование метки.
Код функции:
function createMarker(point, name, address) {
var marker = new GMarker(point);
var html = '<b>' + name + '</b><br/><br/>' + address;
GEvent.addListener(marker, 'click', function() {
map.setCenter(point);
marker.openInfoWindowHtml(html);
});
return marker;
} |
И последняя функция createSidebarEntry.
Ее код:
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = '<b>' + name + '</b>';
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
} |
Здесь создается элемент div с названием найденного объекта, добавляется слушатель события перемещения мыши (меняется цвет фона надписи), а обработчик событие щелчка мыши вызывает открытие балуна с информацией
Полный код можно посмотреть здесьusersearch_gmap.htmll, phpsqlsearch_genxml.php, phpsqlinfo_dbinfo.php.
Давайте проверим наш созданный поиск в работе.
Переходим по ссылке на страницу с картой
В форме поиска набираем — кафе.

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

Щелкнув по одному из названий в панели с боку, например Безухов, арт-кафе ЗАО "Кофебук" , откроется окно с информацией о кафе и произойдет центрирование карты.

Спасибо за публикацию!
Для начинающих очень полезный пример.
Да, вот только в IE8 не работает данный пример.
Запрос не выполняет.
В чём «загвоздка»?
В Firefox и Chrome всё ок!
В IE8, если на латинице к примеру, «Las Vegas» — видит запрос!
Немного позже посмотрю в чем причина, вероятно что-то с кодировками
скажите а есть пример, где вместе реализировано добавление меток, вывод меток и поиск по данным пользователя?
Скажите, а где размещать файлики: phpsqlsearch_genxml.php, phpsqlinfo_dbinfo.php.
Все время пишет : No results found.
Они должны быть в одном катологе. А пишет No results found когда не может ничего найти. Нужно обратить внимание на кодировку данных и файлов скриптов
Увы, не работает пример, если вводить слово «кафе» на кириллице под IE7 — пишет No Result… А под Chrom Google, FF — всё нормально работает!!!
В IE действительно не работает…Кроме того, попытался объединить поиск по данным пользователя с добавлением пользователями данных…Не работает поиск по данным пользователя и вот почему. Записи, добавленные пользователям представлены в такой кодировке: Тес….Записи из базы, которую предлагается импортировать (с данными о кафе) представлены в нормальной кириллице. Поиск по импортированным данным работает (но не в IE), а по данным, введенным пользователем — неработает. ВАЖНО. Вывод данных пользователя из базы работает в обеих вариантах…то есть выводятся маркеры введенные пользователями и импортированные маркеры Кафе…Поэтому к сообществу такой вопрос. Что нужно исправить, чтобы введенные пользователями в балун записи в базу заносились в кириллице как при импорте…
З.Ы. Загрузку изображений сделал…правда пришлось изворачиватся…Использовал библиотеку uploadify, рядом с картой пометил сайдбар с диалогом для загрузки…Картинка загружается через сайдбар, а, непосредственно в балуне пишется название картинки. Пока так, потому-что не нашел как прикрутить диалог загрузки файла к балуну…
Это все ворочу пока на Денвере, так, что,думаю, будут еще грабли при переезде этого хозяйства на хостинг…