Google Maps API in Generic Javascript View

KNIME Analytics Platform
1

Hi all,

I'm trying to visualize heatmaps on Google maps with the Generic Javascipt Node, but it doesn't work.

It succesfully visualizes the map but no heatmap appears, it seems that there is some trouble with the visualization library .

Here's the code:

require.config({
    paths: {
        "google": "https://maps.googleapis.com/maps/api/js?key= [not showed here] &libraries=visualization&callback=myMap"
    }
});

require(['google'], function() {
  var body = document.getElementsByTagName('body')[0];
  var html = '<div id="map" style="width:100%;height:500px"></div>';
  body.innerHTML = html;
  myMap();

  function myMap() {
    var mapCanvas = document.getElementById("map");
      var mapOptions = {
            center: new google.maps.LatLng(40.252244, -3.414010), 
            zoom: 6
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);
  
      var heatmap = new google.maps.visualization.HeatmapLayer({
            data: getPoints(),
            map: map
      });
  }
});

function getPoints() {
    var points = []; var lat, lng;
    for (i = 0; i < knimeDataTable.getNumRows(); i++) {
        lat = knimeDataTable.getRows()[i].data[5];
        lng = knimeDataTable.getRows()[i].data[6];
        points.push(new google.maps.LatLng(lat, lng));
    }
    return points;
}

Am I doing something wrong?

Thanks in advance,

Daniele

2

Hi Daniele,

could you post a mini workflow? I will ask the developers to take a look into it.

Best, Iris

3

Hi Daniele,

I was trying to recreate your workflow to see what your problem is.

In short it is the Google Maps API which can not be loaded with plain requireJS the regular way. However, since we can specify a callback function in the maps path, we can use that instead. The only important thing is that this callback method needs to be global. Simply putting window.myMap = function(){} does the trick.

Please see the attached workflow for an example (works only with KNIME 3.3). Paste your API key in the String Input field as default value and then you can run the view.

I hope this helps you!

Best regards,

Christian