Показываем уровень зума на карте

Немного отойдем от темы CSS3 и вернемся к теме Google Maps API. :) В скорости появится эпизодическая подборка из небольших таких «трючков». Встречайте первый из них.

В этом трюке, на самом-то деле, нет ничего сложного. Дальше я лишь покажу прокомментированный кусок кода, который, собственно, и отвечает за данную возможность. Итак:

function ZoomDisplayControl(opt_options){
this.opts = opt_options || {};
};
/*Создаем элемент типа GControl*/
ZoomDisplayControl.prototype = new GControl();
ZoomDisplayControl.prototype.initialize = function(map) {
/*Создаем блок, в котором будет высвечиваться уровень текущего увеличения*/
var display = document.createElement("div");
/*Присоединяем его к контейнеру с картой*/
map.getContainer().appendChild(display);
display.innerHTML = map.getZoom() + "";
/*Создаем обработчик для события «zoomend»*/
GEvent.addListener(map, 'zoomend', function(o,z){
display.innerHTML = z + "";
});
/*Придаем значения атрибутам «class» и «title» контейнера*/
display.className = "zoom-level-display";
display.title = "Current zoom level";
/*Если не был передан параметр «noStyle», то стилизуем контейнер с уровнем зума*/
if(!this.opts.noStyle){
display.style.fontFamily = "Arial, sans-serif";
display.style.fontSize = "11px";
display.style.textAlign = "center";
display.style.backgroundColor = "#fff";
display.style.width = "15px";
display.style.height = "15px";
display.style.border = "1px solid #000";
display.style.MozBoxShadow = "1px 1px 1px #999";
display.style.WebkitBoxShadow = "1px 1px 1px #999";
}
this.htmlElement = display;
/*Возвращаем наш контейнер как HTML-элемент*/
return display;
}
/*Позиционируем наш контейнер на карте*/
ZoomDisplayControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,72));
}

Готовый пример наблюдаем тут.