Первое знакомство с Google Maps Javascript API

В данном посте я расскажу о своем опыте использования Google Maps JS API и его внедрение в мобильную версию сайта с весьма крупной посещаемостью.

Совсем недавно на работе пришлось столкнуться с реализацией модуля, рассчитанного на поиск пользователей сайта в пределах текущих координат посетителя (тематика сайта — знакомства, а не слежка, как можно подумать, ссылок и названий приводить не буду дабы не раскрывать тайны и не рекламироваться). Изначально я столкнулся с уже имевшейся реализацией модуля. Эта версия была написана год-два назад и применяла устаревшую версию API, так что когда я полез в документацию и попробовал что-то добавить к этому модулю — у меня, естественно, полезли ошибки.
Зарегистрировав бесплатный API Key я обновил используемую библиотеку и начал изучение справки.
Весьма порадовала возможность создания своих собственных элементов карты (Overlays), что, собственно, мне и пришлось сделать. Приведу пример использования этой возможности:

function TestOverlay(bounds) {
  this._bounds = bounds;
}
TestOverlay.prototype = new GOverlay();

TestOverlay.prototype.initialize = function(map) {
  var div = document.createElement("div");
  div.style.border = "2px solid #888888";
  div.style.position = "absolute";
  map.getPane(G_MAP_MAP_PANE).appendChild(div);
  this._map = map;
  this._div = div;
}

TestOverlay.prototype.remove = function() {
  this._div.parentNode.removeChild(this._div);
}

TestOverlay.prototype.copy = function() {
  return new Rectangle(this._bounds);
}

TestOverlay.prototype.redraw = function(force) {
  if (!force) return;
  var c1 = this._map.fromLatLngToDivPixel(this._bounds.getSouthWest());
  var c2 = this._map.fromLatLngToDivPixel(this._bounds.getNorthEast());
  this._div.style.width = Math.abs(c2.x - c1.x) + "px";
  this._div.style.height = Math.abs(c2.y - c1.y) + "px";
  this._div.style.left = (Math.min(c2.x, c1.x) - 2) + "px";
  this._div.style.top = (Math.min(c2.y, c1.y) - 2) + "px";
}


function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    map.addControl(new GSmallMapControl());

    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngDelta = (northEast.lng() - southWest.lng()) / 3;
    var latDelta = (northEast.lat() - southWest.lat()) / 4;
    var rectBounds = new GLatLngBounds(
        new GLatLng(southWest.lat() + latDelta,
                    southWest.lng() + lngDelta),
        new GLatLng(northEast.lat() - latDelta,
                    northEast.lng() - lngDelta));
    map.addOverlay(new TestOverlay(rectBounds));
  }
}
​

Как видно из этого примера собственные элементы карты создаются путем реализации интерфейса GOverlay. Для реализации этого интерфейса необходимо реализовать 4 его метода — initialize, remove, copy и redraw.
Кроме того, для работы со стандартными элементами карты применяются весьма удобные и интуитивно понятные классы такие, как GPoint, GSize, GIcon. Последний, например, позволяет задавать размер иконки, добавлять к иконке тень, а также устанавливать точку соприкосновения иконки с картой. Все это возможно благодаря весьма простому интерфейсу:

    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);

Получившийся в результате обновления модуль стал гораздо удобнее и интереснее благодаря использованию более свежих возможностей Google Maps API.