Fire Javascript function on custom marker click for AmCharts

Question

I'm trying to utilize an AmChart world map that has custom HTML markers (just like this example: https://www.amcharts.com/demos/custom-html-elements-map-markers/)

The code I have is below and I have added what I hoped would be a valid click listener based on another example on the AmChart web site.

var map;
map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "theme": "black",
  "projection": "miller",

  "imagesSettings": {
    "rollOverColor": "#42adca",
    "rollOverScale": 3,
    "selectedScale": 3,
    "selectedColor": "#42adca",
    "color": "#42adca"
  },

  "areasSettings": {
    "unlistedAreasColor": "#42adca"
  },

  "dataProvider": {
    "map": "worldLow",
    "images": [ {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "San Jose, CA",
      "latitude": 37.3382,
      "longitude": -121.8863,
       "click": 'test()'
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Dulles, VA",
      "latitude": 38.9559,
      "longitude": -77.4478
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "London, UK",
      "latitude": 51.5074,
      "longitude": 0.1278
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Denver, CO",
      "latitude": 39.7392,
      "longitude": -104.9903
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Miami, FL",
      "latitude": 25.7617,
      "longitude": -80.1918
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Los Angeles, CA",
      "latitude": 34.0522,
      "longitude": -118.2437
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "New York, NY",
      "latitude": 40.7128,
      "longitude": -74.0059
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Chicago, IL",
      "latitude": 41.8781,
      "longitude": -87.6298
    } ]
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(event) {
        console.log(event.mapObject.title);
    }
  }]
} );

However, the console.log doesn't fire. Clicking the map doesn't do anything. I can set URLs but I want to specify a JS function.

Any pointers would be great.

Answer 1

Shortly after posting this I found the answer.

The 'url' parameter acts like a regular href, so, this is valid:

"dataProvider": {
    "map": "worldLow",
    "images": [ {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "San Jose, CA",
      "latitude": 37.3382,
      "longitude": -121.8863,
       "url": 'javascript:test()'
    }, {
      "zoomLevel": 5,
      "scale": 0.5,
      "title": "Dulles, VA",
      "latitude": 38.9559,
      "longitude": -77.4478
    }, {

Note "url": 'javascript:test()'