diff --git a/src/components/forms/fields/GeolocationInput.tsx b/src/components/forms/fields/GeolocationInput.tsx
index 406d7b0..50e7e80 100644
--- a/src/components/forms/fields/GeolocationInput.tsx
+++ b/src/components/forms/fields/GeolocationInput.tsx
@@ -1,7 +1,10 @@
 import { useState, useEffect, useCallback } from 'react';
 import { Modal } from '../../reusable/Modal';
 import { Button } from '../../buttons/Button';
-import { useJsApiLoader, GoogleMap, Marker } from '@react-google-maps/api';
+import { useJsApiLoader, GoogleMap } from '@react-google-maps/api';
+import { CustomAdvancedMarker } from '../../maps/CustomAdvancedMarker';
+
+const libraries: ("marker")[] = ["marker"];
 import { MapPin, Crosshair, Map as MapIcon, Loader2, X } from 'lucide-react';
 
 const mapContainerStyle = {
@@ -31,7 +34,8 @@ export function GeolocationInput({
 
   const { isLoaded } = useJsApiLoader({
     id: 'google-map-script',
-    googleMapsApiKey: isLocalhost ? '' : (import.meta.env.VITE_GOOGLE_MAPS_API_KEY || '')
+    googleMapsApiKey: isLocalhost ? '' : (import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''),
+    libraries
   });
 
   // Extract lat, lng & accuracy from value (supporting both latitude/longitude and lat/lng)
@@ -181,11 +185,12 @@ export function GeolocationInput({
                   options={{
                     streetViewControl: false,
                     mapTypeControl: false,
-                    fullscreenControl: false
+                    fullscreenControl: false,
+                    mapId: "DEMO_MAP_ID"
                   }}
                 >
                   {mapMarkerPos && (
-                    <Marker position={mapMarkerPos} />
+                    <CustomAdvancedMarker position={mapMarkerPos} />
                   )}
                 </GoogleMap>
               )}
diff --git a/src/components/maps/CustomAdvancedMarker.tsx b/src/components/maps/CustomAdvancedMarker.tsx
new file mode 100644
index 0000000..e3e8328
--- /dev/null
+++ b/src/components/maps/CustomAdvancedMarker.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import { useGoogleMap } from '@react-google-maps/api';
+
+export function CustomAdvancedMarker({
+  position,
+  title,
+  iconUrl,
+  onClick
+}: {
+  position: google.maps.LatLngLiteral;
+  title?: string;
+  iconUrl?: string;
+  onClick?: () => void;
+}) {
+  const map = useGoogleMap();
+  const markerRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!map || !window.google?.maps?.marker?.AdvancedMarkerElement) return;
+
+    let content: HTMLElement | undefined;
+    if (iconUrl) {
+      const img = document.createElement('img');
+      img.src = iconUrl;
+      img.style.width = '32px';
+      img.style.height = '32px';
+      content = img;
+    }
+
+    markerRef.current = new window.google.maps.marker.AdvancedMarkerElement({
+      map,
+      position,
+      title,
+      content,
+    });
+
+    if (onClick && markerRef.current) {
+      markerRef.current.addListener('gmp-click', onClick);
+    }
+
+    return () => {
+      if (markerRef.current) {
+        google.maps.event.clearInstanceListeners(markerRef.current);
+        markerRef.current.map = null;
+      }
+    };
+  }, [map, position.lat, position.lng, title, iconUrl, onClick]);
+
+  return null;
+}
diff --git a/src/components/maps/NearestStoresMap.tsx b/src/components/maps/NearestStoresMap.tsx
index 2e64541..ca7cdd8 100644
--- a/src/components/maps/NearestStoresMap.tsx
+++ b/src/components/maps/NearestStoresMap.tsx
@@ -1,5 +1,9 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useJsApiLoader, GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';
+import { useJsApiLoader, GoogleMap, InfoWindow } from '@react-google-maps/api';
+
+const libraries: ("marker")[] = ["marker"];
+
+import { CustomAdvancedMarker } from './CustomAdvancedMarker';
 import { PIPELINE, BASE_URL } from '../../api/config';
 import { Loader2, MapPin, ChevronDown, ChevronUp } from 'lucide-react';
 
@@ -48,7 +52,8 @@ export function NearestStoresMap() {
 
   const { isLoaded } = useJsApiLoader({
     id: 'google-map-script',
-    googleMapsApiKey: isLocalhost ? '' : (import.meta.env.VITE_GOOGLE_MAPS_API_KEY || '')
+    googleMapsApiKey: isLocalhost ? '' : (import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''),
+    libraries
   });
 
   const fetchNearestStores = async (lat: number, lng: number) => {
@@ -155,16 +160,15 @@ export function NearestStoresMap() {
           options={{
             streetViewControl: false,
             mapTypeControl: false,
-            fullscreenControl: false
+            fullscreenControl: false,
+            mapId: "DEMO_MAP_ID"
           }}
         >
           {/* User's Current Location Marker */}
           {userLocation && (
-            <Marker
+            <CustomAdvancedMarker
               position={userLocation}
-              icon={{
-                url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
-              }}
+              iconUrl="https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
               title="You are here"
             />
           )}
@@ -172,7 +176,7 @@ export function NearestStoresMap() {
           {/* Stores Markers */}
           {stores.map((store) => (
             store.location && (
-              <Marker
+              <CustomAdvancedMarker
                 key={store.store_code}
                 position={{ lat: store.location.latitude, lng: store.location.longitude }}
                 onClick={() => setSelectedStore(store)}