problem in drawing table and map using fusion tables

76 views
Skip to first unread message

sk

unread,
Jun 11, 2012, 5:17:33 AM6/11/12
to google-visua...@googlegroups.com
hi i'm trying to draw a map and table but i dont know were im doing mistake
please correct me



<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:800px; height:800px; }
  </style>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

   <script type="text/javascript">
    
    var map;
    
     var layer10;
    
     var tableid = 4070871;
 var style = [
        {
          featureType: 'road.highway',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'road.arterial',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'road.local',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'administrative.country',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'administrative.locality',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'administrative.neighborhood',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'administrative.land_parcel',
          elementType: 'all',
          stylers: [
            { visibility: 'on' }
          ]
        },
        {
          featureType: 'poi',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        },
        {
          featureType: 'transit',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ];
   
    google.load('visualization', '1', {'packages':['table']});
   
     function drawMap() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(21.7679,78.8718),
        zoom: 5
      });
     
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style');
      layer10 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
          from: '4070871'
        },
        map: map
      });
 
 }

function drawTable(){
var query = "SELECT FROM '4070871'";
        var data = document.getElementById('data').value;
if(data){
                query += " WHERE 'geometry' = '" + data + "'";
}
  var queryText = encodeURIComponent(query);
  var gvizQuery = new google.visualization.Query('https://www.google.com/fusiontables/DataSource?docid=1lQUsmOT4jO3tlaE9xIXu1A6mX-wbhxk8Eari1MI&pli=1' + queryText); 

  gvizQuery.send(function(response){
var table = new google.visualization.Table(document.getElementById('table_id'));
table.draw(response.getDataTable(),{showRowNumber: true});
});
}
}

function changeMap10() {
      var searchString = document.getElementById('search-string-10').value.replace(/'/g, "\\'");
      layer10.setOptions({
        query: {
          select: "'geometry'",
          from: 4070871,
          where: "'Type' = '" + searchString + "'"
        }
      });
    }
function drawVisualization(){
drawMap();
drawTable();
}
google.maps.event.addDomListener(window, 'load', drawVisualization);
google.setOnLoadCallback(drawVisualization);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Sector</label>
      <select id="search-string-10" onchange="ChangeMap10(this.value);">
        <option value="">--Sector--</option>
        <option value="Formally Approved">Formally Approved</option>
        <option value="In-Principle Approved">In-Principle Approved</option>
        <option value="Operational">Operational</option>
        <option value="in-Principle Approved">in-Principle Approved</option>
              </select>
    </div>
    <div id="table_id"></div>
  </body>
</html>

asgallant

unread,
Jun 11, 2012, 11:44:04 AM6/11/12
to google-visua...@googlegroups.com
I suspect the problem is the query string:

var query = "SELECT FROM '4070871'"; 

You aren't selecting any columns there.  Also, I think you want to remove the single-quotes from around the table number.
Reply all
Reply to author
Forward
0 new messages