Я почти уверен, что знаю, в чем проблема с моим кодом, но я не уверен, как это исправить.
У меня есть таблица Google Fusion, которую я запрашиваю, чтобы создать меню с радиокнопки в нем.Карта, которая представляет собой таблицу Google Fusion, визуализированную как карта Google, также находится на странице.
Когда я жестко кодирую пару радиокнопок и нажимаю на них, элементы отображаются на карте на основе идентификатора элемента.Я использовал google.maps.event.addDomListener, чтобы заставить эту магию работать.Так что это прекрасно работает.
Теперь я хочу сделать еще один шаг и фактически извлечь данные из таблицы Google Fusion, чтобы она отображала самый актуальный список элементов, которые у меня есть в моей таблице.Итак, я использую jQuery и команду $ .get для получения фида в jsonp.Я вывожу 2 столбца данных и динамически создаю переключатели, присоединяя их к внутренней строке HTML - присоединяя ее к div.
Итак, я думаю, что проблема связана с DOM, ноя не уверен, как заставить кнопки радио загружаться сначала, а затем загружать в карту, чтобы все было доступно для событий карт, так что щелчок радио действительно что-то делает.
Вопрос в том, какие модификации мне нужнычтобы мои динамически сгенерированные переключатели работали с моей картой Google Fusion?
Вот мой код JavaScript:
function initialize() {
var table = ########;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(30.6, -108.1),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, table, map);
getData(table);
google.maps.event.addDomListener(document.getElementById('num1'),
'click', function() {
filterMap(layer, table, map);
});
google.maps.event.addDomListener(document.getElementById('num2'),
'click', function() {
filterMap(layer, table, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, table, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: "State",
from: table,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var bugs = document.getElementsByName('bug');
for (var i = 0, bug; bug = bugs[i]; i++) {
if (bug.checked) {
var BugName = bug.value.replace(/'/g, '\\\'');
filter.push("'" + BugName + "'");
}
}
var where = '';
if (filter.length) {
where = "'BugName' IN (" + filter.join(',') + ')';
}
return where;
}
// build the menu
function getData(table) {
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
// write your SQL as normal, then encode it
var query = "SELECT BugName, bugAbbr FROM " + table + " LIMIT 1";
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}
function dataHandler(d) {
// get the actual data out of the JSON object
var data = d.table.rows;
var ftdata = ['<div>'];
for (var i = 0; i < data.length; i++) {
ftdata.push('<input type="radio" id="'+data[i][1]+'" value="'+data[i][0]+'" name="bug">'+data[i][0]+'');
}
ftdata.push('</div>');
document.getElementById('ft-data').innerHTML = ftdata.join('');
}
google.maps.event.addDomListener(window, 'load', getData);
google.maps.event.addDomListener(window, 'load', initialize);