{"id":833,"date":"2025-12-21T15:55:00","date_gmt":"2025-12-21T12:55:00","guid":{"rendered":"https:\/\/mapsfun.com\/?p=833"},"modified":"2025-12-21T15:55:00","modified_gmt":"2025-12-21T12:55:00","slug":"solution-for-displaying-real-estate-on-a-realtors-map","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=833","title":{"rendered":"Solution for displaying real estate on a realtor&#8217;s map"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Professional Realtor Map for Your Real Estate Website<\/h2>\n\n\n\n<p>As a realtor, your website needs to stand out, and nothing engages potential clients more than an interactive map showcasing your listings. A dedicated &#8220;realtor map&#8221; can be your most powerful lead generation tool. While it&#8217;s possible to build one from scratch, the technical process is complex. This guide walks you through a functional method using Google Maps APIs, followed by a much simpler solution.<\/p>\n\n\n\n<p><strong>The manual approach requires a Google Cloud account, API key management, and coding knowledge.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Building a Custom Realtor Map with Google Maps API<\/strong><\/p>\n\n\n\n<p>This method provides maximum customization but involves multiple technical steps.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Google Cloud Setup &amp; API Configuration<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Create a Google Cloud Project: <\/strong>Go to the <strong>[Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong>, create a new project, and enable billing (the $200 monthly credit typically covers usage for a realtor&#8217;s website).<\/li>\n\n\n\n<li><strong>2.\u00a0 Enable Required APIs:<\/strong> Navigate to &#8220;APIs &amp; Services > Library&#8221; and enable:\n<ul class=\"wp-block-list\">\n<li>Maps JavaScript API (displays the map)<\/li>\n\n\n\n<li>Geocoding API (converts addresses to coordinates)<\/li>\n\n\n\n<li>Places API (for area search functionality)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>3.\u00a0 Generate Secure API Key: <\/strong>Create an API key in &#8220;Credentials&#8221; and <strong>restrict it<\/strong> to the three APIs above. Add your website domain under HTTP referrers (e.g., `https:\/\/yourrealestatesite.com\/*`) for security.<\/li>\n<\/ul>\n\n\n\n<p><strong>Proper API key restriction is crucial for security and cost control.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"691\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-209-1024x691.png\" alt=\"\" class=\"wp-image-834\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-209-1024x691.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-209-300x202.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-209-768x518.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-209.png 1217w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Develop the Interactive Realtor Map<\/p>\n\n\n\n<p>The following code creates a professional realtor map with branded markers, property filtering, and lead capture functionality.<\/p>\n\n\n\n<p><strong>Create a file named `realtor-map.html`:<\/strong><\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>John Smith Realtor | Property Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Load Google Maps API --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;callback=initMap&amp;libraries=places\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-pseudo\">:root<\/span> {\n            <span class=\"hljs-attribute\">--primary-color<\/span>: <span class=\"hljs-number\">#1e40af<\/span>;\n            <span class=\"hljs-attribute\">--secondary-color<\/span>: <span class=\"hljs-number\">#3b82f6<\/span>;\n            <span class=\"hljs-attribute\">--accent-color<\/span>: <span class=\"hljs-number\">#ef4444<\/span>;\n        }\n        \n        * {\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Inter'<\/span>, sans-serif;\n        }\n        \n        <span class=\"hljs-selector-class\">.realtor-header<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, var(--primary-color), <span class=\"hljs-built_in\">var<\/span>(--secondary-color));\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span> <span class=\"hljs-number\">2rem<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n        }\n        \n        <span class=\"hljs-selector-class\">.realtor-info<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.25rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.realtor-info<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.9<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.contact-btn<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--accent-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.75rem<\/span> <span class=\"hljs-number\">1.5rem<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-built_in\">calc<\/span>(<span class=\"hljs-number\">100vh<\/span> - <span class=\"hljs-number\">80px<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.map-sidebar<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8fafc<\/span>;\n            <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e2e8f0<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n        }\n        \n        <span class=\"hljs-selector-class\">.search-filters<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e2e8f0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-grid<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: grid;\n            <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr <span class=\"hljs-number\">1<\/span>fr;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-group<\/span> <span class=\"hljs-selector-tag\">label<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: block;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.875rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#374151<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-select<\/span>, <span class=\"hljs-selector-class\">.filter-input<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#d1d5db<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.875rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.search-btn<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.75rem<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n        }\n        \n        <span class=\"hljs-selector-class\">.properties-container<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.property-card<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid transparent;\n        }\n        \n        <span class=\"hljs-selector-class\">.property-card<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--secondary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.property-card<\/span><span class=\"hljs-selector-class\">.active<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--accent-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.property-badge<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--accent-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.25rem<\/span> <span class=\"hljs-number\">0.5rem<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.75rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n        }\n        \n        <span class=\"hljs-selector-class\">.property-price<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.25rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.property-address<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#6b7280<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.875rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">0.75rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.property-features<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.875rem<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#4b5563<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.lead-form<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.lead-form<\/span> <span class=\"hljs-selector-tag\">h3<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.form-group<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.form-input<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.5rem<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#d1d5db<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.875rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.submit-btn<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0.75rem<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"realtor-header\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"realtor-info\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>John Smith Realtor<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Your Trusted Real Estate Professional<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"contact-btn\"<\/span>&gt;<\/span>Contact Me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-sidebar\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-filters\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-grid\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"price-range\"<\/span>&gt;<\/span>Price Range<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"price-range\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-select\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"any\"<\/span>&gt;<\/span>Any Price<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"500000\"<\/span>&gt;<\/span>Up to $500,000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"750000\"<\/span>&gt;<\/span>Up to $750,000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"1000000\"<\/span>&gt;<\/span>Up to $1,000,000<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"2000000\"<\/span>&gt;<\/span>$1,000,000+<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"bedrooms\"<\/span>&gt;<\/span>Bedrooms<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"bedrooms\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-select\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"any\"<\/span>&gt;<\/span>Any<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"1\"<\/span>&gt;<\/span>1+<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"2\"<\/span>&gt;<\/span>2+<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"3\"<\/span>&gt;<\/span>3+<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"4\"<\/span>&gt;<\/span>4+<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"property-type\"<\/span>&gt;<\/span>Property Type<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"property-type\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-select\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"any\"<\/span>&gt;<\/span>Any Type<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"single_family\"<\/span>&gt;<\/span>Single Family<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"condo\"<\/span>&gt;<\/span>Condo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"townhouse\"<\/span>&gt;<\/span>Townhouse<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"status\"<\/span>&gt;<\/span>Status<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">select<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"status\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-select\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"any\"<\/span>&gt;<\/span>Any Status<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"active\"<\/span>&gt;<\/span>Active<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"pending\"<\/span>&gt;<\/span>Pending<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">option<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"sold\"<\/span>&gt;<\/span>Sold<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-btn\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"applyFilters()\"<\/span>&gt;<\/span>Search Properties<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"properties-container\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"properties-container\"<\/span>&gt;<\/span>\n                <span class=\"hljs-comment\">&lt;!-- Property listings will be generated here --&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"lead-form\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Interested in a Property?<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Your Name\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"email\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Your Email\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"tel\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Your Phone\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"submit-btn\"<\/span>&gt;<\/span>Request Information<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> activeInfoWindow = <span class=\"hljs-literal\">null<\/span>;\n        \n        <span class=\"hljs-keyword\">const<\/span> allListings = &#91;\n            {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Luxury Downtown Condo\"<\/span>,\n                <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">750000<\/span>,\n                <span class=\"hljs-attr\">beds<\/span>: <span class=\"hljs-number\">2<\/span>,\n                <span class=\"hljs-attr\">baths<\/span>: <span class=\"hljs-number\">2<\/span>,\n                <span class=\"hljs-attr\">sqft<\/span>: <span class=\"hljs-number\">1450<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"123 Main Street, Downtown, CA\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">34.0522<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-118.2437<\/span> },\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"condo\"<\/span>,\n                <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-string\">\"active\"<\/span>,\n                <span class=\"hljs-attr\">featured<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Stunning downtown condo with panoramic city views and luxury finishes.\"<\/span>,\n                <span class=\"hljs-attr\">yearBuilt<\/span>: <span class=\"hljs-number\">2020<\/span>,\n                <span class=\"hljs-attr\">mls<\/span>: <span class=\"hljs-string\">\"MLS# 123456\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Family Home in Suburbs\"<\/span>,\n                <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">950000<\/span>,\n                <span class=\"hljs-attr\">beds<\/span>: <span class=\"hljs-number\">4<\/span>,\n                <span class=\"hljs-attr\">baths<\/span>: <span class=\"hljs-number\">3<\/span>,\n                <span class=\"hljs-attr\">sqft<\/span>: <span class=\"hljs-number\">2400<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Oak Avenue, Suburbia, CA\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">34.0634<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-118.2780<\/span> },\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"single_family\"<\/span>,\n                <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-string\">\"active\"<\/span>,\n                <span class=\"hljs-attr\">featured<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Perfect family home in quiet neighborhood with excellent schools.\"<\/span>,\n                <span class=\"hljs-attr\">yearBuilt<\/span>: <span class=\"hljs-number\">1995<\/span>,\n                <span class=\"hljs-attr\">mls<\/span>: <span class=\"hljs-string\">\"MLS# 123457\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">3<\/span>,\n                <span class=\"hljs-attr\">title<\/span>: <span class=\"hljs-string\">\"Modern Townhouse\"<\/span>,\n                <span class=\"hljs-attr\">price<\/span>: <span class=\"hljs-number\">650000<\/span>,\n                <span class=\"hljs-attr\">beds<\/span>: <span class=\"hljs-number\">3<\/span>,\n                <span class=\"hljs-attr\">baths<\/span>: <span class=\"hljs-number\">2.5<\/span>,\n                <span class=\"hljs-attr\">sqft<\/span>: <span class=\"hljs-number\">1800<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"789 Pine Road, Midtown, CA\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">34.0419<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-118.2570<\/span> },\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"townhouse\"<\/span>,\n                <span class=\"hljs-attr\">status<\/span>: <span class=\"hljs-string\">\"pending\"<\/span>,\n                <span class=\"hljs-attr\">featured<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Recently renovated townhouse with modern amenities and private patio.\"<\/span>,\n                <span class=\"hljs-attr\">yearBuilt<\/span>: <span class=\"hljs-number\">2010<\/span>,\n                <span class=\"hljs-attr\">mls<\/span>: <span class=\"hljs-string\">\"MLS# 123458\"<\/span>\n            }\n        ];\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">34.0522<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-118.2437<\/span> },\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">11<\/span>,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"poi\"<\/span>,\n                        <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>,\n                        <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n                    }\n                ]\n            });\n\n            <span class=\"hljs-comment\">\/\/ Initialize listings<\/span>\n            updateListingsDisplay(allListings);\n\n            <span class=\"hljs-comment\">\/\/ Add search box for locations<\/span>\n            <span class=\"hljs-keyword\">const<\/span> input = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'input'<\/span>);\n            input.placeholder = <span class=\"hljs-string\">'Search neighborhoods...'<\/span>;\n            input.style.cssText = <span class=\"hljs-string\">`\n                margin-top: 10px;\n                margin-left: 10px;\n                padding: 8px 12px;\n                width: 300px;\n                border: 1px solid #ddd;\n                border-radius: 4px;\n                font-size: 14px;\n            `<\/span>;\n            map.controls&#91;google.maps.ControlPosition.TOP_LEFT].push(input);\n\n            <span class=\"hljs-keyword\">const<\/span> searchBox = <span class=\"hljs-keyword\">new<\/span> google.maps.places.SearchBox(input);\n            \n            map.addListener(<span class=\"hljs-string\">'bounds_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                searchBox.setBounds(map.getBounds());\n            });\n\n            searchBox.addListener(<span class=\"hljs-string\">'places_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                <span class=\"hljs-keyword\">const<\/span> places = searchBox.getPlaces();\n                <span class=\"hljs-keyword\">if<\/span> (places.length === <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n                \n                <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n                places.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">place<\/span> =&gt;<\/span> {\n                    <span class=\"hljs-keyword\">if<\/span> (!place.geometry) <span class=\"hljs-keyword\">return<\/span>;\n                    bounds.extend(place.geometry.location);\n                });\n                map.fitBounds(bounds);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateListingsDisplay<\/span>(<span class=\"hljs-params\">listings<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Clear existing markers<\/span>\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> marker.setMap(<span class=\"hljs-literal\">null<\/span>));\n            markers = &#91;];\n\n            <span class=\"hljs-comment\">\/\/ Update listings container<\/span>\n            <span class=\"hljs-keyword\">const<\/span> container = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'properties-container'<\/span>);\n            container.innerHTML = <span class=\"hljs-string\">''<\/span>;\n\n            listings.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">listing<\/span> =&gt;<\/span> {\n                <span class=\"hljs-comment\">\/\/ Create custom marker<\/span>\n                <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">position<\/span>: listing.position,\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: listing.title,\n                    <span class=\"hljs-attr\">icon<\/span>: {\n                        <span class=\"hljs-attr\">url<\/span>: getMarkerIcon(listing),\n                        <span class=\"hljs-attr\">scaledSize<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Size(<span class=\"hljs-number\">32<\/span>, <span class=\"hljs-number\">32<\/span>)\n                    }\n                });\n\n                <span class=\"hljs-comment\">\/\/ Create info window<\/span>\n                <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                    <span class=\"hljs-attr\">content<\/span>: <span class=\"hljs-string\">`\n                        &lt;div style=\"padding: 16px; max-width: 300px;\"&gt;\n                            &lt;div style=\"font-size: 0.875rem; color: #6b7280; margin-bottom: 4px;\"&gt;<span class=\"hljs-subst\">${listing.mls}<\/span>&lt;\/div&gt;\n                            &lt;h3 style=\"margin: 0 0 8px 0; color: #1f2937;\"&gt;<span class=\"hljs-subst\">${listing.title}<\/span>&lt;\/h3&gt;\n                            &lt;div style=\"font-size: 1.25rem; font-weight: bold; color: #1e40af; margin-bottom: 8px;\"&gt;$<span class=\"hljs-subst\">${listing.price.toLocaleString()}<\/span>&lt;\/div&gt;\n                            &lt;div style=\"color: #6b7280; margin-bottom: 12px;\"&gt;<span class=\"hljs-subst\">${listing.address}<\/span>&lt;\/div&gt;\n                            &lt;div style=\"display: flex; gap: 12px; margin-bottom: 12px; font-size: 0.875rem;\"&gt;\n                                &lt;span&gt;<span class=\"hljs-subst\">${listing.beds}<\/span> bd&lt;\/span&gt;\n                                &lt;span&gt;<span class=\"hljs-subst\">${listing.baths}<\/span> ba&lt;\/span&gt;\n                                &lt;span&gt;<span class=\"hljs-subst\">${listing.sqft}<\/span> sqft&lt;\/span&gt;\n                            &lt;\/div&gt;\n                            &lt;p style=\"color: #4b5563; margin: 0 0 12px 0; font-size: 0.875rem;\"&gt;<span class=\"hljs-subst\">${listing.description}<\/span>&lt;\/p&gt;\n                            &lt;button style=\"background: #ef4444; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 600;\"&gt;\n                                Schedule Tour\n                            &lt;\/button&gt;\n                        &lt;\/div&gt;\n                    `<\/span>\n                });\n\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    <span class=\"hljs-keyword\">if<\/span> (activeInfoWindow) {\n                        activeInfoWindow.close();\n                    }\n                    infoWindow.open(map, marker);\n                    activeInfoWindow = infoWindow;\n                    \n                    <span class=\"hljs-comment\">\/\/ Highlight corresponding property card<\/span>\n                    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.property-card'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">card<\/span> =&gt;<\/span> {\n                        card.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n                    });\n                    <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">`.property-card&#91;data-listing-id=\"<span class=\"hljs-subst\">${listing.id}<\/span>\"]`<\/span>).classList.add(<span class=\"hljs-string\">'active'<\/span>);\n                });\n\n                markers.push(marker);\n\n                <span class=\"hljs-comment\">\/\/ Create property card<\/span>\n                <span class=\"hljs-keyword\">const<\/span> card = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'div'<\/span>);\n                card.className = <span class=\"hljs-string\">'property-card'<\/span>;\n                card.setAttribute(<span class=\"hljs-string\">'data-listing-id'<\/span>, listing.id);\n                card.innerHTML = <span class=\"hljs-string\">`\n                    <span class=\"hljs-subst\">${listing.featured ? <span class=\"hljs-string\">'&lt;div class=\"property-badge\"&gt;FEATURED&lt;\/div&gt;'<\/span> : <span class=\"hljs-string\">''<\/span>}<\/span>\n                    &lt;div class=\"property-price\"&gt;$<span class=\"hljs-subst\">${listing.price.toLocaleString()}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"property-address\"&gt;<span class=\"hljs-subst\">${listing.address}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"property-features\"&gt;\n                        &lt;span&gt;<span class=\"hljs-subst\">${listing.beds}<\/span> bd&lt;\/span&gt;\n                        &lt;span&gt;<span class=\"hljs-subst\">${listing.baths}<\/span> ba&lt;\/span&gt;\n                        &lt;span&gt;<span class=\"hljs-subst\">${listing.sqft}<\/span> sqft&lt;\/span&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n\n                card.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    map.setCenter(listing.position);\n                    map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                    <span class=\"hljs-keyword\">if<\/span> (activeInfoWindow) {\n                        activeInfoWindow.close();\n                    }\n                    infoWindow.open(map, marker);\n                    activeInfoWindow = infoWindow;\n                    \n                    <span class=\"hljs-comment\">\/\/ Highlight this card<\/span>\n                    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.property-card'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">c<\/span> =&gt;<\/span> {\n                        c.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n                    });\n                    card.classList.add(<span class=\"hljs-string\">'active'<\/span>);\n                });\n\n                container.appendChild(card);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getMarkerIcon<\/span>(<span class=\"hljs-params\">listing<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> baseUrl = <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/'<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> statusColors = {\n                <span class=\"hljs-string\">'active'<\/span>: <span class=\"hljs-string\">'green'<\/span>,\n                <span class=\"hljs-string\">'pending'<\/span>: <span class=\"hljs-string\">'orange'<\/span>,\n                <span class=\"hljs-string\">'sold'<\/span>: <span class=\"hljs-string\">'red'<\/span>\n            };\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">`<span class=\"hljs-subst\">${baseUrl}<\/span><span class=\"hljs-subst\">${statusColors&#91;listing.status]}<\/span>-dot.png`<\/span>;\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">applyFilters<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> priceFilter = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'price-range'<\/span>).value;\n            <span class=\"hljs-keyword\">const<\/span> bedsFilter = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'bedrooms'<\/span>).value;\n            <span class=\"hljs-keyword\">const<\/span> typeFilter = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'property-type'<\/span>).value;\n            <span class=\"hljs-keyword\">const<\/span> statusFilter = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'status'<\/span>).value;\n\n            <span class=\"hljs-keyword\">const<\/span> filtered = allListings.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">listing<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">return<\/span> (priceFilter === <span class=\"hljs-string\">'any'<\/span> || listing.price &lt;= priceFilter) &amp;&amp;\n                       (bedsFilter === <span class=\"hljs-string\">'any'<\/span> || listing.beds &gt;= bedsFilter) &amp;&amp;\n                       (typeFilter === <span class=\"hljs-string\">'any'<\/span> || listing.type === typeFilter) &amp;&amp;\n                       (statusFilter === <span class=\"hljs-string\">'any'<\/span> || listing.status === statusFilter);\n            });\n\n            updateListingsDisplay(filtered);\n        }\n\n        <span class=\"hljs-comment\">\/\/ Initialize display<\/span>\n        <span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">'DOMContentLoaded'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            updateListingsDisplay(allListings);\n        });\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Replace `YOUR_API_KEY_HERE` with your actual, restricted Google Maps API key.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Deploy to Your Real Estate Website<\/p>\n\n\n\n<p>For static websites, upload the HTML file directly. For WordPress, use a custom HTML block. For other platforms, use their embed code functionality.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Hidden Complexities of a Custom Realtor Map<\/strong><\/p>\n\n\n\n<p>While the code above creates a functional realtor map, maintaining it presents significant challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Data Synchronization:<\/strong> Manually updating listing data in code is impractical with changing inventory<\/li>\n\n\n\n<li><strong>Performance Optimization:<\/strong> Large numbers of listings require marker clustering and advanced loading techniques<\/li>\n\n\n\n<li><strong>Mobile Experience:<\/strong> Ensuring perfect functionality across all devices requires extensive additional testing<\/li>\n\n\n\n<li><strong>Lead Management: <\/strong>Integrating the contact form with your CRM requires backend development<\/li>\n\n\n\n<li><strong>Brand Consistency: <\/strong>Maintaining your brand colors, fonts, and styling across updates demands ongoing attention<\/li>\n\n\n\n<li><strong>API Management: <\/strong>Monitoring usage costs and handling API changes requires technical expertise<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional Realtor Solution: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>Why spend weeks building and maintaining a custom map when you can have a superior solution in minutes?<\/p>\n\n\n<p><iframe src=\"https:\/\/panel.mapsfun.com\/embed-map?code=668ecbcced7931f89205d1e881bb82aa&#038;lang=uk&#038;tpl=photo\" width=\"100%\" height=\"600\" style=\"border:0\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe><\/p>\n\n\n\n<p><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> is specifically designed for realtors who need powerful, branded maps without the technical complexity:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Live MLS Integration: <\/strong>Connect directly to your MLS for automatic listing updates<\/li>\n\n\n\n<li><strong>Brand Customization: <\/strong>Easily apply your brand colors, logo, and styling without coding<\/li>\n\n\n\n<li><strong>Built-in Lead Capture:<\/strong> Integrated contact forms that connect directly to your CRM<\/li>\n\n\n\n<li><strong>Automatic Optimization: <\/strong>We handle mobile responsiveness, loading speed, and SEO<\/li>\n\n\n\n<li><strong>Zero Maintenance: <\/strong>Focus on your clients while we handle all technical updates<\/li>\n<\/ul>\n\n\n\n<p><strong>Stop building and start selling. Create a professional realtor map that showcases your listings and generates leads. Launch your map in minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Professional Realtor Map for Your Real Estate Website As a realtor, your website needs to stand out, and nothing engages potential clients more than an interactive map showcasing your listings. A dedicated &#8220;realtor map&#8221; can be your most powerful lead generation tool. While it&#8217;s possible to build one from scratch, the [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114,1],"tags":[],"class_list":["post-833","post","type-post","status-publish","format-standard","hentry","category-realtor-map","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=833"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/833\/revisions"}],"predecessor-version":[{"id":835,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/833\/revisions\/835"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}