AmCharts hit event on mapImageSeries not working

Question

I'm trying to set up my map to drill down when a marker is clicked. However, I can't get anything to fire when the marker is clicked.

here is the specific portion (its at the very end of the function below):

//want to zoom in when group is clicked, but right now can't get any function to fire
officeGroupsTemplate.events.on("hit", function(ev) {
   alert("Clicked on", ev.target);
});

You can see a live example here: https://awmhomes.com/find-a-loan-officer/

function awm_footer_map_script(){ 
    $locations = awm_locations();
    $states = awm_state_codes($locations);
    $js_states = json_encode($states);
    $offices = awm_branches($locations, false);
    $groups = awm_groups($locations, true);
    ?>
    <!-- Chart code -->
    <script>
        am4core.ready(function() {
            //licensed states array
            <?php echo "var awm_states = ". $js_states . ";\n"; ?>
            // Theme
            am4core.useTheme(am4themes_animated);
            // Create map instance
            var chart = am4core.create("awmTeamMap", am4maps.MapChart);
            //chart.maxZoomLevel = 64;
            // Set map definition
            chart.geodata = am4geodata_usaHigh;
            // Set projection
            chart.projection = new am4maps.projections.AlbersUsa();
            //add map key
            chart.legend = new am4maps.Legend();
            chart.legend.valign = 'top';
            chart.legend.itemContainers.template.clickable = false;
            chart.legend.itemContainers.template.focusable = false;
            chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.default;
            //add zoom buttons
            chart.zoomControl = new am4maps.ZoomControl();
            chart.zoomControl.align = "left";
            chart.zoomControl.valign = "top";
            // Create map polygon series (not licensed)
            var statesExc = chart.series.push(new am4maps.MapPolygonSeries());
            statesExc.name = "Not Licensed";
            statesExc.useGeodata = true;
            statesExc.calculateVisualCenter = true;
            statesExc.exclude = awm_states;
            statesExc.fill = am4core.color("#cccccc");
            statesExc.tooltip.disabled = true;
            statesExc.hiddenInLegend = true;
            //template
            var statesExcTemplate = statesExc.mapPolygons.template;
            statesExcTemplate.tooltipText = "{name}";
            statesExcTemplate.fill = am4core.color("#cccccc");
            statesExcTemplate.stroke = am4core.color("#ffffff");

            // Create map polygon series (licensed)
            var statesInc = chart.series.push(new am4maps.MapPolygonSeries());
            statesInc.name = "Licensed";
            statesInc.useGeodata = true;
            statesInc.calculateVisualCenter = true;
            statesInc.include = awm_states;
            statesInc.fill = am4core.color("#1273b9");
            //template
            var statesIncTemplate = statesInc.mapPolygons.template;
            statesIncTemplate.tooltipText = "{name}";
            statesIncTemplate.fill = am4core.color("#1273b9");
            statesIncTemplate.stroke = am4core.color("#ffffff");

            // Create image series for local office markers
            var officeMarkers = chart.series.push(new am4maps.MapImageSeries());
            officeMarkers.name = 'Offices';

            // Create a circle image in image series template so it gets replicated to all new images
            var officeMarkersTemplate = officeMarkers.mapImages.template;
            var officeMarkersCircle = officeMarkersTemplate.createChild(am4core.Circle);
            officeMarkersCircle.radius = 4;
            officeMarkersCircle.fill = am4core.color("#000000");
            officeMarkersCircle.stroke = am4core.color("#FFFFFF");
            officeMarkersCircle.strokeWidth = 2;
            officeMarkersCircle.nonScaling = true;
            officeMarkersCircle.tooltipText = "{title}";

            /** Add data for the image series markers (offices) **/
            <?php awm_office_markers($offices, 'officeMarkers'); ?>

            /**Image Series for grouped markers**/
            var officeGroups = chart.series.push(new am4maps.MapImageSeries());
            officeGroups.dataFields.value = 'groups';
            officeGroups.hiddenInLegend = true;

            var officeGroupsTemplate = officeGroups.mapImages.template;
            officeGroupsTemplate.verticalCenter = "middle";
            officeGroupsTemplate.horizontalCenter = "middle";
            officeGroupsTemplate.propertyFields.latitude = "latitude";
            officeGroupsTemplate.propertyFields.longitude = "longitude";
            officeGroupsTemplate.tooltipText = "{name}:\n[bold]{offices} offices[/]";

            var officeGroupsCircle = officeGroupsTemplate.createChild(am4core.Circle);
            officeGroupsCircle.radius = 10;
            officeGroupsCircle.fillOpacity = 0.7;
            officeGroupsCircle.verticalCenter = "middle";
            officeGroupsCircle.horizontalCenter = "middle";
            officeGroupsCircle.nonScaling = true;

            var officeGroupsLabel = officeGroupsTemplate.createChild(am4core.Label);
            officeGroupsLabel.text = "{offices}";
            officeGroupsLabel.fill = am4core.color("#fff");
            officeGroupsLabel.verticalCenter = "middle";
            officeGroupsLabel.horizontalCenter = "middle";
            officeGroupsLabel.nonScaling = true;

            var heat = officeGroups.heatRules.push({
                target: officeGroupsCircle,
                property: "radius",
                min: 10,
                max: 30
            });

            <?php awm_group_markers($groups, 'officeGroups'); ?>

            //want to zoom in when group is clicked, but right now can't get any function to fire
            officeGroupsTemplate.events.on("hit", function(ev) {
                alert("Clicked on", ev.target);
            });

        }); // end am4core.ready() 
    </script>
    <?php 
};

Any help is much appreciated.

Answer 1

Looking at your code in website, it seems that you are creating markers in your MapImageSeries, then adding an event handler on a template.

What happens when you call series.mapImages.create() is that an exact copy of the series.mapImages.template gets created, including property values and events.

However, since you are doing that before adding said event listener on a template, it does not get added to actual markers that were already created.

Just move your event declaration before creating actual markers.