fusion table with sidebar - error in query

问题

I tried to make a map with a sidebar by using a fusion table. I adapted the codes I found on stackoverflows.com but I see an error message : Error in query: Could not parse query. What is wrong ? The codes are as below:

      <!DOCTYPE html>
     <html>
   <head>
     <title>Google Maps JavaScript API v3 Example: Map Simple</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <style>
       html, body, #map {
         margin: 0;
         padding: 0;
         height: 100%;
       }
     </style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript" >
var tableId = "1zELV0V48On-5c8aqKM_PD2cMQtfy4hByyR5o8sQ";

google.load('visualization', '1', {'packages':['table']});
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
var istanbul = new google.maps.LatLng(41.049, 28.991);

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

var FTlayer = new google.maps.FusionTablesLayer({query:{from:tableId}, map:map});

var queryStr = "SELECT hotels, location, phone, url FROM "+tableId+" ORDER BY hotels";
document.getElementById('info').innerHTML += queryStr +"<br>";
var queryText = encodeURIComponent(queryStr);

  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

query.send(getData);
}

function getData(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
var dt = response.getDataTable();  

var side_html = '<table style="border-collapse: collapse" border="1" \
                   cellpadding="5"> \
                   <thead> \
                     <tr style="background-color:#e0e0e0"> \
                       <th>Hotels</th> \
                     </tr> \
                   </thead> \
                   <tbody>';
document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>";
for (var i = 0; i < dt.getNumberOfRows(); i++) {
  var  location = dt.getValue(i,1);
  var  phone = dt.getValue(i,2);
  var hotels = dt.getValue(i,0);
  var url = dt.getValue(i,3);


var pt = new google.maps.LatLng(lat, lng);

var html = "<strong>" + hotels + "</strong><br />";

  side_html += '<tr> \
                  <td><a href="javascript:myclick(' + i + ')">' + hotels + '</a></td> \
                </tr>';


  createMarker(pt, html);

}

side_html += '</tbody> \
            </table>';
document.getElementById("side_bar").innerHTML = side_html;
}


function createMarker(point,info) {
var iconURL = 'tools/pinred.png';               var iconSize = new google.maps.Size(29,60);
var iconOrigin = new google.maps.Point(0,0);    var iconAnchor = new google.maps.Point(15,60);

var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

var shadowURL = 'tools/pinred.png';           var shadowSize = new google.maps.Size(63, 60);
var shadowOrigin = new google.maps.Point(0, 0); var shadowAnchor = new google.maps.Point(15, 60);

var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);

var iconShape = [18,0,20,1,22,2,23,3,24,4,25,5,26,6,27,7,27,8,28,9,28,10,28,11,28,12,28,13,28,14,28,15,28,16,28,17,28,18,28,19,27,20,27,21,26,22,26,23,25,24,24,25,23,26,21,27,20,28,16,29,21,31,21,32,21,33,21,34,21,35,20,36,20,37,20,38,19,39,19,40,19,41,18,42,18,43,18,44,18,45,17,46,17,47,17,48,17,49,16,50,16,51,16,52,15,53,15,54,15,55,14,56,14,57,14,58,14,59,13,59,13,58,13,57,13,56,12,55,12,54,12,53,12,52,11,51,11,50,11,49,11,48,11,47,10,46,10,45,10,44,10,43,9,42,9,41,9,40,9,39,9,38,8,37,8,36,8,35,8,34,8,33,7,32,7,31,12,29,9,28,7,27,6,26,4,25,3,24,3,23,2,22,1,21,1,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,1,9,1,8,2,7,2,6,3,5,4,4,5,3,6,2,8,1,10,0,18,0];
var myMarkerShape = {
  coord: iconShape,
  type: 'poly'
};

var myMarkerOpts = {
  position: point,
  map: map,
  icon: myIcon,
  shadow: myShadow,
  shape: myMarkerShape
};

var marker = new google.maps.Marker(myMarkerOpts);

markers.push(marker);

google.maps.event.addListener(marker, 'click', function() {
  infoWindow.close();
  infoWindow.setContent(info);
  infoWindow.open(map,marker); 
});
}

function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
</script>

   <body onload="initialize();">
<table border="1"><tr><td>
     <div id="map_canvas" style="width:600px;height:500px;"></div>
     </td><td>
     <div id="side_bar" style="width:200px;height:300px; overflow: auto;"></div>
</td></tr></table>

<div id="info"></div>
   </body>
 </html>

回答1:

Your query is wrong, you are querying for:

var queryStr = "SELECT hotels, location, phone, url FROM "+tableId+" ORDER BY hotels";

The columns in your table have different names (the first character is upper case).

This works for me:

var queryStr = "SELECT Hotels, Location, Phone, Url FROM "+tableId+" ORDER BY Hotels";

But then you will have other problems as your locations don't have coordinates (lat and lng are undefined), you will need to geocode them externally and add a column or two for the geographic coordinates for this to work (you can try geocoding the location on click, but that is not the best way to do it).

proof of concept for geocoding on click - issue: some of the addresses geocode to different locations than are in the FusionTable or don't geocode at all.

The phone number is null because in your table you have that column defined to be of type number, but it contains text.

proof of concept using lat/lng columns in (a copy of) your new table (changed the "phone" column from number to text).

来源：https://stackoverflow.com/questions/18945948/fusion-table-with-sidebar-error-in-query

标签

google-maps-api-3

google-fusion-tables