I have added a custom marker to my map using the following guide: https://www.amcharts.com/demos/custom-html-elements-map-markers/ but I can't for the life of me work out how to add a click event to this marker!
i have tried the following with no results:
imageSeries.mapImages.events.on("hit", function(ev) {
console.log("clicked on ", ev.target);
}, this);
I can add a click event using jQuery however I need the map to zoom and center to the marker when clicked.
Since you're using custom HTML map markers, you'll want to tie click events to those whether via vanilla js or jQuery.
In their click event handlers, if you have a reference to their associated MapImage, you can try chart.zoomToMapObject(mapImageReferenceHere); (see our guide "Zooming to map area on click"). You may have to adjust the positioning of the HTML markers so they're better-centered according along the mapImage.
Forking our demo, all you'd have to add is the following to the createCustomMarker function:
holder.addEventListener("click", function(event) {
chart.zoomToMapObject(image);
});
See the fork here:
https://codepen.io/team/amcharts/pen/15dbf72f74b61fb83cd0754a96fa2c49
PS
Instead of imageSeries.mapImages.events.on you'd want to place events on the template, i.e. imageSeries.mapImages.template.events.on("hit", function(ev) { ... } );. Please check out our guide on our concept of List Templates in amCharts v4.