table and geomap using fusion table

208 views
Skip to first unread message

sk

unread,
May 26, 2012, 6:18:24 AM5/26/12
to google-visua...@googlegroups.com
hi im trying to display table,geomap in one page by using fusion table data
plz correct me,if i made any error in thd code




<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer Styling</title>


  <script type="text/javascript">



    function drawMap() {

      var india = new google.maps.LatLng(21.7679, 78.8718);

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: india,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

    var  layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'location',
          from: '4033136'
        },
        styles: [{
          polygonOptions: {
fillColor: "#FFFF00",
            fillOpacity: 0.3
          }
        }]
      });

      layer.setMap(map);
    }
    function drawTable() {
       var query = "SELECT   FROM '4033136'";
       var data = document.getElementById('data').value;
       if (data) {


     query += " WHERE 'state' = '" + data + "'";
      }
       var queryText = encodeURIComponent(query);
       var gvizQuery = new google.visualization.Query(

       gvizQuery.send(function(response) {
         var table = new google.visualization.Table(document.getElementById('visualization'));
         table.draw(response.getDataTable(), {showRowNumber: true});
       }
       table.draw();
     }
   function drawVisualization(){
   drawMap();
   drawTable();
   }
google.maps.event.addDomListener(window,'load',drawVisualization);

   // google.setOnLoadCallback(drawVisualization);
       </script>
   </head>
   <body onload="drawMap()">
   <table>
         <tr valign="top">
         <td style="width: 50%;">
         <div id="map_canvas" style="height: 950px; width: 750px; margin: 15px"></div>
         </td>
         <td>
       <div id="data" style="align: center; width: 700px; height: 300px;">
     </div>
      </td>
       </tr>
     </table>
     <div id="visualization" style="align: center; width: 700px; height: 300px;" ></div>
   </body>
 </html>





MC Get Vizzy

unread,
May 28, 2012, 5:16:15 AM5/28/12
to google-visua...@googlegroups.com
What is the problem?






--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/4EbsMLdYVToJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

sk

unread,
May 28, 2012, 12:15:15 PM5/28/12
to google-visua...@googlegroups.com


On Monday, May 28, 2012 2:46:15 PM UTC+5:30, MC Get Vizzy wrote:
What is the problem?




the problem is unable to dispaly those,please check the code once

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/4EbsMLdYVToJ.
To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

sindhu sk

unread,
May 29, 2012, 7:16:56 AM5/29/12
to google-visua...@googlegroups.com
i'm unable display that

Jinji

unread,
May 30, 2012, 8:50:14 AM5/30/12
to google-visua...@googlegroups.com
Did you try opening the debugger (such as Firebug for Firefox, or DevTools for Chrome) and see what errors you have?

asgallant

unread,
May 30, 2012, 10:22:20 AM5/30/12
to google-visua...@googlegroups.com
There are a handful of problems here:

1) you don't have Google's jsapi script tag:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

2) you don't load the visualization API; you need:
google.load('visualization', '1', {packages: ['corechart']}); 

3) you commented out the load callback, this needs to be un-commented out:
google.setOnLoadCallback(drawVisualization);​

4) you need to delete the 'load' event listener:
google.maps.event.addDomListener(window,'load',drawVisualization); 

5) there are syntax errors in the drawTable function, fix with this:
function drawTable() {
    var query = "SELECT   FROM '4033136'";
    var data = document.getElementById('data').value;
    if (data) {
        query += " WHERE 'state' = '" + data + "'";
    }
    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0ArFGfpB6duBGdFBJNVI1c3liaXd0c3l3UVNFMmZoMEE&pli=1#gid=0' + queryText);

    gvizQuery.send(function(response) {
        var table = new google.visualization.Table(document.getElementById('visualization'));
        table.draw(response.getDataTable(), {
            showRowNumber: true
        });
    }); // you were missing the closing parenthesis here; the extra table.draw() call doesn't do anything as table is out of scope
}

function drawVisualization() {
    drawMap();
    drawTable();
}​ 
Reply all
Reply to author
Forward
0 new messages