Add custom marker icon images

resources/js/index.js

@@ -7,6 +7,7 @@ import mapkit from './services/mapkit';
 
 import parser from './utils/parser';
 import {isDefined, logError} from './utils/helper';
+import './utils/customEventPolyfill';
 
 const createMap = (element, createMap, createMarker) => {
   if (!isDefined(element)) {
@@ -24,9 +25,12 @@ const createMap = (element, createMap, createMarker) => {
     return;
   }
 
-  mapData.markers.forEach(markerData => {
-    createMarker(map, markerData);
-  })
+  const markers = mapData.markers.map(markerData => createMarker(map, markerData));
+
+  return {
+    map,
+    markers,
+  };
 };
 
 const createMapService = service => {
@@ -36,8 +40,23 @@ const createMapService = service => {
     service.createMarker,
   );
   const selector = `[data-map-${service.NAME}]`;
-  const elements = document.querySelectorAll(selector) || [];
-  elements.forEach(createMapService);
+  const elements = Array.prototype.slice.call(document.querySelectorAll(selector) || []);
+  elements.forEach(element => {
+    const data = createMapService(element);
+    dispatchEvent(service.NAME, element, data);
+  });
+};
+
+const dispatchEvent = (serviceName, element, data) => {
+  const event = new CustomEvent('LaravelMapInitialized', {
+    detail: {
+      element: element,
+      map: data.map,
+      markers: data.markers || [],
+      service: serviceName,
+    },
+  });
+  window.dispatchEvent(event);
 };
 
 window.onGoogleMapsReady = () => createMapService(google);