В рамках прошедшего 12 ноября Google Developer Day 2010 в Москве был рассмотрен вопрос о том, как можно использовать службу Fusion Tables — управления крупными коллекциями табличных данных в "облаке" для отображения данных на Google Maps.
Что представляет собой сервис Fusion Tables?
С его помощью можно загружать таблицы размером до 100 МБ и публиковать их для сотрудников или размещать в открытом доступе. Данные можно фильтровать и объединять, отображать их на картах и различных диаграммах, соединять данные из нескольких таблиц и экспортировать их в Интернет или в файлы CSV. Помимо этого, с помощью службы Fusion Tables вы сможете вести обсуждение данных на разных уровнях детализации (например, на уровне строк, столбцов и отдельных ячеек).
Я покажу на нескольких примеров как работать с данной службой.
В начале мы переходим на страницу по адресу http://www.google.com/fusiontables/Home и нажимаем на кнопку New table. (Для работы с Fusion Tables Вы должны быть зарегистрированы в одном из сервисов Google.)
В открывшемся меню выбираем необходимый пункт:
Import table – импортировать существующую таблицу;
New empty table – создать новую пустую таблицу
Выбираем первый пункт — Import table.
Появляется окно для выбора файла
Можно импортировать файлы следующих типов:
.csv — текстовый файл с разделителями;
.xls, .xlsx — файлы Microsoft Excel;
.ods — файл электронной таблицы в формате OpenDocument Format (ODF, сокращённое от OASIS Open Document Format for Office Application — открытый формат документов для офисных приложений) , используется в OpenOffice;
.kml – файлы для отображения трёхмерных геопространственных данных в программе Google Earth.
Кроме этого можно импортировать электронные таблицы из Google Documents – Google Spreadsheets.
В первом примере я буду использовать csv файл — med_ymap2.csv
Структура файла:
"ID","NAME","CATEGORIA","ADDRESS","PHONE"
"1","Айболит, больница детская № 27 городская","Больницы детские","603035, г. Нижний Новгород, Ярошенко ул., 7 а","(831) 276-31-33"
"2","Больница детская областная клиническая","Больницы детские","603136, г. Нижний Новгород, Ванеева ул., 211","(831) 417-56-84"
"3","Больница детская № 1 городская клиническая","Больницы детские","603081, г. Нижний Новгород, Гагарина пр., 76","(831) 465-02-04"
"4","Больница детская № 17 городская","Больницы детские","603003, г. Нижний Новгород, Союзный пр., 17","(831) 273-08-40"
"5","Больница детская № 25 городская","Больницы детские","603004, г. Нижний Новгород, Лоскутова ул., 2 а","(831) 295-70-02"
…
Выбираем файл на своем компьютере и нажимаем кнопку Next.
В следующим окне показывается вид в котором импортируется ваша таблица, здесь можно выбрать необходимые колонки.
Еще раз нажимаем Next.
В появившемся окне мы можем задать свойства для импортируемой таблицы:
Название (Table name) — Medecina;
параметр Allow export — если он отмечен, то другие пользователи смогут иметь возможность экспортировать данные вашей таблицы в формате CSV;
поле Attribute data to — служит для задания текста сообщения когда другие пользователи будут просматривать или использовать ваши данные;
поле Attribution page link — служит для задания ссылки на ресурс автора таблицы;
поле Description — описание таблицы
Нажимаем кнопку Finish — происходит импорт таблицы и после этого, созданная таблица открывается.
Теперь наша задача отобразить табличные данные на карте.
Для этого необходимо провести геокодирование адресов из колонки ADDRESS.
В начале мы должны изменить тип поля в этой колонке.
Выбираем в меню пункт Edit, затем Modify Columns.
В открывшемся окне выбираем колонку ADDRESS и устанавливаем параметр Type: Location, нажимаем кнопку Save.
После этого проведем геокодирование: меню File пункт Geocode.
Появляется окно, в котором мы должны указать колонку для геокодирования — ADDRESS.
Нажимаем кнопку Geocode и происходит процесс геокодирования.
Закрываем окно и выбираем в меню Visualize пункт Map, наблюдаем карту с нашими метками (необходимо с позиционировать карту в нужную точку и выбрать подходящий масштаб).
Щелкнув левой кнопкой мыши по какой-либо метке мы увидим информационное окно с данными для нее.
Чтобы другие пользователи могли наблюдать карту с вашими данными необходимо изменить статус видимости для данной таблицы, нажимаем кнопку Share и отмечаем пункт Visibility options — Public.
Получить ссылку на таблицу для размещения на сайте или отправки по e-mail — кнопка Get link
http://www.google.com/fusiontables/DataSource?snapid=99009
Мы можем легко встроить данную карту на любой сайт без необходимости использования API Google Maps, просто нажав на ссылку Get embeddable link.
Мы получим код вида:
<iframe width="500px" height="300px" scrolling="no" src="http://www.google.com/fusiontables/embedviz?viz=MAP&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4+from+308599+&h=false&lat=56.28415359513745&lng=43.96522521972656&z=13&t=1&l=col3"></iframe> |
Два примера вставки:
1. В блог WordPress
2. В Joomla
Размер окна с картой можно изменять меняя параметры width и height, ширина и высота окна соответственно.
Мы можем изменять стили отображения для объектов на карте (Configure styles ) и стиль для отображения информационного окна (Configure info window ).
Для нашего случая мы можем изменить значок для метки: переходим по ссылке Configure styles и выбираем нужный значок, например lage_red, нажимаем Save и значки на карте изменяются.
Изменить стиль для отображения данных в балуне (информационном окне) необходимо перейти по ссылке Configure info window.
В появившемся окне мы можем выбрать нужный шаблон для отображения данных или создать свой выбрав тип Custom.
В шаблоне можно использовать html-теги, а значения полей и атрибутов подставляются в фигурных скобках.
Приведу простой код шаблона:
<div style="color:#ff0303;font-weight:bold;"><strong>{NAME}</strong></div>
<div>
<strong>Категория: </strong>{CATEGORIA}<br />
<strong>Адрес: </strong>{ADDRESS}<br />
<strong>Телефон: </strong>{PHONE}<br />
</div>
Карта у нас готова, но самое интересное не это, мы можем использовать различные условия для отбора необходимых значений из таблицы.
Для этого используется пункт Filter меню View.
Например, отобразим только метки из категории Больницы, госпитали.
Для этого выбираем поле таблицы CATEGORIA, условие равенство (=), заначение — Больницы, госпитали.
Нажимаем на кнопку Applay, применяем данный фильтр к карте и наблюдаем результат.
Созданную в Fusion Tables карту можно легко отобразить используя API Google Maps v3.
Для этого предусмотрен специальный конструктор FusionTablesLayer, который создает специальный слой используя таблицу Fusion с соответствующим ID.
ID для вашей таблицы можно определить взяв значение последнего параметра dsrcid из строки URL адреса страницы.
В моем примере строка URL имеет вид: http://www.google.com/fusiontables/DataSource?dsrcid=308599,
здесь 308599 – id таблицы.
Для отображения используем следующий код:
<html>
<head>
<title>Отображение Fusion Tables с использованием Google Maps API v3</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="dialog.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
body {
font-family: sans-serif;
font-size: small;
}
#map {
width: 800px;
height: 600px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<script>
var map, layer;
var iw = null;
function initializeMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(56.316537,43.998779),
zoom: 13,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer(308599);
layer.setMap(map);
}
</script>
<body onLoad="initializeMap()">
<div id="map"></div>
</body>
</html> |
Используя возможность формирования SQL-запросы к таблице, можно сделать кнопки для отображения одельных категорий из таблицы.
Код будет иметь следующий вид:
<html>
<head>
<title>Отображение Fusion Tables с использованием Google Maps API v3 с условиями</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="dialog.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
body {
font-family: sans-serif;
font-size: small;
}
#map {
width: 800px;
height: 600px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<script>
var map, layer;
var iw = null;
function initializeMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(56.316537,43.998779),
zoom: 13,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer(308599);
layer.setMap(map);
}
function updateMap() { layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Больницы детские'"); }
function updateMap1() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Больницы, госпитали'"); }
function updateMap2() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Брак и семья'"); }
function updateMap3() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Вакцинация-услуги'"); }
function updateMap4() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Дерматологи, венерологи'"); }
function updateMap5() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Диагностические центры'"); }
function updateMap6() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Диспансеры'"); }
function updateMap7() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Женские консультации'"); }
function updateMap8() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Кардиология специалисты'"); }
function updateMap9() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Лечение за рубежом'"); }
function updateMap10() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Медицина нетрадиционная'"); }
function updateMap11() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Медицинские центры'"); }
function updateMap12() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Наркологи услуги'"); }
function updateMap13() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Онкология-специалисты'"); }
function updateMap14() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Офтальмологические клиники'"); }
function updateMap15() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Пластическая хирургия-услуги'"); }
function updateMap16() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Поликлиники'"); }
function updateMap17() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Поликлиники детские'"); }
function updateMap18() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Психиатрия'"); }
function updateMap19() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Реабилитационные центры'"); }
function updateMap20() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Родильные дома'"); }
function updateMap21() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Скорая медицинская помощь'"); }
function updateMap22() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'СПИД'"); }
function updateMap23() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Стоматологические клиники'"); }
function updateMap24() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Стоматологические поликлиники'"); }
function updateMap25() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Травматологические пункты'"); }
function updateMap26() {layer.setQuery("select ADDRESS from 308599 where CATEGORIA = 'Экспертиза медико-социальная'"); }
function updateMap27() {layer.setQuery("select ADDRESS from 308599"); }
</script>
<body onLoad="initializeMap()">
<table>
<tr><td style="vertical-align:top;">
<div id="map"></div>
</td>
<td style="vertical-align:top;">
<a href="#" onclick="updateMap()">Больницы детские</a><br />
<a href="#" onclick="updateMap1()">Больницы, госпитали</a><br />
<a href="#" onclick="updateMap2()">Брак и семья</a><br />
<a href="#" onclick="updateMap3()">Вакцинация-услуги</a><br />
<a href="#" onclick="updateMap4()">Дерматологи, венерологи</a><br />
<a href="#" onclick="updateMap5()">Диагностические центры</a><br />
<a href="#" onclick="updateMap6()">Диспансеры</a><br />
<a href="#" onclick="updateMap7()">Женские консультации</a><br />
<a href="#" onclick="updateMap8()">Кардиология специалисты</a><br />
<a href="#" onclick="updateMap9()">Лечение за рубежом</a><br />
<a href="#" onclick="updateMap10()">Медицина нетрадиционная</a><br />
<a href="#" onclick="updateMap11()">Медицинские центры</a><br />
<a href="#" onclick="updateMap12()">Наркологи услуги</a><br />
<a href="#" onclick="updateMap13()">Онкология-специалисты</a><br />
<a href="#" onclick="updateMap14()">Офтальмологические клиники</a><br />
<a href="#" onclick="updateMap15()">Пластическая хирургия-услуги</a><br />
<a href="#" onclick="updateMap16()">Поликлиники</a><br />
<a href="#" onclick="updateMap17()">Поликлиники детские</a><br />
<a href="#" onclick="updateMap18()">Психиатрия</a><br />
<a href="#" onclick="updateMap19()">Реабилитационные центры</a><br />
<a href="#" onclick="updateMap20()">Родильные дома</a><br />
<a href="#" onclick="updateMap21()">Скорая медицинская помощь</a><br />
<a href="#" onclick="updateMap22()">СПИД</a><br />
<a href="#" onclick="updateMap23()">Стоматологические клиники</a><br />
<a href="#" onclick="updateMap24()">Стоматологические поликлиники</a><br />
<a href="#" onclick="updateMap25()">Травматологические пункты</a><br />
<a href="#" onclick="updateMap26()">Экспертиза медико-социальная</a><br />
<a href="#" onclick="updateMap27()">Все метки</a>
</td>
</tr>
</table>
</body>
</html> |
На этом пока все, продолжение следует …
Доброго дня. Подскажите что не так, берем пустой «хтмл» файл, копируем туда один из ваших примеров (который первый), меняем dsrcid на свой и видим шиш.
Как быть то? При этом если просто скопировать то безусловно всё работает но как только мы меняем dscrid на свой то появляется карта но без точек.
Усё разрешилось =)
Спасибо огромное за подробное объяснение и примеры. Вот только у меня вопрос, а можно сделать так, чтобы ссылки на картах — я поставил в информационное окно — открывались в этом же окне, а не в новой вкладке.
То есть тут:
Диамед, ЗАО
Категория: Медицинские центры
Адрес: 603104, г. Нижний Новгород, Медицинская ул., 1
Телефон: (831) 465-59-04
http://www.ya.ru
Вот мне надо чтобы ссылка ya.ru открывалась в этом же окне, а не в новом. как это реализовать? Подскажите пожалуйста.
Нужно в коде ссылки добавить параметр target=»self», т.е. код ссылки должен быть
http://www.ya.ruДоброго дня! Еще вопросик назрел, ответ на который я надеюсь найти тут — можно ли как то сделать несколько типов точек на карте?
Допустим синие и зеленые точки на одном слое карты, почитал маны — увеличился выбор этих самых точек а про одновременное использование двух и более нет =(
Надеюсь это знаете вы и поможете бедному ламеру %)
Прощу прощения за спам, который в итоге оказался. Ответ на вопрос я нашёл сам =)
Дошли руки до поиска и остановились вот тут вот — http://sarafanchik.info/asnv/123.html
Код, полностью скопирован отсюда, просто вставил свои переменные. И не пашет, зараза такая.
Помогите пожалуйста решить эти заминку.
У Вас в таблице колонки называются маленькими буквами, а на странице с картой в SQL-запросах название колонок большими буквами.
Спасибо большое! Своим ответом вы спасли мои, и еще пары человек, мозг =)
Ахм %) Если можно и не сложно — посмотрите пожалуйста еще и тут — что не так?
Свою прошлую ошибку я учёл и названия теперь одного размера — строчного и в таблице и на самой странице.
Вот, собсенно и она — http://sarafanchik.info/asnv/ecowiki.html =)
Спасибо за описание и комментарии очень удобной функции. Попробовал все здорово и красиво. Импорт производил из таблицы Spreadsheets, а возможно ли производить автоматический апгрейт с fusion tables или надо будет всё время производить импорт таблицы при каждом её изменении?
Можно производить изменение значений таблицы в Fusion Tables используя специальный API. С помощью него можно добавлять новые значения в таблицу и изменять их. Пример использования API Fusion Tables приведен в заметке Организация добавления и вывода данных на карту Google Maps, используя Fusion Tables
Добрый вечер, Сергей
мне нужно сделать загрузку данных в карту, но точки расположены в области и адресов нет, поэтому геокодирование (если я правильно употребляю этот термин) возможно только по координатам, т.е. долгота+широта
я могу сделать загрузку данных из FT с указанием долготы и широты? точки будут отражены на карте?
Спасибо
Координаты необходимо тогда хранить в таблице в одной колонке типа Location через запятую или в двух разных нужно только в свойствах первой из колонок указать в какой находится Latitude (долгота) и Longitude (широта).
будьте добры. посмотрите какой код HTML Должен быть для http://dimcom7.blogspot.com/p/www.html, чтобы в блоггере работал sql запрос
Привожу весь новый код: new-code.txt
спасибо, вот посмотрите что получается http://dimcom7.blogspot.com/p/www.html, как понимаю основная проблема в том, что блог имеет некоторый шаблон, который применен ко всем страницам и как сделать, чтобы заработало корректно на новой странице блога не совсем понятно, если есть возможность посмотрите.
Нужно со стилями поработать, какие-то из стилей мешают нормальному отображению карты.
ОК, спасибо, а код с SQL апросом, чтобы вставить в страницу блога и он работал можно ли привести или это очень сложно сделать. Спрашиваю потому, что просто на странице работает ваши коды работают, а страницах блоге нет. Думаю этот код был бы интересен всем пользователям.
ОК, спасибо, а код с SQL запросом, чтобы вставить в страницу блога и он работал можно ли привести или это очень сложно сделать. Спрашиваю потому, что просто на странице работает ваши коды работают, а страницах блоге нет. Думаю этот код был бы интересен всем пользователям.
Подскажите, как можно установить свой маркер на карту, используя табл. Fusion. Один маркетр получается установить: Вот так:
// Создаем новый маркер
var image = ‘images/sto.png’;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ‘Оперный театр им. А. С. Пушкина’,
icon: image
});
А вот как создать их множество с привязкой к таблице — ПРОБЛЕМА!!!! Подскажите если знаете. Спасибо!!!
Подскажите, пожалуйста, как можно получить два столбца геокоординат. Столбец широты и столбец долготы. У меня таблица из тысячи строк, поэтому мне очень важно получить именно столбцы значений… Чтобы потом воздать маркеры…
Получить в Fusion Tables два столбца координат нельзя, если таблица импортировалась без этих столбцов.
Возможно провести геокодирование адресов из соответствующей колонки, выбрав меню File пункт Geocode и затем выводить карту.
Если необходимо вывести часть данных из таблицы, то делается запрос вида
layer.setQuery(«select ADDRESS from id-таблицы where условие'»);,
где ADDRESS — имя колонки с адресами.
Подскажите, как можно выбирать отображение на карте сразу нескольких типов объектов (как в примере с MySQL), т.е. галочки вместо ссылок.
Сделал пример ссылка
«ID для вашей таблицы можно определить, взяв значение последнего параметра dsrcid из строки URL адреса страницы.»
Сергей, я не нахожу такого URLа. Страницы какой? Не нахожу ни в одной ссылке параметр dsrcid.
На странице редактирования таблицы адрес такой: https://www.google.com/fusiontables/DataSource?docid=1K4BcLeP6mWOIWWfcBSggj2-ELtwPPb2VUXWsH-U&hl=en_US
И еще один момент. Не могу разобраться, как вставлять ссылки в адреса (маркеры). Прошу помочь.
Определить ID таблицы нужно выбрать в меню File > About, параметр Numeric ID.
Для Вашей таблицы Numeric ID: 2763137
Второй вопрос не понял, что имеется ввиду под ссылками в адреса? Ссылки в балуне? Ссылки на метки на карте?
Ссылки в балуне. Простите за некорректность:)
Спасибо огромное. Большое дело делаете:)
У поля типа text, для колонки таблицы, есть свойство формат.
Нужно выбрать формат Link, а в колонку таблицы добавить url-адреса.
Тогда в балуне появиться ссылка для перехода. Смотрите пример
И еще вопрос.
Делаю сайт на локальном компьютере в Joomla.
Вставляю -код в html материала, сохраняю, а код исчезает.
Это из-за того, что на localhost сейчас сайт?
Не высветилось..
Вставляю iframe-код в html материала..
Это из-за редактора, он удаляет тег iframe из материала. Надо отключить совсем редактор и вставить код.
В админке нужно зайти в управление пользователями, выбери того, под которым сидишь и отключи ему визуальный редактор (User Editor).
Затем снова в редактирование материала и пишешь чистый хтмл
Спасибо. Все понятно. Все освоил.
Только не получается title ссылке присвоить. На Вашем примере — «Перейти на сайт».
Пробовал через Edit->Modify table info->Attribution link.
Последний коммент можно удалить. Включил внимание и все нашел.
Спасибо, Сергей, за очень полезный материал. Рекламу общелкал:)
Подскажите пожалуйста, свои маркеры применять нельзя, я так понял?
Можно использовать свои маркеры двумя способами, прописать путь для изображения в одну из колонок таблицы, в настройках указать какую колонку использовать для этого. Второй способ показан в примере из документации: пример
Я бы хотел сделать несколько рубрик и в каждой свои маркеры. Можно ли так?
Подскажите, как сделать маленькое окошко поиска по координатам или по названию города или поселка и вставить вот в такую страничку (код):
Уважаемый admin, помогите разобраться. Когда первый раз попробывал геокодировать таблицу на 6000 адресов, все прошло быстро. Сейчас доходит до 3% и зависает намертво. Почитал на оф сайте, написано есть какоето ограничение. Можно узнать, чо за ограничение и как его обойти?
Здравствуйте! Зашел на http:// http://www.google.com/fusiontables/Home и не обнаружил там кнопки Create Table.. Обыскал весь поисковик Google, и пришел к выводу что этот сервис более не доступен? http://groups.google.com/group/fusion-tables-users-group/browse_thread/thread/8cc0dc8c80da6dcf
В комментариях по ссылке говориться, что теперь создание таблиц Fusion Tables перенесены в Google Docs. Нужно перейти по адресу docs.google.com, затем Создать (Create) -> Fusion Table (beta).
Класс!!! Спасибо вам огромное!
Добрый день!
Сейчас ID таблицы выглядит не в виде 6 цифр, а виде набора символов. Подскажите как тогда созданную в Fusion Tables карту можно отобразить используя API Google Maps v3. Как я понял нужно использовать encid parameter? куда его нужно применить (пример)? Спасибо!
Вам поможет ссылка.
Определить ID таблицы можно выбрав в меню File пункт About, нам нужен параметр Numeric ID
Дело в том что если вы сейчас создадите с помощью FT таблицу и выберите в меню File пункт About, то Вы не увидите там id таблицы, там есть только «encripted ID». И я просто не могу никак разобраться как мне наложить созданный слой на основании «encripted ID». В вашем примере вы обращаетесь к таблице через шестизначный numeric ID. Немогли бы Вы пожалуйста привести пример наложения слоя через encripted ID.
Заранее спасибо!
Разобрался как наложить слой с помощью FT через encripted ID! Спасибо Вам огромное, очень помогли!!!
подскажите пожалуйста еще несколько вопросов:
1. возможно ли выводить данные из excel на карту, так чтобы не нужно было щелкать по точке для того чтобы увидеть цифры, а чтобы эти цифры отображались постоянно?
2. как реализовать выбор даты, например выбираю дату и вижу цифры за этот день?
3. возможно ли выводить на карту график, который до этого был построен в google disk, чтобы он просто в углу экрана висел?
еще раз спасибо!