CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-fusion-tablesheatmap
Jerry Vermanen
Jerry Vermanen

Reputation: 297

Customize radius and colour in Heat Maps + Fusion Tables

I want to make a heat map with Google Fusion Tables and Javascript. This is what I made so far in JSfiddle. 

      function initialize() {

    var style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: -99 }
      ]
    },
    {
      featureType: 'road.highway',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'road.arterial',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'road.local',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.country',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.province',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.locality',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.neighborhood',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.land_parcel',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'poi',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'transit',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];
  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(52.04843154112624, 5.33935546875),
      zoom: 7,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: true,
      panControl: true,
      draggable: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');
  layerl0 = new google.maps.FusionTablesLayer({
    query: {
      select: "'Latitude'",
      from: '1nQx1w96dl8YNE_LMnA4Npyrapeo6fErmRXRmB9w'
    },
    heatmap: {enabled: true},
    map: map
  });

  }

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

Now I want to customize the radius and colour of the heat map. Here's some explanation on the API, but I can't figure out how it should be implemented in the code. Who can help me out?

Upvotes: 0

Views: 1542

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Your link points to the wrong part of the documentation, to the heatMap of the visualization-library(rendered on clientside), but you use a FusionTableHeatMap(rendered on serverside), which has only 1 option(you may choose to display it or not).

What you can do: request the data for the heatmap from the FusionTable and create a visualization-HeatMap instead. Of course it depends on the amount of data if this is a feasible approach.

Upvotes: 1

Related Questions