Cортировка данных Fusion Table с помощью javascript без перезагрузки

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.


 

Вітаю!
Я — Євген Гончаренко, автор цього блогу.
Як зі мною зв’язатися...




нагору