Форма поиска на карте через Google Maps API v2
Часто случается, что встраивая карту Google на свой сайт — встает необходимость поиска по ней без перезагрузки страницы. В Google Maps API v2 нет возможности добавить поиск, как обычный элемент управления, поэтому придется немного изменить свой скрипт.
Приступим.
- Для работы нам потребуется API поиска Google AJAX.
- Предполагается, что карта уже добавлена на страницу, все нужно подключено. После строки инициализации библиотеки google api в разделе <head> вашей странички:1<script src="http://maps.google.com/maps?file=api&v=2&key=api_key" type="text/javascript"></script>
Вписываем следующий код, тем самым подключая скрипты и стили для осуществления поиска:1<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
Стили можно не загружать, если планируете сами делать дизайн поисковой строки. - Находим скрипт инициализации вашей карты. Выглядит он примерно так:1234567891011function gmap() {if (GBrowserIsCompatible()) {//инициализируем саму карту в блоке с id="mymap"var map = new GMap2(document.getElementById("mymap"));//указываем координаты центрирования карты//и уровень увеличенияmap.setCenter(new GLatLng(59.946758,30.349731), 9);//добавляем элементы управления картойmap.addControl(new GSmallMapControl ());}}
Добавляем во внутрь следующий код:1map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,30)));
Данный скрипт отвечает за добавление поиска. Вторым параметром мы указываем расположение строки поиска и положение по x,y относительно указанной стороны. Описание и возможные варианты расположения блоков можно посмотреть в официальной документации. - Теперь мы должны инициализировать поиск, добавив следующую строку после функции gmap():1GSearch.setOnLoadCallback(gmap);
- В итоге мы получаем вот такую картину:
И сморим пример по ссылке, для понимания, как должен выглядеть весь код.