アイコンは表示されますが、選択ドロップダウン メニューが機能しません...
選択メニューはクエリを実行することになっており、結果のマップはマーカー アイコンでスタイル設定されていることが想定されています。
<!DOCTYPE html>
<html>
<head>
<style>
#visualization {
height: 660px;
width: 900px;
}
#legend {
background: lightsteelblue;
padding: 10px;
margin: 5px;
font-size: 10px;
font-family: Arial, sans-serif;
border: 1px black;
}
</style>
<link href="/apis/fusiontables/docs/samples/style/defult.css"
rel="stylesheet"type="text/css">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(33.56,-112),
zoom: 10,
zoomControl: true,
zoomControlOptions: {
position:google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position:google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: "col7",
from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc"
},
styles: [
{where: "'Type'='Boarding'",markerOptions: {iconName: "stable"}},
{where: "'Type'='Grooming'",markerOptions: {iconName: "salon"}},
{where: "'Type'='Hospitals'",markerOptions: {iconName: "hospitals"}},
{where: "'Type'='Shelters'",markerOptions: {iconName: "museum"}},
{where: "'Type'='Stores'",markerOptions: {iconName: "shopping"}},
],
map:map,
});
function changeMap() {
var whereClause;
var searchString =
document.getElementById('search-string').value.replace(/'/g, "\\'");
if (searchString != '--Select--')
{whereClause = "'Type' = '" + searchString + "'";}
layer.setOptions({
query:
{select: "col7",
from: "1sOUTP43jvD5rEOR6nL-ft0mikP234DWGSyTARzc",
where: whereClause}
});
}
// Create the legend and display on the map
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Icons:</h3>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/boarding1.png"
width="24"height="25">Boarding</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/grooming1.png"
width="24"height="25">Grooming</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/hospitals1.png"
width="24"height="25">Hospitals</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shelters1.png"
width="24"height="25">Shelters</p>');
content.push('<p><img src="http://www.public.asu.edu/~ajusic1/shopping1.png"
width="24"height="25">Stores</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<label class="layer-wizard-search-label">
<b><label>SERVICES:</label></b>
<select id="search-string" onchange="changeMap(this.value);">
<option value="--Select--">--Select--</option>
<option value="Boarding">Boarding</option>
<option value="Grooming">Grooming</option>
<option value="Hospitals">Hospitals</option>
<option value="Stores">Stores</option>
<option value="Shelters">Shelters</option>
</select>
</label>
</div>
<div id="map-canvas" style="background-color:#EEEEEE;height:660px;
width:80%;float:left;">
Content goes here
</div>
</body>
</html>