Собственный сервис поиска с помощью Google Maps

16 ноября, 2008
google maps screenshot

Современные web сервисы позволяют с минимальными усилиями существенно расширить функциональность сайта.

Сегодня речь пойдет об использовании карт от Google на собственном сайте.

Для начала определимся с задачей.

Допустим, нам нужно сделать поиск по картам. Т.е. посетитель вводит название города в поле формы, нажимает кнопку «Найти».

После этого наше приложение показывает соответствующую карту.

В общем, должно получиться что-то похожее на эту страницу.

Переходим к реализации.

Для использования карт Google на собственном сайте нужно получить специальный ключ (AJAX Search API Key).

Процедура предельно простая. Заходим на страницу регистрации, соглашаемся с лицензией, вводим адрес сайта в форму и жмем кнопку «Generate API Key».

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

Размещаем карту на странице.

Эта операция выполняется в два шага.

1) Подготавливаем на странице блок для карты

  1. <div id="map_canvas" style="width: 600px; height: 400px"></div>

Здесь нужно только задать его размеры (в данном случае – 600х400 px).

2) В заголовке страницы подключаем Google API и небольшой скрипт, который и создает карту

  1. <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ваш_ключ"
  2.         type="text/javascript"></script>
  3. <script type="text/javascript">
  4.  
  5. var map;
  6.  
  7. function initialize() {
  8.     //создаем объект для работы с картой
  9.     map = new GMap2(document.getElementById("map_canvas"));
  10.     if (GBrowserIsCompatible()) {
  11.         //устанавливаем координаты и начальное приближение
  12.         map.setCenter(new GLatLng(50.453629, 30.502838), 13);
  13.         //добавляем шкалу зума
  14.         map.addControl(new GLargeMapControl());
  15.         //добавляем переключатель типа карт (Карта, Спутник, Гибрид)
  16.         map.addControl(new GMapTypeControl());
  17.         //указываем тип карты по-умолчанию (Спутник)
  18.         map.setMapType(G_SATELLITE_MAP);
  19.     }
  20. }
  21. </script>

Этот скрипт создает объект типа GMap2 и связывает его с блоком, в котором должна быть размещена карта (map_canvas).

После этого с помощью функции GBrowserIsCompatible() мы проверяем, совместим ли браузер с Google Maps и если да, то выполняем несколько начальных настроек.

Метод setCenter указывает какая точка на должна находится в центре карты и величину приближения (зума). В этом примере я указал координаты Киева. Подробнее на них мы остановимся чуть позже.

Метод addControl добавляет на карту различные элементы управления. В данном случае мы добавили блок навигации и зума (GLargeMapControl) и переключатель типа карт (GMapTypeControl).

И, наконец, устанавливаем тип карты, которая используется по-умолчанию (G_SATELLITE_MAP – спутниковая карта).

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

  1. <label for="sityname">Название города: </label>
  2. <input type="text" name="sityname" id="sityname" />
  3. <input type="button" onclick="getAdress()" value="Найти" />

Тут все предельно просто. Поле для ввода адреса и кнопка «Найти».

Теперь немного теории.

Преобразования адреса в географические координаты называется геокодингом (Geocoding). В Google Maps для эту операцию выполняет специальный объект GClientGeocoder.

Т.е. нам нужно выполнить такие операции.

1) Создать объект GclientGeocoder.

2) С помощью его метода getLatLng определить координаты.

3) Установить на карте маркер в полученной точке.

4) Добавить на карту надпись.

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

  1. var geocoder = new GClientGeocoder();
  2.  
  3. function getAdress() {
  4.     var address = document.getElementById("sityname").value;
  5.     geocoder.getLatLng(
  6.         address,
  7.         function(point) {
  8.             if (!point) {
  9.                 alert(address + " не найден");
  10.             } else {
  11.                 geocoder.getLocations(address, addAdr);
  12.             }
  13.         }
  14.     );
  15. }
  16.  
  17. function addAdr(response) {
  18.     //удаляем слои, если они есть
  19.     map.clearOverlays();
  20.     if (!response || response.Status.code != 200) {
  21.         alert("\"" + address + "\" не найден");
  22.     } else {
  23.         //создаем объект типа GLatLng и надпись
  24.         place = response.Placemark[0];
  25.         point = new GLatLng(place.Point.coordinates[1],
  26.                     place.Point.coordinates[0]);
  27.         marker = new GMarker(point);
  28.         //размещаем надпись на карте
  29.         map.addOverlay(marker);
  30.         //добавляем текст на надпись
  31.         marker.openInfoWindowHtml(place.address + '<br />' +
  32.             'Широта: ' + place.Point.coordinates[1] + '<br />' +
  33.             'Долгота: ' + place.Point.coordinates[0]);
  34.     }
  35. }

При нажатии на кнопку «Найти» вызывается функция getAdress, которая вызывает метод getLatLng. В его первом параметре передается введенный пользователем адрес, а во втором объявлена анонимная функция, которая будет вызвана полсе получения результатов обработки адреса.

Эта функция в качестве параметра получает точку с координатами. В принципе, этого достаточно, чтобы показать нужную карту, но мы можем получить более подробную информацию с помощью метода getLocations.

Этот метод также как и getLatLng в первом параметре получает адрес, а во втором – имя функции, которая будет вызвана после получения данных. В данном примере это addAdr.

Функция addAdr получает результат выполнения метода getLocations, т.е. структуру с данными. После мы просто устанавливаем на карте маркер (метод addOverlay объекта GMap2) и надпись с текстом (метод openInfoWindowHtml).

Заключение

В этом примере показаны далеко не все возможности Google Maps. API довольно большой и постоянно развивается.

Главная проблема в том, что далеко не для всех городов СНГ существуют обычные карты (с названиями улиц). Спутниковые фотографии, конечно, есть, но по ним не всегда удобно ориентироваться. Кстати, именно по этой причине я по-умолчанию установил тип карты G_SATELLITE_MAP.

В этом плане очень привлекательно выглядят карты Яндекса. Например, карта Киева у них есть :-) . Но API они открыли совсем недавно и, насколько я знаю, у них были проблемы с кириллицей (будем надеяться, что это быстро исправят).

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

Скачать пример

Вы можете скачать архив с примером, приведенным в этой статье. Для использования вам нужно будет заменить в файле index.html строку your_google_api_key на ваш ключ (API Key).

Или можно просто поиграться с картой :-)

До встречи!

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в HTML, JavaScript, Web разработка View Comments

]]>
  • Все нормально кеш просто не сразу обновился.. хотя обновлял принудительно, в Firefox тоже показывает, спасибо за помощь.
  • Поправлюсь, маркер не отображается при начальной загрузке только в Mozilla Firefox, в ие и опере все нормально.)
  • Странно, я тестировал код именно в FF.

    Для того, что бы поставить маркер нужны именно координаты. Но их можно получить зная адрес. Эту операцию выполняет объект GclientGeocoder (именно он используется в функции getAdress)
  • Поправил код, не помогло :( маркер не появляется при загрузке страницы. Может можно сделать запрос не по координатам, а по адресу?
  • функцию addAdr я сам нашел. понял, что в ней задан вывод маркера, я просто не пойму, как поправить код, что бы при загрузки страницы появлялся маркер, буду благодарен за конкретный кусок кода с пояснением.

    С уважением Александр
  • Примерно так
    function initialize() {
    	//создаем объект для работы с картой
        map = new GMap2(document.getElementById("map_canvas"));
    	if (GBrowserIsCompatible()) {
    		//устанавливаем координаты и начальное приближение
    		var point = new GLatLng(50.453629, 30.502838);
            map.setCenter(point , 13);
    		//добавляем шкалу зума
    		map.addControl(new GLargeMapControl());
    		//добавляем переключатель типа карт (Карта, Спутник, Гибрид)
    		map.addControl(new GMapTypeControl());
    		//указываем тип карты по-умолчанию (Спутник)
    		map.setMapType(G_SATELLITE_MAP);
    		//создаем маркер
    		marker = new GMarker(point);
    		//размещаем маркер на карте
    		map.addOverlay(marker);
      	}
    }


    Функцию initialize я взял из примера к статье, создание маркера добавил в конец.
  • Хорошая статья, теперь попробую по экспериментировать с картами гоогле на своем сайте.
  • У меня есть вопрос: а если я хочу сделать поиск по готовой карте (с отмеченными точками), как мне быть?
    Как на моем сайте
  • Я не нашел карт на вашем сайте. Поэтому спрошу, вы имеете в виду, что у вас есть отсканированная карта и вы по ней хотите искать?
    В этом случае я бы, наверное, сохранил в БД координаты точек на карте. Поиск бы делал по БД, а в зависимости от результатов показывал нужный фрагмент карты.
  • Добрый вечер Владимир.
    Подскажите, а как установить на карте маркер в заданной точке, при начальной загрузке страницы.
    Пример я задал следующие координаты:

    //устанавливаем координаты и начальное приближение
    map.setCenter(new GLatLng(55.1879, 61.3757), 14);

    Мне необходимо, что бы на загрузившейся карте данная точка отображалась красным маркером.
  • Смотрите функцию addAdr (второй листинг в этой статье).
    Сам маркер добавляется так
    point = new GLatLng(...);
    marker = new GMarker(point);
  • Anton
    Вячеслав, не подскажете?
    Можно ли как то получить координаты точки при помощи geocoder, что бы marker добавлять вне function?
    Типа:

    var piont = geocoder.getLatLng(address, function(response){может отсюда можно вернуть значение?})
    marker = new GMarker(point);
    map.addOverlay(marker);

    Не могу разобраться никак... =( Буду очень благодарен за помощь!
  • Проблема в том, что метод getLatLng отправляет асинхронный (ajax) запрос серверу, который может занять некоторое время.
    Т.е. строка marker = new GMarker(point) скорее всего выполнится до того как будет получен ответ.
    Именно по этому во втором параметре указывается функция, которая будет обрабатывать ответ сервера. Она гарантированно начнет выполняться после получения данных от сервера.
    Делать синхронный запрос тоже неправильно, т.к. при этом у посетителя может возникнуть ощущение, что страница "зависла".

    Честно говоря, я не совсем понимаю, что вы хотите сделать (почему не подходит вариант с функцией?). Если объясните попробую помочь ;)
  • Это гора Эверест! Однозначно!!
  • Очень полезная статья. Пригодилась
    Автору спасибо.
    Попробую у себя такую штуку устроить :)
  • интересная тема. кстати, для wordpress есть плагин UMapper с похожей функциональностью
  • Последнее время у меня складывается впечатление, что для WP есть все :-)
  • Не писал интеграцию с Google Maps. Но со стороны это казалось чем-то магическим и непостижимым. На практике же все оказалось довольно просто.

    Владимир, отличная статья. Пойду попробую написать, что-то подобное.
  • Нучно чтоб покупатель смог оценить весь дом а не по частям, без этого никуда.
  • Пожалуй соглашусь. Лишняя фотография лишней не будет (прошу прощения за тавтологию :-) )
  • Очень полезно такое использовать на сайте про недвижимость, чтобы на специальной странице посетители могли увидеть дом на карте. Да и других вариантов применения можно найти массу.
  • Тут вопрос спорный. Скорее всего покупатель захочет увидеть фасад дома, а не крышу.
  • Конечно, одним снимком из космоса не обойтись, нужно будет добавлять и другие фотографии. Зато будет видно в каком районе находится дом, в промзоне или более менее чистом.
blog comments powered by Disqus ]]>