Pull to refresh

Примеры Google Maps API №3: Делаем инфо-окно функциональным

Reading time2 min
Views3.6K
Итак, пока что последняя статейка с примерами. Речь пойдет о том, как сделать инфо-окошко более функциональным.

ДЕЛАЕМ ИНФО-ОКНО ФУНКЦИОНАЛЬНЫМ


Отображать какую-либо информацию о месте, в котором установлен маркер, — это, конечно, хорошо. Но давайте-ка добавим нашему окошку немного функциональности. Идея такова: помимо некоторой информации в инфо-окне будут две кнопочки – «Крупнее» и «К центру». Кнопочка «Крупнее» увеличивает текущий уровень зума на несколько пунктов, а кнопочка «К центру» возвращает нас на центр карты с начальным уровнем зума.
Итак, первая строчка кода будет содержать координаты центра карты и начальный уровень зума, а также переменную map:
var center_lat=37.4419, center_lng=-122.1419, start_zoom=13, map;

Потом идет функция, за которую отвечает кнопочка «Крупнее»:
function to_zoom() {
map.zoomIn();
map.zoomIn();
map.zoomIn();
}

Как видно из примера, значение текущее значение зума увеличивается на 3 пункта.
Далее идет функция, за которую отвечает кнопка «К центру»:
function to_center() {
map.closeInfoWindow();
map.setCenter(new GLatLng(center_lat, center_long), start_zoom);
}

Эта функция закрывает вызванное инфо-окно, устанавливает уровень зума в начальное значение и возвращает нас к центру карты.
А вот и главная функция нашей карты init() в которой мы инициализируем переменную map как объект класса GMap2(), добавляем на карту элементы управления, устанавливаем на карту маркер, и делаем его кликабельным. А вот и код:
function init() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(«map»));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(center_lat, center_long), start_zoom);
var latlng = new GLatLng(center_lat, center_long);
var marker = new GMarker(latlng, G_DEFAULT_ICON, {title: 'Маркер'});
map.addOverlay(marker);
var html = "Какая-то информация будет расположена тут." + "<br \/><center><a href=\"javascript:to_zoom();\">Крупнее</a> | <a href=\"javascript:to_center();\">К центру</a><\/center><br\/>";
marker.openInfoWindowHtml(html);
}
}

И заканчивается все этими двумя строчками:
window.onload = init;
window.onunload = GUnload;

И, разумеется, работающий пример находится здесь.
Tags:
Hubs:
+8
Comments3

Articles

Change theme settings