Update Fusion Tables example for latest API version

examples/fusiontables.html

@@ -20,11 +20,14 @@
         <div id="map" class="smallmap"></div>
         <div id="docs">
             <p>
-                Google Fusion Tables can be used to store features, and access them using SQL-type commands over HTTP. Tables can be made public, in which case no authorization is needed to read them. Geometries can be stored in Location columns in KML format. The default output is a CSV dump of each table row/column selected. Multi-line CSV files are not easy to parse in Javascript, but by adding a jsonCallback parameter to the HTTP command, the output will be a JSON object with the geometry as GeoJSON. With a custom read method, this example parses the geometry for each row, storing the other columns as feature attributes. You can of course add a 'where' clause to the SQL statement or change the column names to limit the data retrieved. Point geometries can also be stored in Latitude/Longitude columns, and the script could easily be modified to use those instead.
+                Google Fusion Tables can be used to store features, and access them using SQL-type commands over HTTP. Tables are accessed using an authorization key; create/update/delete of tables requires an OAuth2 token, but tables can be public, in which case a simple apikey is all that's needed to read them. Geometries can be stored in Location columns in KML format, but the default output is a JSON object with the geometry as GeoJSON. With a custom read method, this example parses the geometry for each row, storing the other columns as feature attributes. You can of course add a 'where' clause to the SQL statement or change the column names to limit the data retrieved. Point geometries can also be stored in Latitude/Longitude columns, and the script could easily be modified to use those instead.
             </p>
             <p>
                 View the <a href="fusiontables.js" target="_blank">fusiontables.js</a>
-                source to see how this is done. <a href="https://www.google.com/fusiontables/DataSource?docid=1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8">Table used</a>
+                source to see how this is done. You will need to get your own apikey from <a href="https://code.google.com/apis/console">Google's API Console</a> for this to function on your domain.
+            </p>
+            <p>
+                <a href="https://www.google.com/fusiontables/DataSource?docid=1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8">Table used</a>. <a href="https://developers.google.com/fusiontables/docs/v1/using">Fusion Tables Developers Guide</a>
             </p>
         </div>
         <script src="fusiontables.js"></script>

examples/fusiontables.js

@@ -1,3 +1,6 @@
+// change this to your api key
+var apikey = "AIzaSyD_1zzMAoZjuP-m4LyhieuYmqiVJTEajyI";
+
 var map = new OpenLayers.Map({
     div: "map",
     layers: [
@@ -6,21 +9,24 @@ var map = new OpenLayers.Map({
             projection: new OpenLayers.Projection("EPSG:4326"),
             strategies: [new OpenLayers.Strategy.Fixed()],
             protocol: new OpenLayers.Protocol.Script({
-                url: "https://www.google.com/fusiontables/api/query",
+                url: "https://www.googleapis.com/fusiontables/v1/query",
-                params: {sql: "select * from 1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8"},
+                params: {
+                    sql: "select * from 1g5DrXcdotCiO_yffkdW0zhuJk0a1i80SPvERHI8",
+                    key: apikey
+                },
                 format: new OpenLayers.Format.GeoJSON({
                     ignoreExtraDims: true,
                     read: function(json) {
                         var row, feature, atts = {}, features = [];
-                        var cols = json.table.cols; // column names
+                        var cols = json.columns; // column names
-                        for (var i = 0; i < json.table.rows.length; i++) {
+                        for (var i = 0; i < json.rows.length; i++) {
-                            row = json.table.rows[i];
+                            row = json.rows[i];
                             feature = new OpenLayers.Feature.Vector();
                             atts = {};
                             for (var j = 0; j < row.length; j++) {
                                 // 'location's are json objects, other types are strings
                                 if (typeof row[j] === "object") {
-                                    feature.geometry = this.parseGeometry(row[j]);
+                                    feature.geometry = this.parseGeometry(row[j].geometry);
                                 } else {
                                     atts[cols[j]] = row[j];
                                 }
@@ -33,8 +39,7 @@ var map = new OpenLayers.Map({
                         }
                         return features;
                     }
-                }),
+                })
-                callbackKey: "jsonCallback"
             }),
             eventListeners: {
                 "featuresadded": function () {