wip

resources/js/utils/helper.js

@@ -1,5 +1,11 @@
 export const isDefined = object => typeof object !== 'undefined';
 
-export const fadeElementIn = element => element.closest('.fade').classList.add('in');
+export const fadeElementIn = element => {
+  const target = element.closest('.fade');
+  target.classList.add('show'); // Bootstrap 4
+  target.classList.add('in'); // Backwards compatibility Bootstrap 3.3.7
+};
 
-export const openLink = url => window.open(url, '_blank');
+export const openUrl = url => window.open(url, '_blank');
+
+export const logError = error => isDefined(console) && console.error('[laravel-maps] error:', error);

resources/js/utils/parser.js

@@ -1,29 +1,57 @@
-const parseMarker = marker => {
-  const lat = parseFloat(marker.lat);
-  const lng = parseFloat(marker.lng);
-  const url = marker.url;
+import {logError} from "./helper";
+
+const parseMap = element => JSON.parse(
+  element.dataset.mapGoogle
+  || element.dataset.mapOsm
+  || element.dataset.mapBing
+  || element.dataset.mapMapquest
+  || element.dataset.mapYandex
+  || element.dataset.mapMapkit
+);
+
+const parseService = element => {
+  const {key, type} = JSON.parse(element.dataset.mapService);
 
   return {
-    lat,
-    lng,
-    url,
-  };
+    key,
+    type,
+  }
+};
+
+const parseMarkers = element => {
+  const markers = JSON.parse(element.dataset.mapMarkers) || [];
+  return markers.map(marker => {
+    const lat = parseFloat(marker.lat);
+    const lng = parseFloat(marker.lng);
+    const {title, url} = marker;
+
+    return {
+      title,
+      lat,
+      lng,
+      url,
+    };
+  });
 };
 
 export default {
   map(element) {
-    const lat = parseFloat(element.dataset.mapLat);
-    const lng = parseFloat(element.dataset.mapLng);
-    const zoom = parseInt(element.dataset.mapZoom);
-    const key = element.dataset.mapKey;
-    const markers = (JSON.parse(element.dataset.mapMarkers) || []).map(parseMarker);
-
-    return {
-      lat,
-      lng,
-      zoom,
-      key,
-      markers,
-    };
+    try {
+      const map = parseMap(element);
+      const lat = parseFloat(map.lat);
+      const lng = parseFloat(map.lng);
+      const zoom = parseInt(map.zoom);
+      const service = parseService(element);
+      const markers = parseMarkers(element);
+      return {
+        lat,
+        lng,
+        zoom,
+        service,
+        markers,
+      };
+    } catch (e) {
+      logError(e);
+    }
   },
 }