Разное

Геокодинг — или поиск места на карте по адресу

Все мы знаем, что есть широта и долгота у каждой точки на планете Земля. Да и на других планетах тоже :) И существуют сервисы, позволяющие по адресу вычислить координаты места — широту и долготу, и после этого еще и показать где это место находится. Два из этих сервиса известны широкой аудитории — это Google и Yandex. И на примере Google я покажу как использовать эту возможность.

Однако, зачем это может быть нужно? Это может быть нужно для многих случаев:

  • например, ваш клиент на сайте заполняет форму заказа товара и пишет адрес, и он автоматически может увидеть: правильно ли он заполняет или нет по карте, где отобразится точка доставки груза.
  • Или например, у вас в базе куча адресов и вы хотите вывести на сайте их все с маленькими картами.
Попробуем разобраться как сделать это с помощью Google API.
В API находим объект, который нам нужен — это GClientGeocoder. Простой пример использования его такой:
var geocoder = new GClientGeocoder();

var address = "Санкт-Петербург, Невский пр.100";
geocoder.getLatLng(
  address,
  function(point) {
    if (!point) {
      alert(address + " не обнаружен");
    } else {
        alert(point.toString());
    }
  }
);
* не забудьте предварительно подключить необходимое Google API !
Что мы делаем данным кодом? Мы узнаем широту и долготу места «Санкт-Петербург, Невский пр.100» и в случае удачи выводим широту и долготу, а в случае неудачи выводим ошибку.
Усложним пример и сделаем вывод карты:
var map = new GMap2(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
var address = "Санкт-Петербург, Невский пр.100";
  geocoder.getLatLng(
    address,
    function(point) {
      if (!point) {
        alert(address + " not found");
      } else {
        map.setCenter(point, 13);
        var marker = new GMarker(point);
        map.addOverlay(marker);

        marker.openInfoWindow(document.createTextNode(address));
      }
    }
  );

Таким образом, мы получаем вывод карты в тег <div id=»map_canvas»></div>. Не забудьте его поставить.

Если вы хотите вывести несколько карт на одной странице, то следует вывести несколько тегов div с разными идентификаторами и к каждому подключить свою карту:

<div id=»map_canvas1″></div>

<div id=»map_canvas2″></div>

<div id=»map_canvas3″></div>

var map1 = new GMap2(document.getElementById("map_canvas1"));
var map2 = new GMap2(document.getElementById("map_canvas2"));
var map3 = new GMap2(document.getElementById("map_canvas3"));

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

Если интерес к этой теме у читателей блога будет, то я напишу продолжение, рассказывающее о том, как можно подправить шаблон к компоненту catalog.section, чтобы для свойства, где хранится адрес, автоматически рисовалась карта с точкой.

Комментариев: 2

Отставить комментарий

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

11 + 19 =