API tools faq
paste
Advertisement
zedjasper

Google Maps Heatmap Snippet

zedjasper
Jun 23rd, 2025
282
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.74 KB | None | 0 0
raw download clone embed print report
  1. var heatmapData = [];
  2. heatmapData.push(new google.maps.LatLng(0.3395288, 32.6164403));
  3. heatmapData.push(new google.maps.LatLng(0.3365688, 32.6164417));
  4. heatmapData.push(new google.maps.LatLng(0.3395282, 32.6164495));
  5. //...etc
  6. // Add aall positions for the data
  7.  
  8. initMap();
  9.  
  10. function initMap(){
  11.     var center = new google.maps.LatLng(1.564312, 32.552067);
  12.     //Colors to use
  13.     var gradient = [
  14.         "rgba(102, 255, 0, 0)",
  15.         "rgba(102, 255, 0, 1)",
  16.         "rgba(147, 255, 0, 1)",
  17.         "rgba(193, 255, 0, 1)",
  18.         "rgba(238, 255, 0, 1)",
  19.         "rgba(244, 227, 0, 1)",
  20.         "rgba(249, 198, 0, 1)",
  21.         "rgba(255, 170, 0, 1)",
  22.         "rgba(255, 113, 0, 1)",
  23.         "rgba(255, 57, 0, 1)",
  24.         "rgba(255, 0, 0, 1)"
  25.     ];
  26.  
  27.     map = new google.maps.Map(document.getElementById('map'), {
  28.         center: center,
  29.         mapTypeId: google.maps.MapTypeId.ROADMAP,
  30.         zoom: 7,
  31.         draggable: true,
  32.         scrollwheel: true,
  33.         disableDefaultUI: true,
  34.         styles: [ //Map style (optional)
  35.             {
  36.                 "featureType": "administrative.land_parcel",
  37.                 "stylers": [
  38.                     {
  39.                         "visibility": "off"
  40.                     }
  41.                 ]
  42.             },
  43.             {
  44.                 "featureType": "administrative.neighborhood",
  45.                 "stylers": [
  46.                     {
  47.                         "visibility": "off"
  48.                     }
  49.                 ]
  50.             },
  51.             {
  52.                 "featureType": "poi",
  53.                 "elementType": "labels.text",
  54.                 "stylers": [
  55.                     {
  56.                         "visibility": "off"
  57.                     }
  58.                 ]
  59.             },
  60.             {
  61.                 "featureType": "poi.business",
  62.                 "stylers": [
  63.                     {
  64.                         "visibility": "off"
  65.                     }
  66.                 ]
  67.             },
  68.             {
  69.                 "featureType": "poi.park",
  70.                 "elementType": "labels.text",
  71.                 "stylers": [
  72.                     {
  73.                         "visibility": "off"
  74.                     }
  75.                 ]
  76.             },
  77.             {
  78.                 "featureType": "road",
  79.                 "stylers": [
  80.                     {
  81.                         "visibility": "off"
  82.                     }
  83.                 ]
  84.             },
  85.             {
  86.                 "featureType": "road",
  87.                 "elementType": "labels",
  88.                 "stylers": [
  89.                     {
  90.                         "visibility": "off"
  91.                     }
  92.                 ]
  93.             },
  94.             {
  95.                 "featureType": "water",
  96.                 "elementType": "labels.text",
  97.                 "stylers": [
  98.                     {
  99.                         "visibility": "off"
  100.                     }
  101.                 ]
  102.             }
  103.         ]
  104.     });
  105.  
  106.     var maxIntensity = 10; //Max cluster size
  107.  
  108.     var heatmap = new google.maps.visualization.HeatmapLayer({
  109.         data: heatmapData,
  110.         gradient: gradient,
  111.         maxIntensity: maxIntensity
  112.     });
  113.  
  114.     heatmap.setMap(map);
  115.  
  116.     var gradientCss = '(left';
  117.     for (var i = 0; i < gradient.length; ++i) {
  118.         gradientCss += ', ' + gradient[i];
  119.     }
  120.     gradientCss += ')';
  121.  
  122.     $('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
  123.     $('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
  124.     $('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
  125.     $('#legendGradient').css('background', 'linear-gradient' + gradientCss);
  126.  
  127.     google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
  128.         //#legendGradient is an container element below the map to hold the intensity scale
  129.         var legendWidth = $('#legendGradient').outerWidth();
  130.  
  131.         for (var i = 0; i <= maxIntensity; ++i) {
  132.             var offset = i * legendWidth / maxIntensity;
  133.             if (i > 0 && i < maxIntensity) {
  134.                 offset -= 0.5;
  135.             } else if (i == maxIntensity) {
  136.                 offset -= 1;
  137.             }
  138.  
  139.             $('#legend').append($('<div>').css({
  140.                 'position': 'absolute',
  141.                 'left': offset + 'px',
  142.                 'top': '15px',
  143.                 'width': '1px',
  144.                 'height': '3px',
  145.                 'background': 'black'
  146.             }));
  147.  
  148.             $('#legend').append($('<div>').css({
  149.                 'position': 'absolute',
  150.                 'left': (offset - 5) + 'px',
  151.                 'top': '18px',
  152.                 'width': '10px',
  153.                 'text-align': 'center'
  154.             }).html(i));
  155.         }
  156.     });
  157. }
  158.                                
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!