0

アイコンは表示されますが、選択ドロップダウン メニューが機能しません...

選択メニューはクエリを実行することになっており、結果のマップはマーカー アイコンでスタイル設定されていることが想定されています。

<!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>
4

1 に答える 1