Добавляем форму поиска на карту Google

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

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

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

1. Для осуществления поиска существует специальная служба  API поиска Google AJAX.


2. Мы возьмем уже готовый пример использования карт Google из заметки «Добавляем элементы управления на карту Google Maps» и изменим его.


3. В раздел HEAD после строки вызова  URL-адреса расположения  файла JavaScript, содержащего все символы и определения, необходимые для работы с API Карт Google с ключом

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g"    type="text/javascript"></script>

Добовляем код

<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>

<style type="text/css">

@import url("http://www.google.com/uds/css/gsearch.css");

@import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");

</style>

В нем мы указываем URL-адрес API поиска Google AJAX.

Далее мы  загружаем таблицы стилей для данного элемента управления.

4. После строки кода map.addControl(new GMapTypeControl()); мы добавляем следующее

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

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

И после закрывающейся скобки функции initialize() строку

GSearch.setOnLoadCallback(initialize);

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

5. После этого загружаем страницу с примером в браузере и наблюдаем следующее



Проверим работу.

Наберем в строке поиска Москва, ул. Волхонка, 15 (это адрес Храма Христа Спасителя)

Мы увидим результат поиска



Можно изменить размер карты, чтобы лучше видеть результаты поиска.

В строке <div id="map_canvas" style="width: 500px; height: 300px"></div> заменяем значения width на 800px и height на 600px.

Посмотреть пример в действии и полный код можно здесь.

Давайте изменим положения элементов управления для  карты на свои.

Метод addControl() принимает необязательный второй параметр GControlPosition, который позволяет указать позицию элемента управления на карте.

Углы карты указываются с помощью специальных значений:

G_ANCHOR_TOP_RIGHT – правый верхний угол,

G_ANCHOR_TOP_LEFT – левый верхний угол,

G_ANCHOR_BOTTOM_RIGHT – правый нижний угол,

G_ANCHOR_BOTTOM_LEFT – левый нижний угол.

С помощью параметра GControlPosition можно при желании указать смещение элемента управления относительно края карты (в пикселах).

мещение задается при помощи объекта GSize.

В нашем случае, мы задавали расположения элемента поиска в правом нижнем углу со смещением 10 пикселей в лево и 20 в верх.

Давайте поменяем местами элементы управления для поиска и типа карты.

В строку map.addControl(new GMapTypeControl()); перед закрывающейся скобкой с точкой запятой  нужно добавить следующий код:

, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))

Мы задаем смещение для элемента управления типом карты от правого нижнего угла 10 пикселей в лево и 20 в верх.

А для формы поиска изменить значения G_ANCHOR_BOTTOM_RIGHT на G_ANCHOR_TOP_RIGHT, а также величину смещения new GSize(10,20) на new GSize(10,10).

Загружаем страницу в браузере и наблюдаем



Посмотреть пример в действии и полный код можно здесь.