{"id":775,"date":"2024-04-18T07:37:47","date_gmt":"2024-04-18T07:37:47","guid":{"rendered":"https:\/\/opadata.com.au\/drakeem\/?page_id=775"},"modified":"2026-02-18T13:36:11","modified_gmt":"2026-02-18T13:36:11","slug":"find-a-location","status":"publish","type":"page","link":"https:\/\/opadata.com.au\/drakeem\/find-a-location\/","title":{"rendered":"Find a Location"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"775\" class=\"elementor elementor-775\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6353f44 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"6353f44\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b50ef41\" data-id=\"b50ef41\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-911b3a3 elementor-widget elementor-widget-html\" data-id=\"911b3a3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* Basic Reset (often handled by WordPress\/Elementor, but good to include for safety) *\/\r\n    .find-location-container * {\r\n        margin: 0;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* Outer container to scope styles and prevent conflicts *\/\r\n    .find-location-container {\r\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        background-color: #f8f9fa; \/* You might want to let Elementor manage background *\/\r\n        line-height: 1.6;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 40px 20px; \/* Adjust padding based on Elementor section\/column settings *\/\r\n    }\r\n\r\n    \/* Header Section *\/\r\n    .find-location-header {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .find-location-header-tag {\r\n        color: #007bff;\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .find-location-header h1 {\r\n        font-size: 36px;\r\n        font-weight: 600;\r\n        color: #333;\r\n    }\r\n\r\n    .find-location-header h1 .highlight {\r\n        color: #333;\r\n        font-weight: 700;\r\n    }\r\n\r\n    \/* Search Form *\/\r\n    .find-location-search-form {\r\n        background: white;\r\n        border-radius: 15px;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n        padding: 30px;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .find-location-form-row {\r\n        display: flex;\r\n        gap: 20px;\r\n        align-items: flex-end; \/* Changed from end to flex-end for consistency *\/\r\n    }\r\n\r\n    .find-location-form-group {\r\n        flex: 1;\r\n    }\r\n\r\n    .find-location-form-group label {\r\n        display: block;\r\n        font-size: 14px;\r\n        font-weight: 500;\r\n        color: #666;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .find-location-form-select {\r\n        width: 100%;\r\n        padding: 12px 16px;\r\n        border: 2px solid #e9ecef;\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n        color: #333;\r\n        background: #f8f9fa;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .find-location-form-select:focus {\r\n        outline: none;\r\n        border-color: #007bff;\r\n        background: white;\r\n    }\r\n\r\n    .find-location-input-wrapper { \/* Renamed from location-input to avoid potential conflicts *\/\r\n        position: relative;\r\n    }\r\n\r\n    .find-location-input-wrapper input {\r\n        width: 100%;\r\n        padding: 12px 45px 12px 16px;\r\n        border: 2px solid #e9ecef;\r\n        border-radius: 8px;\r\n        font-size: 14px;\r\n        color: #333;\r\n        background: white;\r\n    }\r\n\r\n    .find-location-input-wrapper input:focus {\r\n        outline: none;\r\n        border-color: #007bff;\r\n    }\r\n\r\n    .find-location-icon { \/* Renamed from location-icon *\/\r\n        position: absolute;\r\n        right: 15px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        color: #007bff;\r\n        cursor: pointer;\r\n    }\r\n\r\n    \/* Main Content *\/\r\n    .find-location-main-content { \/* Renamed from main-content *\/\r\n        display: flex;\r\n        gap: 40px;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .find-location-locations-panel { \/* Renamed from locations-panel *\/\r\n        flex: 1;\r\n    }\r\n\r\n    .find-location-map-panel { \/* Renamed from map-panel *\/\r\n        flex: 1;\r\n        position: sticky;\r\n        top: 20px; \/* Adjust based on Elementor header height if needed *\/\r\n    }\r\n\r\n    \/* Locations *\/\r\n    .find-location-locations-header { \/* Renamed from locations-header *\/\r\n        font-size: 18px;\r\n        font-weight: 600;\r\n        color: #333;\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    .find-location-card { \/* Renamed from location-card *\/\r\n        background: white;\r\n        border-radius: 15px;\r\n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\r\n        margin-bottom: 20px;\r\n        overflow: hidden;\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .find-location-card:hover {\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);\r\n    }\r\n\r\n    .find-location-card.active { \/* Added class for visual active state *\/\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        border: 1px solid #007bff; \/* Optional: add a border to active card *\/\r\n    }\r\n\r\n    .find-location-content { \/* Renamed from location-content *\/\r\n        display: flex;\r\n        padding: 25px;\r\n    }\r\n\r\n    .find-location-image { \/* Renamed from location-image *\/\r\n        width: 320px;\r\n        height: 100px;\r\n        border-radius: 10px;\r\n        object-fit: cover;\r\n        margin-right: 20px;\r\n    }\r\n\r\n    .find-location-info { \/* Renamed from location-info *\/\r\n        flex: 1;\r\n    }\r\n\r\n    .find-location-tag { \/* Renamed from location-tag *\/\r\n        font-size: 12px;\r\n        color: #666;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .find-location-name { \/* Renamed from location-name *\/\r\n        font-size: 18px;\r\n        font-weight: 600;\r\n        color: #333;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .find-location-address { \/* Renamed from location-address *\/\r\n        font-size: 14px;\r\n        color: #666;\r\n        line-height: 1.4;\r\n    }\r\n\r\n    .find-location-arrow { \/* Renamed from location-arrow *\/\r\n        background: #007bff;\r\n        color: white;\r\n        border: none;\r\n        border-radius: 50%;\r\n        width: 40px;\r\n        height: 40px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: background 0.3s ease;\r\n        align-self: center;\r\n        flex-shrink: 0; \/* Prevent it from shrinking on smaller screens *\/\r\n    }\r\n\r\n    .find-location-arrow:hover {\r\n        background: #0056b3;\r\n    }\r\n\r\n    \/* Map *\/\r\n    .find-location-map-container { \/* Renamed from map-container *\/\r\n        background: white;\r\n        border-radius: 15px;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n        overflow: hidden;\r\n        height: 500px;\r\n        position: relative;\r\n    }\r\n\r\n    .find-location-map-iframe { \/* Renamed from map-iframe *\/\r\n        width: 100%;\r\n        height: 100%;\r\n        border: 0;\r\n    }\r\n\r\n    \/* Responsive Design - Adjusted for better mobile experience *\/\r\n    @media (max-width: 992px) {\r\n        .find-location-main-content {\r\n            flex-direction: column;\r\n            gap: 30px;\r\n        }\r\n\r\n        .find-location-map-panel {\r\n            position: static; \/* Remove sticky positioning on smaller screens *\/\r\n            top: auto;\r\n        }\r\n\r\n        .find-location-map-container {\r\n            height: 400px; \/* Slightly reduced map height for tablets *\/\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .find-location-container {\r\n            padding: 20px 15px; \/* More consistent padding for smaller devices *\/\r\n        }\r\n\r\n        .find-location-header h1 {\r\n            font-size: 28px;\r\n        }\r\n\r\n        .find-location-form-row {\r\n            flex-direction: column;\r\n            gap: 15px;\r\n            align-items: stretch; \/* Make form elements stretch full width *\/\r\n        }\r\n\r\n        .find-location-search-form {\r\n            padding: 20px;\r\n        }\r\n\r\n        .find-location-content {\r\n            flex-direction: column; \/* Stack image and info vertically *\/\r\n            padding: 20px;\r\n            text-align: center; \/* Center text for stacked layout *\/\r\n        }\r\n\r\n        .find-location-image {\r\n            width: 100%; \/* Make image full width *\/\r\n            max-width: 250px; \/* Limit max-width to prevent huge images on smaller tablets *\/\r\n            height: 150px;\r\n            margin-right: 0;\r\n            margin-bottom: 15px;\r\n            margin-left: auto; \/* Center image *\/\r\n            margin-right: auto; \/* Center image *\/\r\n        }\r\n\r\n        .find-location-arrow {\r\n            align-self: center; \/* Center the arrow button *\/\r\n            margin-top: 10px;\r\n        }\r\n\r\n        .find-location-map-container {\r\n            height: 350px; \/* Adjusted map height for phones *\/\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .find-location-header h1 {\r\n            font-size: 24px;\r\n        }\r\n\r\n        .find-location-name {\r\n            font-size: 16px;\r\n        }\r\n\r\n        .find-location-map-container {\r\n            height: 250px; \/* Further reduced map height for very small phones *\/\r\n        }\r\n    }\r\n\r\n    \/* Elementor Specific Adjustments (optional, but good practice) *\/\r\n    \/* If you find default Elementor margins\/paddings interfering, use: *\/\r\n    .elementor-widget-container .find-location-container {\r\n        \/* Add specific overrides here if necessary, e.g., margin: 0 !important; *\/\r\n    }\r\n<\/style>\r\n\r\n<div class=\"find-location-container\">\r\n    <div class=\"find-location-header\">\r\n        <div class=\"find-location-header-tag\">FIND A LOCATION<\/div>\r\n        <h1>Find Your <span class=\"highlight\">Nearest<\/span> Location<\/h1>\r\n    <\/div>\r\n\r\n    <div class=\"find-location-search-form\">\r\n        <div class=\"find-location-form-row\">\r\n            <div class=\"find-location-form-group\">\r\n                <label for=\"service\">Service<\/label>\r\n                <select id=\"service\" class=\"find-location-form-select\">\r\n                    <option>Select A Service<\/option>\r\n                    <option>General Consultation<\/option>\r\n                    \r\n                <\/select>\r\n            <\/div>\r\n            <div class=\"find-location-form-group\">\r\n                <label for=\"facility\">Medical Centre<\/label>\r\n                <select id=\"facility\" class=\"find-location-form-select\">\r\n                    <option value=\"Toodyay Medical Centre\">Toodyay Medical Centre<\/option>\r\n                    <option value=\"Goomalling Medical Centre\">Goomalling Medical Centre<\/option>\r\n                <\/select>\r\n            <\/div>\r\n            <div class=\"find-location-form-group\">\r\n                <label for=\"location\">Location<\/label>\r\n                <div class=\"find-location-input-wrapper\">\r\n                    <input type=\"text\" id=\"location\" placeholder=\"81 Stirling Terrace Toodyay, WA, Australia\" value=\"81 Stirling Terrace Toodyay, WA, Australia\">\r\n                    <div class=\"find-location-icon\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n                            <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/>\r\n                        <\/svg>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"find-location-main-content\">\r\n        <div class=\"find-location-locations-panel\">\r\n            <h2 class=\"find-location-locations-header\">Currently Available Locations<\/h2>\r\n            \r\n            <div class=\"find-location-card\" data-location=\"Toodyay Medical Centre\">\r\n                <div class=\"find-location-content\">\r\n                    <img decoding=\"async\" src=\"https:\/\/opadata.com.au\/drakeem\/wp-content\/uploads\/2025\/05\/TMG-Sign.jpg\" alt=\"Toodyay Medical Centre\" class=\"find-location-image\">\r\n                    <div class=\"find-location-info\">\r\n                        <div class=\"find-location-tag\">Location<\/div>\r\n                        <div class=\"find-location-name\">Toodyay Medical Centre<\/div>\r\n                        <div class=\"find-location-address\">\r\n                            81 Stirling Terrace,<br>\r\n                            Toodyay 6566\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"find-location-arrow\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                            <path d=\"m9 18 6-6-6-6\"\/>\r\n                        <\/svg>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"find-location-card\" data-location=\"Goomalling Medical Centre\">\r\n                <div class=\"find-location-content\">\r\n                    <img decoding=\"async\" src=\"https:\/\/opadata.com.au\/drakeem\/wp-content\/uploads\/2025\/07\/location2.webp\" class=\"find-location-image\">\r\n                    <div class=\"find-location-info\">\r\n                        <div class=\"find-location-tag\">Location<\/div>\r\n                        <div class=\"find-location-name\">Goomalling Medical Centre<\/div>\r\n                        <div class=\"find-location-address\">\r\n                            51 Railway Terrace,<br>\r\n                            Goomalling 6460\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"find-location-arrow\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                            <path d=\"m9 18 6-6-6-6\"\/>\r\n                        <\/svg>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"find-location-map-panel\">\r\n            <div class=\"find-location-map-container\">\r\n                <iframe id=\"google-map-iframe\" class=\"find-location-map-iframe\"\r\n                    src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3400.0094923819574!2d116.46733747532292!3d-31.551354102788437!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2bccd44c7c01a54d%3A0x6ddbac0099a91d9a!2s81%20Stirling%20Terrace%2C%20Toodyay%20WA%206566!5e0!3m2!1sen!2sau!4v1753189155646!5m2!1sen!2sau\" \r\n                    allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\">\r\n                <\/iframe>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const locationCards = document.querySelectorAll('.find-location-card');\r\n        const locationInput = document.getElementById('location');\r\n        const serviceSelect = document.getElementById('service');\r\n        const facilitySelect = document.getElementById('facility');\r\n        const googleMapIframe = document.getElementById('google-map-iframe');\r\n\r\n        \/\/ Map of facility names to Google Maps embed URLs\r\n        const mapUrls = {\r\n            'Toodyay Medical Centre': \"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3400.0094923819574!2d116.46733747532292!3d-31.551354102788437!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2bccd44c7c01a54d%3A0x6ddbac0099a91d9a!2s81%20Stirling%20Terrace%2C%20Toodyay%20WA%206566!5e0!3m2!1sen!2sau!4v1753189155646!5m2!1sen!2sau\",\r\n            'Goomalling Medical Centre': \"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3409.1781864858885!2d116.82406947531076!3d-31.298819890577217!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2bccb8e9787da301%3A0xd7d067add279fa9c!2sGoomalling%20Medical%20Surgery!5e0!3m2!1sen!2sau!4v1753189187740!5m2!1sen!2sau\"\r\n        };\r\n\r\n        \/\/ Function to update the map iframe\r\n        function updateMap(facilityName) {\r\n            if (mapUrls[facilityName]) {\r\n                googleMapIframe.src = mapUrls[facilityName];\r\n            }\r\n        }\r\n\r\n        \/\/ Function to set active card styling\r\n        function setActiveCard(selectedFacility) {\r\n            locationCards.forEach(card => {\r\n                if (card.dataset.location === selectedFacility) {\r\n                    card.classList.add('active');\r\n                } else {\r\n                    card.classList.remove('active');\r\n                }\r\n            });\r\n        }\r\n\r\n        \/\/ Set initial map and active card based on the default selected option (Toodyay)\r\n        const initialFacility = facilitySelect.value;\r\n        updateMap(initialFacility);\r\n        setActiveCard(initialFacility);\r\n        \r\n        \/\/ Location card click handlers\r\n        locationCards.forEach((card) => {\r\n            card.addEventListener('click', function() {\r\n                const selectedFacility = this.dataset.location;\r\n                facilitySelect.value = selectedFacility;\r\n                \r\n                if (selectedFacility === 'Toodyay Medical Centre') {\r\n                    locationInput.value = '81 Stirling Terrace, Toodyay, WA, Australia';\r\n                } else if (selectedFacility === 'Goomalling Medical Centre') {\r\n                    locationInput.value = '51 Railway Terrace, Goomalling, WA, Australia';\r\n                }\r\n                \r\n                updateMap(selectedFacility);\r\n                setActiveCard(selectedFacility); \/\/ Set active class on click\r\n            });\r\n        });\r\n\r\n        \/\/ Location icon click handler (Geolocation - unchanged)\r\n        const locationIcon = document.querySelector('.find-location-icon');\r\n        locationIcon.addEventListener('click', function() {\r\n            if (navigator.geolocation) {\r\n                navigator.geolocation.getCurrentPosition(function(position) {\r\n                    console.log('Current position:', position.coords.latitude, position.coords.longitude);\r\n                    locationInput.value = 'Current Location';\r\n                    \/\/ In a real application, you would use a geocoding API here\r\n                    \/\/ to convert coordinates to an address and potentially update the map.\r\n                });\r\n            } else {\r\n                alert(\"Geolocation is not supported by this browser.\");\r\n            }\r\n        });\r\n\r\n        \/\/ Form change handlers\r\n        serviceSelect.addEventListener('change', function() {\r\n            console.log('Service selected:', this.value);\r\n        });\r\n\r\n        facilitySelect.addEventListener('change', function() {\r\n            console.log('Facility selected:', this.value);\r\n            const selectedFacility = this.value;\r\n\r\n            \/\/ Update location input based on facility selection\r\n            if (selectedFacility === 'Toodyay Medical Centre') {\r\n                locationInput.value = '81 Stirling Terrace, Toodyay, WA, Australia';\r\n            } else if (selectedFacility === 'Goomalling Medical Centre') {\r\n                locationInput.value = '51 Railway Terrace, Goomalling, WA, Australia';\r\n            }\r\n            updateMap(selectedFacility);\r\n            setActiveCard(selectedFacility); \/\/ Set active class on dropdown change\r\n        });\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>FIND A LOCATION Find Your Nearest Location Service Select A ServiceGeneral Consultation Medical Centre Toodyay Medical CentreGoomalling Medical Centre Location Currently Available Locations Location Toodyay Medical Centre 81 Stirling Terrace, Toodyay 6566 Location Goomalling Medical Centre 51 Railway Terrace, Goomalling 6460<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-775","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/pages\/775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/comments?post=775"}],"version-history":[{"count":24,"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/pages\/775\/revisions"}],"predecessor-version":[{"id":5963,"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/pages\/775\/revisions\/5963"}],"wp:attachment":[{"href":"https:\/\/opadata.com.au\/drakeem\/wp-json\/wp\/v2\/media?parent=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}