CODEWITHSUNDEEP
google-mapsgoogle-fusion-tables
Jerry Vermanen
Jerry Vermanen

Reputation: 297

Google Fusion Tables query: Select All option

I'm stuck with the final touch on my Fusion Tables map. How do I have to change my code so I can get a Select All option in my query?

I found this piece of code...

https://developers.google.com/fusiontables/docs/samples/change_query

And put it in my own code. But what am I doing wrong?

<!DOCTYPE html>
<html>
  <head>
 <title>Aarbevingen 1900-2012 (+1000 dodelijke slachtoffers)</title>
  <style>
    #map-canvas { width:1000px; height:600px; }
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer;
    var layerl1;
    var layerl2;
    var layerl3;  

    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 20),
        zoom: 2
      });
      var style = [
        {
          featureType: 'all',
          elementType: 'all',
          stylers: [
            { saturation: -99 }
          ]
        }
      ];
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style');

      layer = new google.maps.FusionTablesLayer({
        query: {
          select: "'Locatie'",
          from: 3555344
        },
        map: map
        });

      layer11 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: 3556478
        },
        clickable: false,
        map: map
      });

      layer12 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: 3556541
        },
        clickable: false,
        map: map
      });

      layer13 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: 3556712
        },
        clickable: false,
        map: map
      });

       google.maps.event.addDomListener(document.getElementById('search-string-10'),
            'change', function() {
              updateMap(layer);
        });

var legendDiv = document.createElement('DIV');
  var legend = new Legend(legendDiv, map);
  legendDiv.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);      

    }

   function changeMap10(layer) {
        var searchString = document.getElementById('search-string-10').value;
        if (searchString) {
          layer.setOptions({
            query: {
              select: "'Locatie'",
              from: 3555344,
              where: "search-string-10 = '" + searchString + "'"
            }
          });
        } else {
          layer.setOptions({
            query: {
              select: "'Locatie'",
              from: 3555344
            }
          });
        }
      }   

function Legend(controlDiv, map) {
  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.title = 'Legend';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control text
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '11px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';

  // Add the text
  controlText.innerHTML = '<b>Legenda</b><br />' +
    '<div style="background-color: #ff0000; height: 10px; width: 10px; margin: 2px; float: left;"></div>> 100.000 doden<br />' +
    '<div style="background-color: #ffff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>10.000-100.000 doden<br />'+
    '<div style="background-color: #00ff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>1.000-10.000 doden<br />';
  controlUI.appendChild(controlText);
}    

    google.maps.event.addDomListener(window, 'load', initialize);


  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Dodental</label>
        <select id="search-string-10">
        <option value="">--Selecteer--</option>
        <option value="1.000-10.000">1.000-10.000</option>
        <option value="10.000-100.000">10.000-100.000</option>
        <option value="> 100.000">> 100.000</option>
      </select>
    </div>
  </body>
</html>

Upvotes: 1

Views: 1224

Answers (2)

Odi
Odi

Reputation: 6916

I put your code in jsFiddle, with my minor improvement: http://jsfiddle.net/odi86/hqm5k/

First of all: you should return usable values from your select-list, so I changed that:

<select id="search-string-10">
  <option value="">All</option>
  <option value="1000">1.000-10.000</option>
  <option value="10000">10.000-100.000</option>
  <option value="100000"> 100.000</option>
</select>

To make things clear I added a new entry for "all" records, but it's basically the same as the first one returning no value.

And then you can use this value in your query:

EDIT: I changed this function to set the where condition to an empty string if no specific option is selected

function changeMap10(layer) {
    var searchString = document.getElementById('search-string-10').value;
    var whereCondition = '';
    if (searchString) {
        whereCondition = "zoekveld = '" + searchString + "'";
    }
    layer.setOptions({
        query: {
          select: "'Locatie'",
          from: 3555344,
          where: whereCondition 
        }
    });
 }

The if/else is not necessary, you can use the same query with a default value.

Finally I changed the event listener to call your changeMap10() function instead of the updateMap() function from the example:

google.maps.event.addDomListener(document.getElementById('search-string-10'),
    'change', function() {
      changeMap10(layer);
});

Upvotes: 2

Eric Bridger
Eric Bridger

Reputation: 3794

Odi is correct. There are some more examples at this answer: https://stackoverflow.com/a/9401345/1211981 Also, to get all the records you can use an empty where clause:

where: ""

Also, numbers should not require quotes so the where should probably be:

where: "Dodental > " + searchString,

Upvotes: 0

Related Questions