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

Автор: | 28.10.2009

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

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

  1. Григорий

    Да, вот только в IE8 не работает данный пример.
    Запрос не выполняет.
    В чём «загвоздка»?
    В Firefox и Chrome всё ок!

    1. admin Автор записи

      Немного позже посмотрю в чем причина, вероятно что-то с кодировками

  2. vovik

    скажите а есть пример, где вместе реализировано добавление меток, вывод меток и поиск по данным пользователя?

  3. Екатерина

    Скажите, а где размещать файлики: phpsqlsearch_genxml.php, phpsqlinfo_dbinfo.php.
    Все время пишет : No results found.

    1. admin Автор записи

      Они должны быть в одном катологе. А пишет No results found когда не может ничего найти. Нужно обратить внимание на кодировку данных и файлов скриптов

  4. Евгений

    Увы, не работает пример, если вводить слово «кафе» на кириллице под IE7 — пишет No Result… А под Chrom Google, FF — всё нормально работает!!!

  5. Артем

    В IE действительно не работает…Кроме того, попытался объединить поиск по данным пользователя с добавлением пользователями данных…Не работает поиск по данным пользователя и вот почему. Записи, добавленные пользователям представлены в такой кодировке: Те&#x0441….Записи из базы, которую предлагается импортировать (с данными о кафе) представлены в нормальной кириллице. Поиск по импортированным данным работает (но не в IE), а по данным, введенным пользователем — неработает. ВАЖНО. Вывод данных пользователя из базы работает в обеих вариантах…то есть выводятся маркеры введенные пользователями и импортированные маркеры Кафе…Поэтому к сообществу такой вопрос. Что нужно исправить, чтобы введенные пользователями в балун записи в базу заносились в кириллице как при импорте…
    З.Ы. Загрузку изображений сделал…правда пришлось изворачиватся…Использовал библиотеку uploadify, рядом с картой пометил сайдбар с диалогом для загрузки…Картинка загружается через сайдбар, а, непосредственно в балуне пишется название картинки. Пока так, потому-что не нашел как прикрутить диалог загрузки файла к балуну…
    Это все ворочу пока на Денвере, так, что,думаю, будут еще грабли при переезде этого хозяйства на хостинг…

Добавить комментарий для Артем Отменить ответ

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