title: Configuring heatmap overlays using Google Maps API
body: <p>I'm trying to use the Google Maps API to generate a heatmap of locations.  It works, but the result is not very useful, since the parts rendered by the heatmap are small are hard to see:</p>
  
  <p><img src="https://i.stack.imgur.com/lNP4Z.png" alt="google maps heatmap problem"></p>
  
  <p>Nothing in the docs suggest a way to expand the heatmap to render in larger blobs.  Is there an undocumented way of doing this or is this just a limitation of the API? Do I just need more data points?  I've pasted the code I'm using below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /&gt;
      &lt;style type="text/css"&gt;
        html {
          height: 100%
        }
  
        body {
          height: 100%;
          margin: 0px;
          padding: 0px
        }
  
        #map {
          height: 100%
        }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        function initialize() {
          var myLatlng = new google.maps.LatLng(44.646959,-63.589697);
          var myOptions = {
            zoom : 14,
            center : myLatlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
          }
  
          var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
          var layer = new google.maps.FusionTablesLayer({
            query: {
              select: 'geometry',
              from: '[ fusion table id removed ]'
            },
            heatmap: { enabled: true }
          });
  
          layer.setMap(map);
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="initialize()"&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>