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}
    
    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: 'Custom Style'
  });
  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);
    
    supporters.forEach(function(supporter) {
      var color = '#00ff00';
      var radius = 500;
      if (supporter.support == 'signer' ) {
        color = '#FF0000';
        radius = 10;
      }
      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)
      });
    });
  }

script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqBPuHFLNYY4XcfhpRHSoRS5l7jJDL0zs&callback=initMap"