Cортировка данных Fusion Table с помощью javascript без перезагрузки
31.01.2012
Вывести данные таблицы на карту просто. Не намного сложнее сделать сортировку этих данных без перезагрузки страницы с помощью javascript. Например, мне сразу после создания карты захотелось ее оживить, добавив интерактивности в виде сортировки по странам. Поскольку я далек от программирования, чтение документации по Google Map API не помогло - нужен был готовый шаблон, который я смогу изменить под свои требования. На удивление, я даже нашел статью на понятном языке (не столько на русском, сколько на человеческом).
Я задумал сортировать фотографии по странам. Для этого необходимо добавить еще одну колонку Country, тип Text. Страны я обозначил с помощью географических доменов первого уровня — так проще и нагляднее.
Дальше нужно подставить в код свои параметры.
<html>
<head><style> #map {width:860px;height:600px;}</style></head>
<body onLoad="initializeMap()">
<SCRIPT type=text/javascript src="</SCRIPT'>http://maps.google.com/maps/api/js?sensor=false"></SCRIPT>
<SCRIPT>
var map, layer;
var iw = null;
function initializeMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(36.73447903144106,53.9124415),
zoom: 3,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer(2655265);
layer.setMap(map);
}
function updateMap() { layer.setQuery("select Location from 2655265 where Country = 'ua'"); }
function updateMap1() {layer.setQuery("select Location from 2655265 where Country = 'th'"); }
function updateMap2() {layer.setQuery("select Location from 2655265 where Country = 'kh'"); }
function updateMap3() {layer.setQuery("select Location from 2655265 where Country = 'me'"); }
function updateMap4() {layer.setQuery("select Location from 2655265 where Country = 'de'"); }
function updateMap5() {layer.setQuery("select Location from 2655265 where Country = 'fr'"); }
function updateMap6() {layer.setQuery("select Location from 2655265 where Country = 'ru'"); }
function updateMap7() {layer.setQuery("select Location from 2655265 where Country = 'hu'"); }
function updateMap999() {layer.setQuery("select Location from 2655265"); }
</SCRIPT>
<DIV id=map></DIV>
<A onclick=updateMap() href="#" rel=nofollow>UA</A> | <A onclick=updateMap1() href="#" rel=nofollow>TH</A> | <A onclick=updateMap2() href="#" rel=nofollow>KH</A> | <A onclick=updateMap3() href="#" rel=nofollow>ME</A> | <A onclick=updateMap4() href="#" rel=nofollow>DE</A> | <A onclick=updateMap5() href="#" rel=nofollow>FR</A> | <A onclick=updateMap6() href="#" rel=nofollow>RU</A> | <A onclick=updateMap7() href="#" rel=nofollow>HU</A> | <A onclick=updateMap999() href="#" rel=nofollow>Clear filter</A>
</html>
width:860px;height:600px; — ширина и высота окна, к котором будет отображаться карта.
onLoad="initializeMap()" — скрипт будет начинать свою работу сразу же при загрузке страницы, потому событие onLoad нужно поместить в тег body.
sensor=false — этот параметр по умолчанию отключен, так как нам не надо использовать GPS или Wi-Fi для определения местоположения пользователя.
36.73447903144106,53.9124415 — здесь нужно указать координаты центральной точки, относительно которой карта будет отцентрирована в окне, размеры которого указаны выше. Проще всего это сделать в режиме Visualize > Map > Get embeddable link, где в появившемся окне копировать:
zoom: 3 — степень приближения карты.
mapTypeId: 'roadmap' — тип карты, roadmap показывает границы и дороги . Варианты: satellite - естественный вид со спутника; terrain - на карте типа roadmap показан рельеф (растительность, горы).
2655265 — это уникальный код таблицы, данные из которой нужно обработать (в меню File > About смотрим Numeric ID).
select Location from 2655265 where Country = 'ua' — это SQL-запрос, который можно перевести примерно так: выбрать каждую ячейку колонки Location таблицы 2655265, для которой значение соответствующей ячейки колонки Country равно ua. Для каждой страны повторяем аналогичные действия. Последняя строка "select Location from 2655265" — это выборка всех стран, то есть отмена любого фильтра, чтобы у пользователя была возможность вернуться к изначальным параметрам без перезагрузки страницы.
Обратите внимание, что у каждой выборки номер функции меняется. Такое соответствие номеров вызываемых функций нужно сохранить и для ссылок-фильтров в HTML-коде.
Готовый пример моей карты фотопутешествий.
Первый этап создания карты фотографий с помощью Google Fusion Table.