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

Автор: | 25.10.2009
1 комментарий

Осуществить поиск по карте, созданной с использованием   API Google Maps, можно четырьмя различными способами

  1. С помощью формы локального поиска, которую мы размещаем на самой карте
  2. Используя форму поиска, размещенную вне окна карты
  3. Используя геокадирование
  4. Реализация процедуры поиска по пользовательским данным.

В этой заметке я подробно рассмотрю первые три способа.

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

И так с начала мы возьмем пример кода для создания карты с элементами управления.

Полный  код примера:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8?"/>
<title>Пример API Карт Google на языке JavaScript</title>
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
type="text/javascript"></script>
 
<script type="text/javascript">
 
function initialize() {if (GBrowserIsCompatible()) {
 
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(56.32811,44.0), 13);
 
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
}
 
</script>
 
</head>
 
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>

Рассмотрим, как добавить форму поиска на карту

Для этого нам необходимо ввести в наш код примера несколько строк.

В раздел HEAD после ввода ключа к API включаем следующие строки:

<!--
      @import url("http://www.google.com/uds/css/gsearch.css");
      @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
      }
-->
 
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"><!--mce:2--></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"><!--mce:3--></script>

Здесь мы добавляем стили для отображения формы поиска и адрес скрипта производящего поиск.

И после строки map.addControl(new GMapTypeControl()); добавляем код:

map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));

Здесь мы добавляем форму поиска на карту, задаем позицию расположения – в правом нижнем углу и определяем отступы в лево 10 пикселей и снизу 20 пикселей.

А затем еще одну строку кода

GSearch.setOnLoadCallback(LoadMapSearch);

Перед закрывающимся тегом </script>

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

Загрузив пример в браузере мы увидим следующее

API Google Maps - форма поиска на карте

Посмотреть пример в действии

Рассмотрим следующий вариант реализации поиска – используем форму поиска, размещенную вне окна карты.

В этом варианте для реализации применяется AJAX API поиска Google – это библиотека JavaScript, позволяющая встраивать поиск Google на веб-страницы и в другие веб-приложения.

Описание данyого API располагается по адресу: http://code.google.com/intl/ru-RU/apis/ajaxsearch/

Для использования AJAX API поиска Google необходимо получить специальный ключ для Вашего сайта на странице по адресу http://code.google.com/intl/ru/apis/ajaxsearch/signup.html

Приведу код примера:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8?"/>
<title>Пример API Карт Google на языке JavaScript </title>
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
type="text/javascript"></script>
 
 <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
    type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js"
    type="text/javascript"></script>
 
  <link rel="nofollow" href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"
    type="text/css"/>
  <link rel="nofollow" href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css"
    rel="stylesheet" type="text/css"/>
 
<style type="text/css">
    body, table, p{
      background-color: white;
      font-family: Arial, sans-serif;
      font-size: 13px;
    }
 
    #mapsearch {
      width : 800px;
      height: 550px;
      margin-left: 20px;
      padding: 4px;
      border : 1px solid #f9f9f9;
    }
.gsmsc-mapDiv {
 
        height:530px;
}
.gsmsc-idleMapDiv {
	height:550px;
}
  </style>
  <script type="text/javascript">
    function LoadMapSearch() {
 
      var options = {
            title : "Нижний Новгород"            
            }
 
      new GSmapSearchControl(
            document.getElementById("mapsearch"),
            "Нижний Новгород",
            options
            );
    }
    GSearch.setOnLoadCallback(LoadMapSearch);
  </script>
</head>
<body>
  <div id="mapsearch">Загрузка...</div>
</body>
</html>

Здесь в разделе  HEAD после ввода ключа к API Google Maps добавлен следующий код:

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ"
    type="text/javascript"></script>
 <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js"
    type="text/javascript"></script>
 
  <link rel="nofollow" href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet"
    type="text/css"/>
  <link rel="nofollow" href="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css"
    rel="stylesheet" type="text/css"/>

Здесь первая строка ключ к AJAX API поиска Google, затем  подключается сам скрипт поиска и стили для него

Самое интересное заключено в функции LoadMapSearch

Переменной options мы задаем параметры для содежимого балуна метки.

А параметр GSmapSearchControl служит для задания элемента страницы для вывода результатов поиска и там же задаем первоначальное значание для поиска – Нижний Новгород.

Загрузив данный пример в браузере мы увидим следующее

Поиск с использованием AJAX API поиска Google

Посмотреть код примера в действии

И последний способ – использование геокодирования.

Геокодирование — процесс превращения строкового почтового адреса в координаты. А также, обратная операция.

Описание сервиса геокодирования расположено по адресу:  http://code.google.com/intl/ru/apis/maps/documentation/services.html

Возьмем для изменения наш первоначальный пример кода для вывода карты с элементами управления.

В функцию initialize перед строкой добавления элемента масштабирования карты допишем строку

var geocoder = new GClientGeocoder();

И еще добавим функцию обработки результатов геокодирования showAddress.

function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 17);
              var marker = new GMarker(point);
              map.addOverlay(marker);
              marker.openInfoWindowHtml(address);
            }
          }
        );
      }
    }

В раздел BODY добавляем код для ввода адреса для поиска.

После добавления код должен иметь следующий вид:

<body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="Нижний Новгород, ул. Белинского, 59" />
        <input type="submit" value="Найти" />
      </p>
      <div id="map_canvas" style="width: 800px; height: 600px"></div>
    </form>
  </body>
</html>

Загружаем код примера в браузере и наблюдаем

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

Посмотреть код примера в действии

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

Реализация поиска на картах с использованием API Google Maps: 1 комментарий

  1. Александр

    Здраствуйте, а можете подсказать, например есть страница, в одном месте я прописываю например слово Москва и у меня в iframe- загружается карта google с меткой в москве — как это можно реализовать?

    Ответить ↓

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

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