Я использую эту ссылку для взаимодействия карт Google с выбором таблицы.
В приведенном ниже коде это действительно взаимодействует, когда я выбираю указанную строку c в таблице и когда Я нажал на маркер. Это всплывающее окно. Но я хотел бы открыть информационное окно, когда я щелкаю выбранную строку таблицы. Я не знаю, как сделать всплывающее окно infoWindow, когда я нажимаю на таблицу и указываю строку c для содержимого информационного окна.
PS // что если я щелкну по таблице, а затем открою информационное окно, отличное от выбранного значка маркера на карте.
Редактировать // [ссылка] (https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=fr#overview) Я нашел кластер маркера. В этом случае, как применить кластеризацию маркеров для применения.
Это менее важно, но сначала нужно исправить. Пожалуйста помоги!
// В заключение, как я могу добавить маркер с InfoWIndow и кластеризацию маркеров на карте визуализации Google с приборной панелью.
function drawDashboard(rows) {
var data = google.visualization.arrayToDataTable(rows, false);
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
};
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var acPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'countryPicker_div',
'options': {
'filterColumnIndex': 2,
'ui': {
'width': 200,
'selectedValuesLayout':'below',
'caption':'Location',
'labelStacking': 'vertical',
'label': '',
'allowTyping': false,
'allowMultiple': true,
}
}
});
var statePicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'statePicker_div',
'options': {
'filterColumnIndex': 3,
'ui': {
'selectedValuesLayout':'below',
'caption':'Station',
'labelStacking': 'vertical',
'label': '',
'allowTyping': false,
'allowMultiple': true,
}
}
});
var nameFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'part_div',
'options': {
'filterColumnIndex': 4,
'matchType' : 'any',
'ui': {
'label':'',
}
}
});
google.visualization.events.addListener(nameFilter, 'ready', function () {
$('.google-visualization-controls-stringfilter input').prop('placeholder', 'Name');
});
var mapChart = new google.visualization.ChartWrapper({
'chartType': 'Map',
'containerId': 'map_div',
'options': {
'allowHtml': true,
'useMapTypeControl': true,
'showLine' : true,
'mapType':'terrain',
'showInfoWindow': true,
'enableScrollWheel' : true,
'tooltip': { isHtml: true },
},
'view': {
'columns': [0, 1, 8] // row [8] for infowindow
},
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
'width':'100%', 'allowHtml': true,
'showRowNumber': false,
'page': 'enable',
'pageSize': 15,
'pagingSymbols': {'prev': 'prev', 'next': 'next'},
'pagingButtonsConfiguration': 'auto',
},
'view': {
'columns': [2, 3, 4, 5, 6, 7]
},
});
dashboard.bind(acPicker,statePicker);
dashboard.bind(statePicker,mapChart);
dashboard.bind(statePicker,table);
dashboard.bind(nameFilter,table);
dashboard.bind(nameFilter,mapChart);
dashboard.draw(data);
google.visualization.events.addListener(dashboard, 'ready', function()
{
google.visualization.events.addListener(table, 'select', function()
{ mapChart.getChart().setSelection(table.getChart().getSelection()); });
google.visualization.events.addListener(mapChart, 'select', function()
{ table.getChart().setSelection(mapChart.getChart().getSelection()); });
});
}
<div style="align: left;" id="dashboard_div" style="margin-top: 1em;">
<div id="map_div"></div>
<div class="divTable filterpanel">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" id="countryPicker_div"></div>
<div class="divTableCell" id="statePicker_div"></div>
<div class="divTableCell" id="part_div"></div>
</div>
</div>
</div>
</div>
<div id="table_div" style="padding-top: 30px;height:500px;"></div>