Fusion Tables Heatmap layer with markers

Question

I'm trying to create something similiar to this, but I'm having some trouble getting this working:

https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-heatmap

I have about 35k records stored in Fusion Tables that I'd like to use to create the heatmap. The dataset contains lat, long, and counts.

I'd also like to include another layer over top of the heatmap which will be displayed as markers on the map (this dataset also stored in Fusion Tables, about 600 rows. How can I replace the taxiData below with coordinates from my Fusion Table?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script>
      // Adding 500 Data Points
      var map, pointarray, heatmap;

      var taxiData = [
        new google.maps.LatLng(37.782551, -122.445368),
        new google.maps.LatLng(37.782745, -122.444586),
        new google.maps.LatLng(37.782842, -122.443688),
        new google.maps.LatLng(37.782919, -122.442815),
        new google.maps.LatLng(37.782992, -122.442112),
        new google.maps.LatLng(37.783100, -122.441461),
        new google.maps.LatLng(37.783206, -122.440829)
      ];

      function initialize() {
        var mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(37.774546, -122.433523),
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };

        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        pointArray = new google.maps.MVCArray(taxiData);

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: pointArray
        });

        heatmap.setMap(map);
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.setOptions({
          gradient: heatmap.get('gradient') ? null : gradient
        });
      }

      function changeRadius() {
        heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
      }

      function changeOpacity() {
        heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
      }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="height: 600px; width: 800px;"></div>
    <button onclick="toggleHeatmap()">Toggle Heatmap</button>
    <button onclick="changeGradient()">Change gradient</button>
    <button onclick="changeRadius()">Change radius</button>
    <button onclick="changeOpacity()">Change opacity</button>
  </body>
</html>

PinnyM PinnyM · Accepted Answer · 2013-02-14T15:16:49

For fusion tables, you don't create a HeatmapLayer, but rather a FusionTablesLayer like so:

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'LATITUDE',
    from: '0ILwUgu7vj0VSZnVzaW9udGFibGVzOjEzNjcwNQ'
  },
  heatmap: {
    enabled: true
  }
});
layer.setMap(map);

You can limit the data used by adding a where: section to the query.

To make a layer with simple markers using a fusion table just leave out the heatmap: { enabled: true } portion.

Fusion Tables Heatmap layer with markers

1 Answers