Google Maps Api/ Fusiontables: Mapping from Listbox

StackOverflow https://stackoverflow.com/questions/21106012

문제

Below is a Google Map with a FusionTable layer. Included is a listbox with thousands of selection options. For brevity's sake, I have only included a few options. A user may not want to see all of the mapped locations, so they may choose one or many locations to be moved to the right listbox , where, upon being pressed, a button will map the chosen locations. The problem is that when multiple selections are moved to the right, the button only maps the top location in the box, or if you specifically highlight one of the many, it will map that. Obviously I need them all mapped. Please lend some guidance so I can get all of these mapped.

<!DOCTYPE html>
<html>
  <head>
   <style>
#map-canvas { width:940px; height:625px; }
.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 type="text/javascript">
var map;
var layer_0;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(47.645036570200254, -100.426025390625),
    zoom: 7
  });
  var style = [
    {
      featureType: 'poi',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'transit',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];
  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });
  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');
  layer_0 = new google.maps.FusionTablesLayer({
    map: map
  });
}
function changeMap_0() {
  var whereClause;
  var searchString = document.getElementById('destSelect').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause = "'Well Name' = '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "'geometry'",
      from: "1xDlCWWj4WMCadzaua5bBss3UNLprGCnsS3H4vt0",
      where: whereClause
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>          

Click below buttons to move selected options right or left.<br>
<table>
<tbody><tr>
<td>
<select id="sourceSelect" size="10" multiple="">
<option value="1-H CHLOE  20-17">1-H CHLOE  20-17</option>
      <option value="101 FEDERAL  21X-24">101 FEDERAL  21X-24</option>
      <option value="13 MILE SWD  1">13 MILE SWD  1</option>
      <option value="2-BRENDEN  9-33 1-M">2-BRENDEN  9-33 1-M</option>
      <option value="20002 JV-P AGATE     1">20002 JV-P AGATE     1</option>
      <option value="20002 JV-P AGATE     2">20002 JV-P AGATE     2</option>
      </select>
</td>
<td>
    <button onclick="listboxMoveacross('sourceSelect', 'destSelect');">&gt;&gt;     </button>  <br>
    <button onclick="listboxMoveacross('destSelect', 'sourceSelect');">&lt;&lt;    </button>
</td>
<td>
<select id="destSelect" size="10" multiple="">
</select>
</td>
</tr>
</tbody></table><button id="mapbutton" onClick="changeMap_0(map);">Map     Locations</button>


<script>
function listboxMoveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);

for(var count=0; count < src.options.length; count++) {

    if(src.options[count].selected == true) {
            var option = src.options[count];

            var newOption = document.createElement("option");
            newOption.value = option.value;
            newOption.text = option.text;
            newOption.selected = true;
            try {
                     dest.add(newOption, null); //Standard
                     src.remove(count, null);
             }catch(error) {
                     dest.add(newOption); // IE only
                     src.remove(count);
             }
            count--;
    }
  }
}
</script>
</body>
</html>
도움이 되었습니까?

해결책

You must iterate over the options of #destSelect and create a IN()-condition based on the values of these options:

function changeMap_0() {
  var query={
        select: "'geometry'",
        from: "1xDlCWWj4WMCadzaua5bBss3UNLprGCnsS3H4vt0"
      },
      values=[],
      options=document.getElementById('destSelect').options;

  if(!options.length){
     //no options added, remove the layer
     //and leave the function
    layer_0.setMap(null);
    return;
  } 

  //collect the values  
  for(var i =0;i<options.length;++i){
    values.push(options[i].value.replace(/'/g, "\\'"));
  }
  //create where-clause
  query.where="'Well Name' IN('"+values.join("','")+"')";

  //set the options  
  layer_0.setOptions({query:query,map:map}); 
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top