Handsontable with GoogleMaps

by handsoncode

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example" class="hot1 hot handsontable"></div>

CSS

.handsontable th,
.handsontable td {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

body {
  padding: 0;
  margin: 0;
  background: #ffffff;
}

.year-hot {
  display: block;
  font-size: 24px;
  text-align: center;
  color: #C51162;
}

.img {
  width: 50px;
  height: 50px;
  padding: 40px 20%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.cell-wrapper,
.map-wrapper {
  width: 100%;
  height: 100%;
}

td.born {
  padding: 0;
}

.day-month-hot {
  text-align: center;
  font-weight: bold;
}

.high {
  padding-top: 40%;
}

JavaScript

function imageRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.cellDecorator.apply(this, arguments);
  Handsontable.dom.fastInnerHTML(td, '<img class="img" src=' + value + '>');
}

function surnameRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.cellDecorator.apply(this, arguments);
  Handsontable.dom.fastInnerHTML(td, '<strong>' + value + '</strong>');
}

function nameRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.cellDecorator.apply(this, arguments);
  if (row === 0) {
    value = '<a href="https://pl.wikipedia.org/wiki/Johnny_Depp" target="_blank">' + value + '</a>';
  } else if (row === 1) {
    value = '<a href="https://pl.wikipedia.org/wiki/Leonardo_DiCaprio" target="_blank">' + value + '</a>';
  } else if (row === 2) {
    value = '<a href="https://pl.wikipedia.org/wiki/Tom_Hanks" target="_blank">' + value + '</a>';
  } else if (row === 3) {
    value = '<a href="https://pl.wikipedia.org/wiki/Brad_Pitt" target="_blank">' + value + '</a>';
  } else if (row === 4) {
    value = '<a href="https://pl.wikipedia.org/wiki/Robert_Downey_Jr." target="_blank">' + value + '</a>';
  } else if (row === 5) {
    value = '<a href="https://pl.wikipedia.org/wiki/Denzel_Washington" target="_blank">' + value + '</a>';
  } else if (row === 6) {
    value = '<a href="https://en.wikipedia.org/wiki/Will_Smith" target="_blank">' + value + '</a>';
  }
  Handsontable.dom.fastInnerHTML(td, value);
}

function dateRenderer(instance, td, row, col, prop, value, cellProperties) {
  var day = value.slice(0, 2),
    month = value.slice(3, 5),
    year = value.slice(6, 12);

  value = '<div class="high">' +
    '<div class="year-hot">' + year + '</div><div class="day-month-hot">' + day + '/' + month + '</div>' +
    '</div>';
  Handsontable.dom.fastInnerHTML(td, value);
};


function getMyData() {
  return [{
    face:...