fusion table with sidebar - error in query

Question

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>

That means the query is bad. Check the column names against your table. — geocodezip, Sep 22 '13 at 16:35

geocodezip · Accepted Answer · 2013-10-01T07:06:35.653

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).

edited Oct 01 '13 at 07:06

answered Sep 22 '13 at 16:38

geocodezip

158,664
13
220
245

You are right. I added lat lng columns and some codes for info window. It works but there are some issues: 1- Some locations are wrong ( 16 out of 47) for example the Four seasons hotel, Cihangir otel, Swissotel : Red points are correct but when the hotel name is clicked from the sidebar, it displays the wrong location. lat and lng are displayed as 41.03344\n 28.98537\n 2- phone numbers are displayed as null You can see the page on http://istanbul.siterary.com/0test.html What can I do ? – user1729894 Sep 29 '13 at 16:33
If you added the lat/lng columns, you no longer need the geocoder. Use the coordinates from the table to place the marker and open the InfoWindow. – geocodezip Sep 29 '13 at 22:51
Sorry I didn't understand. When I add lat-lang, the map is automatically geocoded. I can't use "move the pin" option to correct the location manually. How will I place the correct markers ? – user1729894 Sep 30 '13 at 19:29
Change the values in the "lat-lang" [sic] column to be the correct place. – geocodezip Sep 30 '13 at 19:53
What table did you add the coordinates to? I don't see them in the [one you reference in your original question](https://www.google.com/fusiontables/data?docid=1zELV0V48On-5c8aqKM_PD2cMQtfy4hByyR5o8sQ#rows:id=1) – geocodezip Sep 30 '13 at 21:31
I used this one https://www.google.com/fusiontables/DataSource?docid=13hxbZXKBGmcCzxD-K1vYRTIQIL9Xu9NQuCeXqNs – user1729894 Sep 30 '13 at 21:37
Use something like [this page by John Coryat](http://maps.huge.info/pinpointaddress.htm) to adjust the coordinated of the marker so it appears in the correct place. Then use the coordinates to display the markers (and to open their associated InfoWindow from the sidebar) – geocodezip Sep 30 '13 at 22:19
1

See the additional example in my answer for working sidebar without the geocode (fix the coordinates in the column to make the locations appear where you believe is correct), working phone number. – geocodezip Oct 01 '13 at 07:06
Your table displays the correct locations. I used a copy of this table. Hotel names are displayed twice in the sidebar of the map: http://istanbul.siterary.com/0testnew.html – user1729894 Oct 01 '13 at 16:46
The hotels are listed in [your table](https://www.google.com/fusiontables/data?docid=1UpSkwuE-borjEpVqArMW4-psUV2Pl7lCo3FlUeI#rows:id=1) twice. Remove the duplicate entry. – geocodezip Oct 02 '13 at 16:22

fusion table with sidebar - error in query

1 Answers1

Linked