{"version":3,"file":"SearchMap.BoXiChfG.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/k85ZFDb5Gla9dUuLu7y7/JjiT1wharvAGa2IKxuA4/SearchMap.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";const MAX_RADIUS_KM=20;function escapeHtml(str){return str.replace(/&/g,\"&\").replace(//g,\">\").replace(/\"/g,\""\").replace(/'/g,\"'\");}function sanitizeUrl(url){try{const parsed=new URL(url);if(parsed.protocol===\"https:\"||parsed.protocol===\"http:\"){return parsed.href;}}catch{}return\"\";}export default function GoogleMap({googleMapsApiKey,wpRoute,markerIconUrl,initialZoom,focusZoom}){const mapRef=useRef(null);const mapInstance=useRef(null);const markersRef=useRef({});const initialPostcodeRef=useRef(null);const hasAutoScrolledRef=useRef(false);const infoWindowRef=useRef(null);const[search,setSearch]=useState(\"\");const[submittedSearch,setSubmittedSearch]=useState(\"\");const[allLocations,setAllLocations]=useState([]);const[locations,setLocations]=useState([]);const[isLoading,setIsLoading]=useState(true);const[isMapReady,setIsMapReady]=useState(false);const[showAll,setShowAll]=useState(false);const[isSearching,setIsSearching]=useState(false);/* -------------------- STYLES -------------------- */const styles=`\n .gm-root { position: relative; width: 100%; height: 100%; }\n .gm-map { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }\n .gm-overlay {\n position: absolute;\n // top: 50%;\n // left: 24px;\n // transform: translateY(-50%);\n top: 0;\n left:50px;\n bottom:0;\n margin:80px 0 125px 0;\n pointer-events: none;\n }\n .gm-panel {\n width: 520px;\n max-height: 100%;\n background: #fff;\n border-radius: 16px;\n box-shadow: 0 12px 40px rgba(0,0,0,0.15);\n padding: 20px 20px 30px 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n pointer-events: auto;\n overflow: hidden;\n overscroll-behavior: contain;\n }\n .gm-search-label {\n font-family: Montserrat, sans-serif;\n font-size: 20px;\n color: #A0D083;\n font-weight: 600;\n text-align: center;\n flex-shrink: 0;\n }\n .gm-search {\n display: flex;\n gap: 5px;\n padding: 5px;\n border-radius: 50px;\n background-color:#F3F4F5;\n flex-shrink: 0;\n }\n .gm-input {\n flex: 1;\n min-width: 0; /* allows shrinking */\n padding: 20px;\n border-radius: 50px;\n border: 1px solid #ddd;\n font-size: 14px;\n font-family: Montserrat, sans-serif;\n color: #8A8F96;\n height: 48px;\n }\n .gm-input::placeholder {\n color: #999999;\n }\n .gm-input:focus {\n outline: none;\n border: 1px solid #ddd;\n box-shadow: none;\n }\n .gm-button {\n flex-shrink: 0; /* ?? fixed width */\n padding: 12px 18px;\n border-radius: 25px;\n border: none;\n background: #A0D083;\n color: white;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n font-family: Montserrat, sans-serif;\n white-space: nowrap;\n }\n .gm-button:hover:not(:disabled) {\n background: #94C278;\n }\n .gm-button:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n .gm-list {\n overflow-y: auto;\n display: grid;\n gap: 12px;\n flex: 1;\n min-height: 0;\n overscroll-behavior: contain;\n }\n .gm-empty {\n font-family: Montserrat, sans-serif;\n text-align: center;\n padding: 24px;\n color: #777;\n font-size: 14px;\n }\n .gm-item {\n padding: 20px 15px 15px 20px;\n border-radius: 15px;\n background: #E2F1DA;\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 15px;\n cursor: pointer;\n }\n .gm-item-detail{\n display: flex;\n flex-flow: column;\n gap: 15px\n }\n .gm-name-wrapper { \n display: flex; \n gap:5px; \n align-items:center\n }\n .gm-name { \n font-family: Montserrat, sans-serif;\n font-size: 16px;\n font-weight: 600; \n color: #A0D083;\n }\n .gm-km { \n color: #A0D083;\n font-family: Montserrat, sans-serif;\n font-size: 12px; \n } \n .gm-address, .gm-phone { \n font-family: Montserrat, sans-serif;\n font-size: 14px;\n color: #8A8F96;\n } \n .gm-direction a{ \n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n color: #8A8F96 !important;\n } \n .gm-link {\n padding: 12px 18px;\n border-radius: 25px;\n border: none;\n background-color: #A0D083;\n color: white;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n font-family: Montserrat, sans-serif;\n white-space: nowrap;\n text-decoration: none;\n } \n\n .gm-map-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n overflow: hidden;\n }\n .gm-preloader {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #F5FAF3;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n transition: opacity 0.3s ease;\n }\n .gm-preloader.hidden {\n opacity: 0;\n pointer-events: none;\n }\n .gm-spinner {\n width: 48px;\n height: 48px;\n border: 4px solid #e0e0e0;\n border-top: 4px solid #A0D083;\n border-radius: 50%;\n animation: gm-spin 0.8s linear infinite;\n }\n\n .gm-style .gm-style-iw-c{\n border-radius: 25px !important;\n }\n\n\n @keyframes gm-spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @media (max-width: 768px) {\n .gm-root {\n display: flex;\n flex-direction: column;\n // height: auto;\n gap: 16px;\n height: 100%;\n //justify-content:center;\n }\n\n .gm-map-wrapper {\n order: 2;\n // height: 300px;\n flex: 1;\n }\n\n .gm-overlay {\n position: relative;\n order: 1;\n top: auto;\n left: auto;\n right: auto;\n bottom: auto;\n margin: 0;\n padding: 0px;\n }\n\n .gm-panel {\n width: 100%;\n max-height: 400px;\n border-radius: 12px;\n }\n\n .gm-item {\n flex-flow: column;\n align-items: flex-start;\n }\n } \n `;/* -------------------- READ URL PARAM -------------------- */useEffect(()=>{const params=new URLSearchParams(window.location.search);const postcode=params.get(\"postcode\");if(postcode){setSearch(postcode);initialPostcodeRef.current=postcode.trim().toLowerCase();}},[]);/* -------------------- AUTO SCROLL -------------------- */useEffect(()=>{if(initialPostcodeRef.current&&mapRef.current&&!hasAutoScrolledRef.current){hasAutoScrolledRef.current=true;mapRef.current.scrollIntoView({behavior:\"smooth\",block:\"center\"});}},[]);/* -------------------- LOAD GOOGLE MAPS SCRIPT -------------------- */useEffect(()=>{if(window.google?.maps)return;const existingScript=document.querySelector('script[src*=\"maps.googleapis.com/maps/api/js\"]');if(existingScript)return;const script=document.createElement(\"script\");script.src=`https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}`;script.async=true;script.onerror=()=>console.error(\"Failed to load Google Maps script\");document.head.appendChild(script);},[googleMapsApiKey]);/* -------------------- LOAD DATA + MAP -------------------- */useEffect(()=>{let cancelled=false;async function loadDataAndInitMap(){setIsLoading(true);setIsMapReady(false);const res=await fetch(wpRoute);const json=await res.json();const items=json.data?.boards?.[0]?.groups?.[0]?.items_page?.items;if(!Array.isArray(items)){console.error(\"Unexpected API response structure\");setIsLoading(false);return;}const parsedLocations=items.map(item=>{const lat=parseFloat(item.column_values.find(c=>c.id===\"text_mm0an8qv\")?.text||\"\");const lng=parseFloat(item.column_values.find(c=>c.id===\"text_mm0adgr4\")?.text||\"\");if(!Number.isFinite(lat)||!Number.isFinite(lng))return null;const postcode=(item.column_values.find(c=>c.id===\"text_mm0awty8\")?.text||\"\").trim().toLowerCase();const address=item.column_values.find(c=>c.id===\"text__1\")?.text||\"\";const url=item.column_values.find(c=>c.id===\"text_mm0a8etp\")?.text||\"\";const name=item.name.replace(/\\bEd Park\\b/g,\"Edmondson Park\");return{name,address,postcode,lat,lng,url};}).filter(Boolean);if(cancelled)return;setAllLocations(parsedLocations);setLocations(parsedLocations);setIsLoading(false);// --- Wait for Google Maps to be available, then init map ---\nawait waitForGoogleMaps();if(cancelled||!mapRef.current||parsedLocations.length===0)return;const map=new window.google.maps.Map(mapRef.current,{zoom:initialZoom,center:parsedLocations[0],mapTypeControl:false,fullscreenControl:false,streetViewControl:false,zoomControl:false,rotateControl:false,scaleControl:false});mapInstance.current=map;markersRef.current={};const customMarkerIcon=markerIconUrl&&window.google?{url:markerIconUrl,scaledSize:new window.google.maps.Size(40,40),anchor:new window.google.maps.Point(20,40)}:undefined;const infoWindow=new window.google.maps.InfoWindow;infoWindowRef.current=infoWindow;parsedLocations.forEach(loc=>{const marker=new window.google.maps.Marker({position:{lat:loc.lat,lng:loc.lng},map,title:loc.name,icon:customMarkerIcon});marker.addListener(\"click\",()=>{const directionsUrl=`https://www.google.com/maps/dir/?api=1&destination=${loc.lat},${loc.lng}&travelmode=driving`;const safeUrl=sanitizeUrl(loc.url);infoWindow.setContent(`\n \n
${escapeHtml(loc.name)}
\n
${escapeHtml(loc.address)}
\n
Phone: 1300 147 683
\n
\n
\n
${escapeHtml(loc.name)}
\n
${escapeHtml(loc.address)}
\n
Phone: 1300 147 683
\n
\n