Реализация поиска по данным пользователя с использованием API Google Maps

В предыдущей заметке «Реализация поиска на картах с использованием 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.

Давайте проверим наш созданный поиск в работе.

Переходим по ссылке на страницу с картой

В форме поиска набираем  — кафе.

Пример API Google Maps поиск по данным пользователя- поиск кафе

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

Пример API Google Maps поиск по данным пользователя- Результаты поиска кафе

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

Пример API Google Maps поиск по данным пользователя- Выбор результата поиска

  • Гость: Спасибо за публикацию! Для начинающих очень полезный пример.
  • Гость: Да, вот только в 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 действительно не работает...Кроме того, попытался объединить поиск по данным пользователя с добавлением пользователями данных...Не работает поиск по данным пользователя и вот почему. Записи, добавленные пользователям представлены в такой кодировке: &#x422;&#x435;&amp;#x0441....Записи из базы, которую предлагается импортировать (с данными о кафе) представлены в нормальной кириллице. Поиск по импортированным данным работает (но не в IE), а по данным, введенным пользователем - неработает. ВАЖНО. Вывод данных пользователя из базы работает в обеих вариантах...то есть выводятся маркеры введенные пользователями и импортированные маркеры Кафе...Поэтому к сообществу такой вопрос. Что нужно исправить, чтобы введенные пользователями в балун записи в базу заносились в кириллице как при импорте... З.Ы. Загрузку изображений сделал...правда пришлось изворачиватся...Использовал библиотеку uploadify, рядом с картой пометил сайдбар с диалогом для загрузки...Картинка загружается через сайдбар, а, непосредственно в балуне пишется название картинки. Пока так, потому-что не нашел как прикрутить диалог загрузки файла к балуну... Это все ворочу пока на Денвере, так, что,думаю, будут еще грабли при переезде этого хозяйства на хостинг...