Добавление вкладок в информационные окна (API Googlemap, таблицы Google Fusion - импорт kml)
Я чувствую, что подхожу близко, но что-то здесь не хватает. Мои исходные (полигональные) данные находятся в таблицах слияния, и я хотел бы создать информационное окно с двумя вкладками и вызвать в него данные из таблицы. Видел кучу примеров (см .:https://fusion-tables-users-group.googlegroups.com/attach/ec0975e69edcfb96/infowindow_tabs_5.html?pli=1&view=1&part=4 для одного), поэтому я надеюсь, что это выполнимо ...
Мой код (из функции инициализации) ниже. Прямо сейчас я пытаюсь специально запросить значения (используя e.row) из поля 'ROOF_TOTAL', чтобы поместить их на вкладку 1 (для целей начального тестирования).
function initialize() {
// set the geocoder variable equal to the instance of the google maps geocoder object
geocoder = new google.maps.Geocoder();
//declare variables for map set up
map = new google.maps.Map (document.getElementById('hatfield_map'), {
center: new google.maps.LatLng(42.37098, -72.59818),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Set up a styles array to fill in color for the different polygon types based on the query
// of the value 'TYPE' in the FusionTable...
var layer = new google.maps.FusionTablesLayer({
query:{
select: 'geometry',
from: 'TABLE-ID'
},
// suppressInfoWindows: true
// Set up the stroke color and opacity of all polygons...
styles: [{
polygonOptions: {
strokeColor: '#00ffff',
strokeOpacity: .4,
strokeWeight: .5
}]
suppressInfoWindows: true
});
var infowindow = new google.maps.InfoWindow({
});
// create a custom infowindow, Add a click listener that creates a new infowindow
google.maps.event.addListener(layer, "click", function(e) {
'<ul style="font-size:12px;">' +
'<li><a href="#tab-1"><span>Potential Power Capacity</span>
</a></li>' +
'<li><a href="#tab-2"><span>Two</span></a></li>' +
'</ul>' +
'<div id="tab-1">' +
'<p>' + e.row['TOTAL_ROOF'].value + " "+ '</p>' +
'</div>';
infowindow.setContent(contentString);
infowindow.setPosition(e.latLng);
//Infowindow-opening event handler
infowindow.open(map);
$(".tabs").tabs();
});
layer.setMap(map);
}