@abcagency/hc-ui-components 1.3.94 → 1.3.96

package/src/util/localStorageUtil.ts

@@ -1,34 +1,34 @@
-export const getStorageObject = <T>(item: string, defaultItem: T | null = null): T | null => {
-	if (typeof window === 'undefined') return defaultItem;
-	const storageItem = localStorage.getItem(item);
-	if (storageItem === null || storageItem === 'undefined') {
-		localStorage.removeItem(item);
-		return defaultItem;
-	}
-	try {
-		return JSON.parse(storageItem) ?? defaultItem;
-	} catch (error) {
-		console.error(`Error parsing JSON for ${item}:`, error);
-		return defaultItem;
-	}
-};
-
-export const getStorageItem = (item: string, defaultItem: string | null = null): string | null => {
-	if (typeof window === 'undefined') return defaultItem;
-	const storageItem = localStorage.getItem(item);
-	if (storageItem === null || storageItem === 'undefined') {
-		localStorage.removeItem(item);
-		return defaultItem;
-	}
-	return storageItem ?? defaultItem;
-};
-
-export const setStorageObject = (key: string, item: any): void => {
-	if (typeof window === 'undefined') return;
-	if (item === undefined) return;
-	try {
-		localStorage.setItem(key, JSON.stringify(item));
-	} catch (err) {
-		console.error(`Error setting item ${key} in localStorage:`, err);
-	}
-};
+export const getStorageObject = <T>(item: string, defaultItem: T | null = null): T | null => {
+	if (typeof window === 'undefined') return defaultItem;
+	const storageItem = localStorage.getItem(item);
+	if (storageItem === null || storageItem === 'undefined') {
+		localStorage.removeItem(item);
+		return defaultItem;
+	}
+	try {
+		return JSON.parse(storageItem) ?? defaultItem;
+	} catch (error) {
+		console.error(`Error parsing JSON for ${item}:`, error);
+		return defaultItem;
+	}
+};
+
+export const getStorageItem = (item: string, defaultItem: string | null = null): string | null => {
+	if (typeof window === 'undefined') return defaultItem;
+	const storageItem = localStorage.getItem(item);
+	if (storageItem === null || storageItem === 'undefined') {
+		localStorage.removeItem(item);
+		return defaultItem;
+	}
+	return storageItem ?? defaultItem;
+};
+
+export const setStorageObject = (key: string, item: any): void => {
+	if (typeof window === 'undefined') return;
+	if (item === undefined) return;
+	try {
+		localStorage.setItem(key, JSON.stringify(item));
+	} catch (err) {
+		console.error(`Error setting item ${key} in localStorage:`, err);
+	}
+};

package/src/util/mapIconUtil.js

@@ -1,216 +1,216 @@
-/* eslint-disable no-undef */
-import { placeTypes } from '~/constants/placeTypes';
-
-const customSVGIcon = (
-	type,
-	fillColor = "#FFFFFF",
-	strokeColor = "#000000",
-	backgroundFill = "#000000",
-	backgroundStroke = "#000000"
-) => {
-	let svg = "";
-	switch (type) {
-		case placeTypes.FOOD:
-			svg = `
-					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M25.7,36.6l0.6,15.8c0.1,2.4-2.3,2.4-2.3,2.4s-2.4,0-2.3-2.4l0.6-15.8c0.1-2-4.3-2.9-4-4.9l2.3-13.3h1.1
-						l-0.6,9.7l1.7,1.2l0.6-10.9h1.1l0.6,10.9l1.7-1.2l-0.6-9.7h1.1l2.3,13.3C29.7,33.7,25.6,34.6,25.7,36.6z"/>
-					<path class="st0" d="M40,52.4c0,2.4-2.3,2.4-2.3,2.4s-2.5,0-2.3-2.4L36.6,39c-0.9,0-3.4-0.4-3.4-2.4v-6.1c0-2.4,0.3-6.4,1.2-8.2
-						c1.1-2.4,3.9-4,5.6-4C40,18.3,40,52.4,40,52.4z"/>
-					</svg>
-					`;
-			break;
-		case placeTypes.TOURIST_ATTRACTION:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M27,18.5c-1.2,0-1.7,1.1-2.2,2.2L23.7,23h-4.5c-1.9,0-3.4,1.5-3.4,3.4v11.2c0,1.9,1.5,3.4,3.4,3.4h22.5
-						c1.9,0,3.4-1.5,3.4-3.4V26.4c0-1.9-1.5-3.4-3.4-3.4h-4.5L36,20.8c-0.6-1.1-1-2.2-2.2-2.2H27z M19.2,25.3c0.6,0,1.1,0.5,1.1,1.1
-						c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1C18,25.8,18.5,25.3,19.2,25.3z M30.4,25.3c3.7,0,6.7,3,6.7,6.7s-3,6.7-6.7,6.7
-						s-6.7-3-6.7-6.7S26.7,25.3,30.4,25.3z M30.4,28.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
-						S32.3,28.7,30.4,28.7z"/>
-					</svg>
-					`;
-			break;
-		case placeTypes.SCHOOL:
-			svg = `
-					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M39.2,40.6c0,0-4.1,4.6-9.1,4.6S21,40.6,21,40.6v-5.2l9.1,5l9.1-5V40.6z"/>
-					<polygon class="st0" points="44.4,40.4 41.8,40.4 41.8,31.4 30.1,37.8 15.8,30 30.1,22.2 44.4,30 "/>
-					</svg>
-					`;
-			break;
-		case placeTypes.STORE:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<g>
-						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
-							/>
-					</g>
-					<path class="st0" d="M45.4,27.7L42,41.1c-0.1,0.6-0.7,1-1.3,1c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3
-						s1.5-3.3,3.3-3.3H23.3c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3S20,47.2,20,45.4s1.5-3.3,3.3-3.3c-0.6,0-1.2-0.4-1.3-1l-4.1-16.4
-						h-1.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h2.3c0.6,0,1.2,0.4,1.3,1l0.8,3h23.1c0.4,0,0.8,0.2,1.1,0.5
-						C45.4,26.9,45.5,27.3,45.4,27.7z"/>
-					<path d="M41.4,45.5c0-0.4-0.3-0.7-0.7-0.7S40,45.1,40,45.5C40.1,46.2,41.4,46.2,41.4,45.5z"/>
-					<path d="M24,45.5c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7C22.6,46.2,24,46.2,24,45.5z"/>
-					</svg>
-					`;
-			break;
-		case placeTypes.AIRPORT:
-			svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="80" height="80">
-  <!-- Blue Background Circle -->
-  <circle cx="480" cy="-480" r="480" fill="#0470FF"/>
-
-  <!-- White Airplane Icon -->
-  <path fill="#FFFFFF" d="M280-80v-100l120-84v-144L80-280v-120l320-224v-176q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800v176l320 224v120L560-408v144l120 84v100l-200-60-200 60Z"/>
-</svg>
-`;
-			break;
-		case placeTypes.TRANSIT_STATION:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<g>
-						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
-							/>
-					</g>
-					<path class="st0" d="M26.3,41.3h-2.8L20.7,44h-1.4v-1.4l1.4-1.4c-2.3,0-4.2-1.9-4.2-4.2V26c0-2.3,1.9-4.2,4.2-4.2h9.7
-						c2.3,0,4.2,1.9,4.2,4.2v1.4h-2.8v-2.8H19.3v9.7h6.9v7H26.3z"/>
-					<path class="st0" d="M44.3,43c0,0.5-0.4,1-1,1h-0.8c-0.5,0-1-0.5-1-1.1v-1.7H30.4V43c0,0.5-0.4,1.1-0.9,1.1h-0.9c-0.5,0-1-0.5-1-1
-						v-7.6l2-5.7c0.2-0.6,0.7-0.9,1.4-0.9h10c0.6,0,1.1,0.4,1.3,0.9l2,5.7V43z"/>
-					<circle cx="20.7" cy="37.1" r="1.4"/>
-					<circle cx="41.5" cy="37.1" r="1.4"/>
-					<circle cx="30.4" cy="37.1" r="1.4"/>
-					<polygon points="31,30.2 29.6,34.4 42.4,34.4 40.9,30.2 "/>
-					</svg>
-					`;
-			break;
-		case placeTypes.PLACE_OF_WORSHIP:
-			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-					viewBox="0 0 60.8 89.6" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
-					<style type="text/css">
-					.st0{fill:${fillColor}; stroke:${strokeColor};}
-					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
-					</style>
-					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
-					<path class="st0" d="M21.3,40.8h-3.8c-1.3,0-2.3-1-2.3-2.3v-4.3c0-0.8,0.5-1.6,1.2-2l4.9-2.7V40.8z"/>
-					<path class="st0" d="M38,40.8h-4.6v-4.6c0-1.7-1.4-3-3-3c-1.7,0-3,1.4-3,3v4.6h-4.6V30c0-0.8,0.4-1.5,1.1-2l1.9-1.2v-5.1l0,0
-						c0-0.4,0.2-0.8,0.4-1.1l3.6-3.6c0.3-0.3,0.8-0.3,1.1,0l3.6,3.6c0.3,0.3,0.4,0.7,0.4,1.1v5.1l1.9,1.2c0.7,0.4,1.1,1.2,1.1,2L38,40.8
-						L38,40.8z"/>
-					<path class="st0" d="M45.6,38.5c0,1.3-1,2.3-2.3,2.3h-3.8V29.5l4.9,2.7c0.7,0.4,1.2,1.2,1.2,2C45.6,34.2,45.6,38.5,45.6,38.5z"/>
-					</svg>
-					`;
-			break;
-	}
-
-	const iconUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-	return iconUrl;
-};
-
-export const iconPath = "M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Zm-.04 5.71c-.32 0-.57-.27-.56-.58 0-.32.27-.57.58-.56.32 0 .57.27.56.58 0 .31-.25.55-.56.56h-.02Z";
-
-export const markerIconProps = (placeMarkerConfigs, type) => {
-
-	const scaledWidth = placeMarkerConfigs.size;
-	const scaledHeight = (scaledWidth * 3) / 2;
-	const iconUrl = customSVGIcon(
-		type,
-		placeMarkerConfigs.colors.innerFillColor,
-		placeMarkerConfigs.colors.innerStrokeColor,
-		placeMarkerConfigs.colors.outerFillColor,
-		placeMarkerConfigs.colors.outerStrokeColor
-	);
-	return {
-		url: iconUrl,
-		scaledSize: new google.maps.Size(scaledWidth, scaledHeight),
-		anchor: new google.maps.Point(scaledWidth / 2, scaledHeight)
-	};
-};
-
-export const iconProps = () => {
-	return {
-		path: iconPath,
-		fillOpacity: 1,
-		strokeWeight: 1.75,
-		scale: 1.6,
-		anchor: new google.maps.Point(12, 17)
-	};
-};
-
-export const markerIcon = (markerConfigs, count = 0) => {
-	const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
-      <style type="text/css">
-        .st0{fill:white;}
-        .svg-background{fill:${markerConfigs.fillColor};}
-      </style>
-      <!-- Solid background shape -->
-      <path class="svg-background" d="M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Z"/>
-      <!-- Text on top -->
-      <text x="5.5" y="8" font-family="Arial" font-size="5" text-anchor="middle" fill="white">${count}</text>
-    </svg>
-  `;
-
-	return {
-		url: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
-		scaledSize: new window.google.maps.Size(55, 55),
-		anchor: new window.google.maps.Point(18, 25)
-	};
-};
-
-export const markerIconSelected = (markerConfigs, count = 0) => {
-	const svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
-      <style type="text/css">
-        .st0{fill:white;}
-        .svg-background{fill:${markerConfigs.selectedFillColor};}
-      </style>
-      <!-- Solid background shape -->
-      <path class="svg-background" d="M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Z"/>
-      <!-- Text on top -->
-      <text x="5.5" y="8" font-family="Arial" font-size="5" text-anchor="middle" fill="white">${count}</text>
-    </svg>
-  `;
-
-	return {
-		url: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
-		scaledSize: new window.google.maps.Size(50, 50),
-		anchor: new window.google.maps.Point(12, 17)
-	};
-};
-
-export const pinIcon = markerConfigs => {
-	const { fillColor, strokeColor } = markerConfigs;
-
-	const svg = `
-	<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
-		<path d="${iconPath}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="2"/>
-	  </svg>
-	`;
-
-	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-};
-
+/* eslint-disable no-undef */
+import { placeTypes } from '~/constants/placeTypes';
+
+const customSVGIcon = (
+	type,
+	fillColor = "#FFFFFF",
+	strokeColor = "#000000",
+	backgroundFill = "#000000",
+	backgroundStroke = "#000000"
+) => {
+	let svg = "";
+	switch (type) {
+		case placeTypes.FOOD:
+			svg = `
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M25.7,36.6l0.6,15.8c0.1,2.4-2.3,2.4-2.3,2.4s-2.4,0-2.3-2.4l0.6-15.8c0.1-2-4.3-2.9-4-4.9l2.3-13.3h1.1
+						l-0.6,9.7l1.7,1.2l0.6-10.9h1.1l0.6,10.9l1.7-1.2l-0.6-9.7h1.1l2.3,13.3C29.7,33.7,25.6,34.6,25.7,36.6z"/>
+					<path class="st0" d="M40,52.4c0,2.4-2.3,2.4-2.3,2.4s-2.5,0-2.3-2.4L36.6,39c-0.9,0-3.4-0.4-3.4-2.4v-6.1c0-2.4,0.3-6.4,1.2-8.2
+						c1.1-2.4,3.9-4,5.6-4C40,18.3,40,52.4,40,52.4z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.TOURIST_ATTRACTION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M27,18.5c-1.2,0-1.7,1.1-2.2,2.2L23.7,23h-4.5c-1.9,0-3.4,1.5-3.4,3.4v11.2c0,1.9,1.5,3.4,3.4,3.4h22.5
+						c1.9,0,3.4-1.5,3.4-3.4V26.4c0-1.9-1.5-3.4-3.4-3.4h-4.5L36,20.8c-0.6-1.1-1-2.2-2.2-2.2H27z M19.2,25.3c0.6,0,1.1,0.5,1.1,1.1
+						c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1C18,25.8,18.5,25.3,19.2,25.3z M30.4,25.3c3.7,0,6.7,3,6.7,6.7s-3,6.7-6.7,6.7
+						s-6.7-3-6.7-6.7S26.7,25.3,30.4,25.3z M30.4,28.7c-1.9,0-3.4,1.5-3.4,3.4s1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
+						S32.3,28.7,30.4,28.7z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.SCHOOL:
+			svg = `
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M39.2,40.6c0,0-4.1,4.6-9.1,4.6S21,40.6,21,40.6v-5.2l9.1,5l9.1-5V40.6z"/>
+					<polygon class="st0" points="44.4,40.4 41.8,40.4 41.8,31.4 30.1,37.8 15.8,30 30.1,22.2 44.4,30 "/>
+					</svg>
+					`;
+			break;
+		case placeTypes.STORE:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<g>
+						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
+							/>
+					</g>
+					<path class="st0" d="M45.4,27.7L42,41.1c-0.1,0.6-0.7,1-1.3,1c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3
+						s1.5-3.3,3.3-3.3H23.3c1.8,0,3.3,1.5,3.3,3.3s-1.5,3.3-3.3,3.3S20,47.2,20,45.4s1.5-3.3,3.3-3.3c-0.6,0-1.2-0.4-1.3-1l-4.1-16.4
+						h-1.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h2.3c0.6,0,1.2,0.4,1.3,1l0.8,3h23.1c0.4,0,0.8,0.2,1.1,0.5
+						C45.4,26.9,45.5,27.3,45.4,27.7z"/>
+					<path d="M41.4,45.5c0-0.4-0.3-0.7-0.7-0.7S40,45.1,40,45.5C40.1,46.2,41.4,46.2,41.4,45.5z"/>
+					<path d="M24,45.5c0-0.4-0.3-0.7-0.7-0.7s-0.7,0.3-0.7,0.7C22.6,46.2,24,46.2,24,45.5z"/>
+					</svg>
+					`;
+			break;
+		case placeTypes.AIRPORT:
+			svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="80" height="80">
+  <!-- Blue Background Circle -->
+  <circle cx="480" cy="-480" r="480" fill="#0470FF"/>
+
+  <!-- White Airplane Icon -->
+  <path fill="#FFFFFF" d="M280-80v-100l120-84v-144L80-280v-120l320-224v-176q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800v176l320 224v120L560-408v144l120 84v100l-200-60-200 60Z"/>
+</svg>
+`;
+			break;
+		case placeTypes.TRANSIT_STATION:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<g>
+						<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"
+							/>
+					</g>
+					<path class="st0" d="M26.3,41.3h-2.8L20.7,44h-1.4v-1.4l1.4-1.4c-2.3,0-4.2-1.9-4.2-4.2V26c0-2.3,1.9-4.2,4.2-4.2h9.7
+						c2.3,0,4.2,1.9,4.2,4.2v1.4h-2.8v-2.8H19.3v9.7h6.9v7H26.3z"/>
+					<path class="st0" d="M44.3,43c0,0.5-0.4,1-1,1h-0.8c-0.5,0-1-0.5-1-1.1v-1.7H30.4V43c0,0.5-0.4,1.1-0.9,1.1h-0.9c-0.5,0-1-0.5-1-1
+						v-7.6l2-5.7c0.2-0.6,0.7-0.9,1.4-0.9h10c0.6,0,1.1,0.4,1.3,0.9l2,5.7V43z"/>
+					<circle cx="20.7" cy="37.1" r="1.4"/>
+					<circle cx="41.5" cy="37.1" r="1.4"/>
+					<circle cx="30.4" cy="37.1" r="1.4"/>
+					<polygon points="31,30.2 29.6,34.4 42.4,34.4 40.9,30.2 "/>
+					</svg>
+					`;
+			break;
+		case placeTypes.PLACE_OF_WORSHIP:
+			svg = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+					viewBox="0 0 60.8 89.6" style="enable-background:new 0 0 60.8 89.6;" xml:space="preserve">
+					<style type="text/css">
+					.st0{fill:${fillColor}; stroke:${strokeColor};}
+					.svg-background{fill:${backgroundFill}; stroke:${backgroundStroke};}
+					</style>
+					<path class="svg-background" d="M30.4,3.9C14.3,3.9,1.3,16.8,1.3,33c0,21,18.6,29.1,29.1,56.6C40.9,62.1,59.5,54.9,59.5,33C60.3,16.8,46.6,3.9,30.4,3.9z"/>
+					<path class="st0" d="M21.3,40.8h-3.8c-1.3,0-2.3-1-2.3-2.3v-4.3c0-0.8,0.5-1.6,1.2-2l4.9-2.7V40.8z"/>
+					<path class="st0" d="M38,40.8h-4.6v-4.6c0-1.7-1.4-3-3-3c-1.7,0-3,1.4-3,3v4.6h-4.6V30c0-0.8,0.4-1.5,1.1-2l1.9-1.2v-5.1l0,0
+						c0-0.4,0.2-0.8,0.4-1.1l3.6-3.6c0.3-0.3,0.8-0.3,1.1,0l3.6,3.6c0.3,0.3,0.4,0.7,0.4,1.1v5.1l1.9,1.2c0.7,0.4,1.1,1.2,1.1,2L38,40.8
+						L38,40.8z"/>
+					<path class="st0" d="M45.6,38.5c0,1.3-1,2.3-2.3,2.3h-3.8V29.5l4.9,2.7c0.7,0.4,1.2,1.2,1.2,2C45.6,34.2,45.6,38.5,45.6,38.5z"/>
+					</svg>
+					`;
+			break;
+	}
+
+	const iconUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+	return iconUrl;
+};
+
+export const iconPath = "M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Zm-.04 5.71c-.32 0-.57-.27-.56-.58 0-.32.27-.57.58-.56.32 0 .57.27.56.58 0 .31-.25.55-.56.56h-.02Z";
+
+export const markerIconProps = (placeMarkerConfigs, type) => {
+
+	const scaledWidth = placeMarkerConfigs.size;
+	const scaledHeight = (scaledWidth * 3) / 2;
+	const iconUrl = customSVGIcon(
+		type,
+		placeMarkerConfigs.colors.innerFillColor,
+		placeMarkerConfigs.colors.innerStrokeColor,
+		placeMarkerConfigs.colors.outerFillColor,
+		placeMarkerConfigs.colors.outerStrokeColor
+	);
+	return {
+		url: iconUrl,
+		scaledSize: new google.maps.Size(scaledWidth, scaledHeight),
+		anchor: new google.maps.Point(scaledWidth / 2, scaledHeight)
+	};
+};
+
+export const iconProps = () => {
+	return {
+		path: iconPath,
+		fillOpacity: 1,
+		strokeWeight: 1.75,
+		scale: 1.6,
+		anchor: new google.maps.Point(12, 17)
+	};
+};
+
+export const markerIcon = (markerConfigs, count = 0) => {
+	const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
+      <style type="text/css">
+        .st0{fill:white;}
+        .svg-background{fill:${markerConfigs.fillColor};}
+      </style>
+      <!-- Solid background shape -->
+      <path class="svg-background" d="M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Z"/>
+      <!-- Text on top -->
+      <text x="5.5" y="8" font-family="Arial" font-size="5" text-anchor="middle" fill="white">${count}</text>
+    </svg>
+  `;
+
+	return {
+		url: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+		scaledSize: new window.google.maps.Size(55, 55),
+		anchor: new window.google.maps.Point(18, 25)
+	};
+};
+
+export const markerIconSelected = (markerConfigs, count = 0) => {
+	const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
+      <style type="text/css">
+        .st0{fill:white;}
+        .svg-background{fill:${markerConfigs.selectedFillColor};}
+      </style>
+      <!-- Solid background shape -->
+      <path class="svg-background" d="M5.5 0A5.27 5.27 0 0 0 0 5.01v.49c0 1.73 1.38 3.43 2.07 4.12s3.43 4.12 3.43 4.12 2.75-3.43 3.43-4.12 2.06-2.39 2.06-4.12c.14-2.9-2.1-5.36-5-5.5H5.5Z"/>
+      <!-- Text on top -->
+      <text x="5.5" y="8" font-family="Arial" font-size="5" text-anchor="middle" fill="white">${count}</text>
+    </svg>
+  `;
+
+	return {
+		url: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+		scaledSize: new window.google.maps.Size(50, 50),
+		anchor: new window.google.maps.Point(12, 17)
+	};
+};
+
+export const pinIcon = markerConfigs => {
+	const { fillColor, strokeColor } = markerConfigs;
+
+	const svg = `
+	<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="-6 -4 24 24">
+		<path d="${iconPath}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="2"/>
+	  </svg>
+	`;
+
+	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+