Как стать автором
Обновить

Примеры Google Maps API №1: Создаем собственные элементы управления

Время на прочтение 6 мин
Количество просмотров 6K
Итак, я продолжаю делать кросс-посты из моего блога. На этот раз речь пойдет о создании собственных элементов управления для карт на основе Google Maps API.

СОЗДАЕМ СОБСТВЕННЫЕ ЭЛЕМЕНТЫ УПРАВЛЕНИЯ КАРТОЙ


Если Вас чем-то не устраивают стандартные элементы управления картой Google Maps, то с помощью не очень большого по объему кода Вы можете создать свои. Мы будем создавать кнопки управления зумом и кнопки переключения типа карты (обычный и спутник).
Вначале зададим минимальный и максимальный уровни зума:
/*Максимальный и минимальный зум*/
var zoom_max = 10;
var zoom_min = 7;

Теперь объявим функцию, прототип которой будет отвечать, собственно, за кнопки уменьшения/увеличения:
/*Объявление функции*/
function TextualZoomControl() {
}

Затем применяем к прототипу метод initialize(), средствами котрого и создаются наши элементы управления. Этот прототип инициализируется как объект класса GControl():
/*Создаем Div'ы, в которые помещаем элементы управления. По-одному блоку для каждого элемента.*/
TextualZoomControl.prototype = new GControl();
/*Инициализируем прототип*/
TextualZoomControl.prototype.initialize = function(map) {
/*Создаем контейнер для кнопок*/
var container = document.createElement("div");
/*Создаем первую кнопочку*/
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
/*Вписываем название*/
zoomInDiv.appendChild(document.createTextNode("Увеличить"));
/*Если превышен уровень зума, то выводим сообщение*/
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
if(map.getZoom()>zoom_max){
 map.setZoom(zoom_max);
 alert("Куда же еще больше-то?!");
}
});
/*Создаем вторую кнопочку*/
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
/*Вписываем название*/
zoomOutDiv.appendChild(document.createTextNode("Уменьшить"));
/*Если занижен уровень зума, то выводим сообщение*/
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
if(map.getZoom()<zoom_min){
 map.setZoom(zoom_min);
 alert("И так все прекрасно видно!"); 
}
});
map.getContainer().appendChild(container);
return container;
}

Задаем положение контейнера с кнопками с помощью метода getDefaultPosition(). В данном случае позиция задается относительно левого верхнего угла карты; отступы составляют 7 пикселей:
/*Задаем позицию элементов управления относительно карты*/
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

И, в качестве заключительного штриха, настраиваем внешний вид созданных нами кнопок. Для этого используем метод setButtonStyle_():
/*Задаем стили для элементов*/
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline"
button.style.color = "#000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}

А вот код, иллюстрирующий создание кнопок, отвечающих за смену типа карты:
/*Функция создания элементов управления изменением типа карты*/
function MapTypeControl() {
}
MapTypeControl.prototype = new GControl();
/*Создаем Div'ы, в которые помещаем элементы управления. По-одному блоку для каждого элемента.*/
MapTypeControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var normalDiv = document.createElement("div");
this.setButtonStyle_(normalDiv);
container.appendChild(normalDiv);
normalDiv.appendChild(document.createTextNode("Карта"));
GEvent.addDomListener(normalDiv, "click", function() {
map.setMapType(G_NORMAL_MAP);
});
var satelliteDiv = document.createElement("div");
this.setButtonStyle_(satelliteDiv);
container.appendChild(satelliteDiv);
satelliteDiv.appendChild(document.createTextNode("Спутник"));
GEvent.addDomListener(satelliteDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});
map.getContainer().appendChild(container);
return container;
}
/*Задаем позицию элементов управления относительно карты*/
MapTypeControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
/*Задаем стили для элементов*/
MapTypeControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline"
button.style.color = "#000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}

Теперь нам необходимо все это присоединить к карте:
/*Функция загрузки карты*/
function init() {
if (GBrowserIsCompatible()) {
/*Помещаем карту в div с id=”map”*/
map = new GMap2(document.getElementById("map"));
/*Подключаем кнопки управления зумом*/
map.addControl(new TextualZoomControl());
/*Подключаем кнопки управления сменой типа карты*/
map.addControl(new MapTypeControl());
/*Устанавливаем центр карты*/
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

/*Инициализируем карту*/
window.onload = init;
window.onunload = GUnload;

И весь JavaScript-код целиком:
var zoom_max = 10;
var zoom_min = 7;
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Увеличить"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
if(map.getZoom()>zoom_max){
 map.setZoom(zoom_max);
 alert("Куда же еще больше-то?!");
}
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
/*Вписываем название*/
zoomOutDiv.appendChild(document.createTextNode("Уменьшить"));
/*Если занижен уровень зума, то выводим сообщение*/
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
if(map.getZoom()<zoom_min){
 map.setZoom(zoom_min);
 alert("Край и так виден, как на ладони!"); 
}
});
map.getContainer().appendChild(container);
return container;
}
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline"
  button.style.color = "#000"
  button.style.backgroundColor = "#fff"
  button.style.font = "small Arial"
  button.style.fontWeight = "bolder"
  button.style.border = "1px solid black"
  button.style.padding = "2px"
  button.style.marginBottom = "3px"
  button.style.textAlign = "center"
  button.style.width = "6em"
  button.style.cursor = "pointer"
}
function MapTypeControl() {
}
MapTypeControl.prototype = new GControl();
MapTypeControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var normalDiv = document.createElement("div");
this.setButtonStyle_(normalDiv);
container.appendChild(normalDiv);
normalDiv.appendChild(document.createTextNode("Карта"));
GEvent.addDomListener(normalDiv, "click", function() {
map.setMapType(G_NORMAL_MAP);
});
var satelliteDiv = document.createElement("div");
this.setButtonStyle_(satelliteDiv);
container.appendChild(satelliteDiv);
satelliteDiv.appendChild(document.createTextNode("Спутник"));
GEvent.addDomListener(satelliteDiv, "click", function() {
map.setMapType(G_SATELLITE_MAP);
});
map.getContainer().appendChild(container);
return container;
}
MapTypeControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}
MapTypeControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline"
  button.style.color = "#000"
  button.style.backgroundColor = "#fff"
  button.style.font = "small Arial"
  button.style.fontWeight = "bolder"
  button.style.border = "1px solid black"
  button.style.padding = "2px"
  button.style.marginBottom = "3px"
  button.style.textAlign = "center"
  button.style.width = "6em"
  button.style.cursor = "pointer"
}
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.addControl(new MapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
}
}
window.onload = init;
window.onunload = GUnload;

Множество примеров с описаниями на английском можно найти тут. А работающий пример, описанный в этой статье, есть тут.
Теги:
Хабы:
+24
Комментарии 17
Комментарии Комментарии 17

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн