Google Sheets: Map Not Rendering with Custom Markers

Question

I am trying to render a map in Google Sheets and set custom markers. I have followed the App Script Docs that go over this topic: Visualization: Map. The map is rendering with the icons in the correct places, but the icons are the default set.

I checked my img URLs (by setting them as the default) and they work (the below urls are fake). I believe the issue is somewhere around matching the options.icons.keys with the data that is in the dataTable 3rd column.

Here is the raw data that is pulled from <?= jsonPoints ?>

[[29.59260664700021,-95.77028110299972,"Red"],
[29.591301814000055,-95.76907472100011,"Green"],
[29.591178932000005,-95.76802742100018,"Red"],
[29.587551849000003,-95.77229599100004,"Blue"]]

And here is the function that creates the map:

function drawMap() {
  points = <?= jsonPoints ?>;

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Latitude');
  data.addColumn('number', 'Longitude');
  data.addColumn('string', 'Point Type');
  data.addRows(JSON.parse(points))

  var url = 'https://image.ibb.co/';
  var options = {
    showTooltip: true,
    showInfoWindow: true,
    useMapTypeControl: true,
    icons: {
      Red: {
        normal:   url + '/red.png',
        selected: url + '/red.png'
      },
      Blue: {
        normal:   url + '/Blue.png',
        selected: url + '/Blue.png'
      },
      Green: {
        normal:   url + '/Green.png',
        selected: url + '/Green.png'
      }
    }
  };
  var map = new google.visualization.Map(document.getElementById('chart'));
  map.draw(data, options);
}; 

I have tried putting quotation marks on the options.icons.keys, like "Green", but that did not work.

Any thoughts?

Thank you!

Answer 1

Figured it out. Added a fourth column that essentially had the same data. One column goes to the tooltip, the other is used as the marker:

  data.addColumn('number', 'Latitude');
  data.addColumn('number', 'Longitude');
  data.addColumn('string', 'Tooltip_Data');
  data.addColumn('string', 'Marker');

Now icons are rendered!