@syncfusion/ej2-maps 23.1.40 → 23.1.44

package/dist/es6/ej2-maps.es2015.js

@@ -629,7 +629,7 @@ function renderTextElement(option, style, color, parent, isMinus = false) {
  * @private
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function convertElement(element, markerId, data, index, mapObj) {
+function convertElement(element, markerId, data, index, mapObj, templateType) {
     const childElement = createElement('div', {
         id: markerId, className: mapObj.element.id + '_marker_template_element'
     });
@@ -639,19 +639,21 @@ function convertElement(element, markerId, data, index, mapObj) {
         childElement.appendChild(element[0]);
         elementLength--;
     }
-    let templateHtml = childElement.innerHTML;
-    const properties = Object.keys(data);
-    const regExp = RegExp;
-    for (let i = 0; i < properties.length; i++) {
-        if (typeof data[properties[i]] === 'object') {
-            templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
-            // eslint-disable-next-line @typescript-eslint/ban-types
-        }
-        else if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {
-            templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
+    if (!mapObj.isReact || templateType !== 'function') {
+        let templateHtml = childElement.innerHTML;
+        const properties = Object.keys(data);
+        const regExp = RegExp;
+        for (let i = 0; i < properties.length; i++) {
+            if (typeof data[properties[i]] === 'object') {
+                templateHtml = convertStringToValue(templateHtml, '', data, mapObj);
+                // eslint-disable-next-line @typescript-eslint/ban-types
+            }
+            else if (properties[i].toLowerCase() !== 'latitude' && properties[i].toLowerCase() !== 'longitude') {
+                templateHtml = templateHtml.replace(new regExp('{{:' + properties[i] + '}}', 'g'), data[properties[i].toString()]);
+            }
         }
+        childElement.innerHTML = templateHtml;
     }
-    childElement.innerHTML = templateHtml;
     return childElement;
 }
 /**
@@ -1256,7 +1258,7 @@ function markerTemplate(eventArgs, templateFn, markerID, data, markerIndex, mark
     templateFn = getTemplateFunction(eventArgs.template, maps);
     if (templateFn && (templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false).length)) {
         const templateElement = templateFn(data, maps, eventArgs.template, maps.element.id + '_MarkerTemplate' + markerIndex, false);
-        const markerElement = convertElement(templateElement, markerID, data, markerIndex, maps);
+        const markerElement = convertElement(templateElement, markerID, data, markerIndex, maps, typeof eventArgs.template);
         for (let i = 0; i < markerElement.children.length; i++) {
             markerElement.children[i].style.pointerEvents = 'auto';
         }
@@ -5276,7 +5278,13 @@ class Marker {
      * @private
      */
     markerClick(e) {
-        const target = e.target.id;
+        let target = e.target.id;
+        if (target.indexOf(this.maps.element.id) === -1) {
+            const ancestor = e.target.closest('.' + this.maps.element.id + '_marker_template_element');
+            if (!isNullOrUndefined(ancestor) && ancestor.id.indexOf('_MarkerIndex_') > -1) {
+                target = ancestor.id;
+            }
+        }
         if (target.indexOf('_LayerIndex_') === -1 || target.indexOf('_cluster_') > 0) {
             return;
         }