Добавляем форму поиска на карту 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);

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