Je možné vybrať, ktoré údaje sa majú zobrazovať v okne s informáciami o Mapách Google pomocou začiarkavacích políčok? - javascript, jquery, html, google-maps-api-3, google-fusion-tables

Zaujímalo by ma, či je možné vybrať, aké údaje / informácie chcete zobraziť v okne s informáciami o Mapách Google na základe výberu začiarkavacieho políčka?

Viem, že môžete vybrať vrstvy pomocou začiarkavacích políčok, ktoré môžu mať svoje vlastné informačné okno, ale bude to obmedzené na 5 vrstiev, čím sa obmedzí počet výberov na 5.

Myslel som si, že keď vytvoríte vlastné informáciepotom by ste sa mohli rozhodnúť, že zobrazia iba údaje, ktoré sa týkajú daného výberu, a skryjú ostatné údaje, ktoré sa bežne zobrazujú v okne. Tiež by ste potrebovali zmeniť mierku okna v závislosti od počtu výberov, takže ak ste vybrali z 10, nebolo by to veľa prázdneho miesta.

Na zdravie!

odpovede:

Ak sa pozriete na zdroj pre toto môžete vidieť, že obsah InfoWindow dynamicky zostavujem z obsahu mojej tabuľky Fusion, aby ste mohli dynamicky vytvárať obsah zo zaškrtávacieho políčka.

Pozrite si funkciu windowControl() v tomto kóde.

Všimnite si tiež, že musíte potlačiť štandardné infoWindows, ak robíte to, čo navrhujem, nájdete tu:

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

ako toto

PRIDANÉ VIAC

V podstate je tu kód na vytvorenie vrstiev mapy a Fusion Table a potlačenie predvoleného okna:

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);
});
}

Potom, neskôr v kóde, skutočne vyplníte InfoWindow tak, ako sa objaví:

// 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);
}