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

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

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

• например, ваш клиент на сайте заполняет форму заказа товара и пишет адрес, и он автоматически может увидеть: правильно ли он заполняет или нет по карте, где отобразится точка доставки груза.
• Или например, у вас в базе куча адресов и вы хотите вывести на сайте их все с маленькими картами.

var geocoder = new GClientGeocoder();

var address = "Санкт-Петербург, Невский пр.100";
geocoder.getLatLng(
  address,
  function(point) {
    if (!point) {
      alert(address + " не обнаружен");
    } else {
        alert(point.toString());
    }
  }
);

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, чтобы для свойства, где хранится адрес, автоматически рисовалась карта с точкой.