Чи можна вибрати, які дані відображатимуться в інформаційних вікнах Карт Google, за допомогою прапорців? - javascript, jquery, html, google-maps-api-3, google-fusion-таблиці

Мені було цікаво, чи можна вибрати дані / інформацію, які ви хотіли б відображати в інформаційному вікні Карт Google на основі вибору прапорця?

Я знаю, що ви можете вибрати шари за допомогою прапорців, які можуть мати власне інформаційне вікно, але це буде обмежено 5 шарами, що обмежує кількість вибору до 5.

Я думав, що якщо ви створили індивідуальну інформаціюПотім у вікні ви зможете вказати лише дані, що стосуються цього вибору, і приховати інші дані, які зазвичай відображаються у вікні. Ви також повинні масштабувати вікно в залежності від кількості вибору, так що, якщо один був вибраний з 10, він не мав би багато пробілів.

Ура!

Відповіді:

Якщо ви подивитеся на джерело для це Сторінка, яку ви бачите, я динамічно створюю вміст InfoWindow зі змісту своєї таблиці Fusion, щоб ви могли будувати свій вміст динамічно з цього ж поля.

Див. Функцію windowControl() у цьому коді.

Зауважте також, що ви повинні придушити стандартні інформаційні вікна, якщо ви робите те, що я пропоную, див. Тут:

    layers[id] = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
query: {
select: "col2",
from: tableids[id],
},
});

подобається це

Додано пізніше

В основному, тут є код для створення шарів карти та таблиць Fusion та придушення вікна за замовчуванням:

map = new google.maps.Map(document.getElementById("googft-mapCanvas"), {
center: new google.maps.LatLng(52.4, -1.3),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

// One single re-useable InfoWindow
infoWindow = new google.maps.InfoWindow();

for(id=0;id<tableids.length;id++){
layers[id] = new google.maps.FusionTablesLayer({
map: map,
suppressInfoWindows: true,
query: {
select: "col2",
from: tableids[id],
},
});

google.maps.event.addListener(layers[id], "click", function(e) {
windowControl(e, infoWindow, map);
});
}

Потім, пізніше у вашому коді, ви фактично заповните InfoWindow, коли він з'явиться:

// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {

// Extract various columns from Fusion Table
var Ref =e.row["Reference"].value;
var Date=e.row["Date"].value;
var Col =e.row["Collection"].value;

// Now build HTML we want in our InfoWindow
var HTML;
HTML = "<div class="googft-info-window">";
HTML+= "<strong>Reference</strong>: " + Ref  + " ";
HTML+= "<strong>Date</strong>: " + Date + "&nbsp;&nbsp;";

// AJAX check if image and thumb are available on Skyscan webserver.
// If both present, offer click through to zoomable image.
// If either missing, suggest user contact Skyscan
if(ImageAndThumbOnServer(Col,Ref)==1){

HTML+= "<a target="_blank" href="http://www.skyscan.co.uk/cgi-bin/Zoomable.pl?&date=" + Date + "&ref=" + Ref + "&col=" + Col + "">Click to view image</a>";

} else {
HTML += "Image not yet scanned contact Skyscan";
}
HTML +="</div>";

infoWindow.setOptions({
content: HTML,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}