How to get a list of strings from FusionTablesLayer and associate it with the map

Question

How to get a list of strings from FusionTablesLayer and associate it with the map

192 Views Asked by Irina Kazhamiakina At 24 May 2018 at 14:20

I have a google map built using FusionTablesLayer

How to get a list of strings from this FusionTablesLayer and associate it with the map. To click on an item from the list, a baloon was opened on the map.

Here is an example of the map http://air-in.ru/ajax/chat/test.php

This is an example of how a map should look.

<body>
<style type="text/css">
    html, body, #googft-mapCanvas {
        height: 100% !important;
        margin: 0;
        padding: 0;
        width: 100% !important;
    }
</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBxMTfLhegh_rO8w0-vRP_oKdaJOvhOUUI"></script>

<script type="text/javascript">
    function initialize() {
        var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
            (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
        if (isMobile) {
            var viewport = document.querySelector("meta[name=viewport]");
            viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
        }
        var mapDiv = document.getElementById('googft-mapCanvas');
        mapDiv.style.width = isMobile ? '100%' : '500px';
        mapDiv.style.height = isMobile ? '100%' : '300px';

        var map = new google.maps.Map(mapDiv, {
            center: new google.maps.LatLng(56.32085914650647, 62.40977352913535),
            zoom: 4,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

        layer = new google.maps.FusionTablesLayer({
            map: map,
            heatmap: { enabled: false },
            query: {
                select: "col0",
                from: "1XlnmbK0m0s4rHdadG_hkmZP-dSr2ruBzQxnMK4Uv",
                where: ""
            },
            options: {
                styleId: 2,
                templateId: 2
            }
        });


        if (isMobile) {
            var legend = document.getElementById('googft-legend');
            var legendOpenButton = document.getElementById('googft-legend-open');
            var legendCloseButton = document.getElementById('googft-legend-close');
            legend.style.display = 'none';
            legendOpenButton.style.display = 'block';
            legendCloseButton.style.display = 'block';
            legendOpenButton.onclick = function() {
                legend.style.display = 'block';
                legendOpenButton.style.display = 'none';
            }
            legendCloseButton.onclick = function() {
                legend.style.display = 'none';
                legendOpenButton.style.display = 'block';
            }
        }
    }
    

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id="googft-mapCanvas"></div>
</body>

Original Q&A

There are 1 best solutions below

**geocodezip** · Answer 1 · 2018-05-25T14:27:02.720000

You are looking for a "sidebar". The FustionTablesLayer doesn't allow direct access to the FusionTable data, but you can use the visualization API to query the table and display information in the sidebar, then like that information to the map.

From my example at http://www.geocodezip.com/v3_FusionTables_AfricaMap_kml_sidebar.html

code snippet:

google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});

function createSidebar() {
  //set the query using the parameter
  var queryText = encodeURIComponent("https://www.google.com/fusiontables/gvizdata?tq=SELECT * FROM 564705");
  var query = new google.visualization.Query(queryText);
  queryText = encodeURIComponent("SELECT 'description', 'name', 'Citizens', 'Country', 'Latitude', 'Longitude' FROM 564705");
  query = new google.visualization.Query('https://www.google.com/fusiontables/gvizdata?tq=' + queryText);

  //set the callback function
  query.send(getData);

}

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(createSidebar);

var FTresponse = null;
//define callback function, this is called when the results are returned
function getData(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  //concatenate the results into a string, you can build a table here
  fusiontabledata = "<table><tr>";
  fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(1) + "</th>";
  fusiontabledata += "</tr><tr>";

  for (i = 0; i < numRows; i++) {
    fusiontabledata += "<td><a href='javascript:myFTclick(" + i + ")'>" + response.getDataTable().getValue(i, 1) + "</a></td>";
    fusiontabledata += "</tr><tr>";
  }
  fusiontabledata += "</table>"
  //display the results on the page
  document.getElementById('sidebar').innerHTML = fusiontabledata;
}

function myFTclick(row) {
  var description = FTresponse.getDataTable().getValue(row, 0);
  var name = FTresponse.getDataTable().getValue(row, 1);
  var lat = FTresponse.getDataTable().getValue(row, 4);
  var lng = FTresponse.getDataTable().getValue(row, 5);
  var position = new google.maps.LatLng(lat, lng);
  // Set up and create the infowindow
  if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
  infoWindow.setOptions({
    content: '<div class="FT_infowindow"><h3>' + name +
      '</h3><div>' + description + '</div></div>',
    pixelOffset: new google.maps.Size(0, 2),
    position: position
  });
  infoWindow.open(map);
}

var map = null;
var infoWindow = null;

function initialize() {

  var africa = new google.maps.LatLng(1.56, 16.07);

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: africa,
    zoom: 3,
    mapTypeId: 'hybrid'
  });

  layer = new google.maps.FusionTablesLayer(564705, {
    suppressInfoWindows: true
  });
  layer.setMap(map);

  google.maps.event.addListener(layer, "click", function(event) {
    infoWindow.close();
    infoWindow.setContent(event.infoWindowHtml);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });

  infoWindow = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: white;
}

.infowindow * {
  font-size: 90%;
  margin: 0
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<table style="width:100%;height:100%">
  <tr style="width:100%;height:100%">
    <td style="width:100%;height:100%">
      <div id="map_canvas"></div>
    </td>
    <td>
      <div id="sidebar" style="width:260px;height:100%; overflow:auto"></div>
    </td>
  </tr>
</table>

How to get a list of strings from FusionTablesLayer and associate it with the map

There are 1 best solutions below

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-MAPS-API-3

Related Questions in GOOGLE-FUSION-TABLES

Trending Questions

Popular # Hahtags

Popular Questions