ドロップダウン メニューからの選択に基づいて、tableId と可視マップ マーカーを交換する FusionTables レイヤード マップを作成しました。レイヤーを選択した後、各レイヤーの infoWindow プロパティをカスタマイズするのに問題があります。いくつかのリファレンス ページとチュートリアルを調べた後、infoWindow のスタイルを設定しようとしましたが、infoBox オプションの実装も失敗しました。(FusionTables ワークスペース内で infoWindow のスタイルを設定しましたが、これらのスタイルはインポートされません。) ここまでコードを添付しました。a.) ウィンドウの内容をカスタマイズする (ウィンドウ内に表示される FusionTable の列と後続のデータを選択する、b.) ウィンドウ自体のスタイルを設定する
どんな助けでも大歓迎です - ありがとう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Layered Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<style>
#map-canvas { width:1250px; height:600px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="/path/to/infobox.js" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function initialize() {
var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';
var locationColumn = 'Lat/Long';
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(40, 265),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId
}
});
google.maps.event.addDomListener(document.getElementById('option'),
'change', function() {
updateMap(layer, tableId, locationColumn);
});
}
function updateMap(layer, tableId, locationColumn) {
var option = document.getElementById('option').value;
if (option) {
switch(option){
case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';
break;
case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';
break;
default:
case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId
break;
}
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
},
map: map,
styleId: 2,
templateId: 2,
});
} else {
layer.setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<label>Layer:</label>
<select id="option">
<option selected>--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>