css:
  html, body {
       height: 100%;
       margin: 0;
       padding: 0;
     }
     #map {
       height: 100%;
     }
#map

javascript:
  function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 1,
        scale: 0.5,
   };
  }

  function initMap() {
    var supporters = #{@supporters.to_json.html_safe}
    console.log(@supporters.to_json.html_safe);
    var customMapType = new google.maps.StyledMapType([{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}], {
      name: 'Black White'
  });
  var customMapTypeId = 'custom_style';
    
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 47.242, lng: 8.133},
      zoom: 8,
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
      }
    });
    map.mapTypes.set(customMapTypeId, customMapType);
    map.setMapTypeId(customMapTypeId);
    
    var markers = [];
    var heatMapData = [];
    
    supporters.forEach(function(supporter) {
      var color = '#00ff00';
      var radius = 500;
      var weight = 1;
      
      if (supporter.support == 'signer' ) {
        color = '#FF0000';
        radius = 10;
        weight = 0.5;
      }
      if (supporter.support == 'supporter' ) {
        heatMapData.push({location: new google.maps.LatLng(supporter.coordinates[1], supporter.coordinates[0]), weight: weight})
      }
      /*var cityCircle = new google.maps.Circle({
         fillColor: color,
         strokeOpacity: 0,
         fillOpacity: 0.35,
         map: map,
         center: {lat: supporter.coordinates[1], lng: supporter.coordinates[0]},
         radius: radius
       });*/
       
       
      var marker = new google.maps.Marker({
        position: {lat: supporter.coordinates[1], lng: supporter.coordinates[0]},
        map: map,
        icon: pinSymbol(color)
      });
      
      markers.push(marker);
    });
    var mcOptions = { gridSize: 50, maxZoom: 15,  imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };

    var markerCluster = new MarkerClusterer(map, markers, mcOptions);
      
    var heatmap = new google.maps.visualization.HeatmapLayer({data: heatMapData });
    heatmap.setMap(map);
  }

script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbwMtGKDqf4i8x9-OVP1-H_QVAKp92h2M&callback=initMap&libraries=visualization"