{"id":846,"date":"2025-12-22T13:27:13","date_gmt":"2025-12-22T10:27:13","guid":{"rendered":"https:\/\/mapsfun.com\/?p=846"},"modified":"2025-12-22T13:27:13","modified_gmt":"2025-12-22T10:27:13","slug":"map-to-plot-multiple-locations-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=846","title":{"rendered":"Map to Plot Multiple Locations (Step-by-Step Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map to Plot Multiple Locations: A Developer&#8217;s Guide<\/h2>\n\n\n\n<p>Need to visualize multiple addresses, store locations, or geographic data points on a single map? While Google Maps excels at showing one location, plotting multiple points requires technical expertise. Here&#8217;s the working method developers use to create custom multi-location maps.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Technical Approach: Custom Google Maps Implementation<\/strong><\/p>\n\n\n\n<p>This method provides maximum flexibility but requires programming skills and Google Cloud setup.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Google Cloud Project Setup<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to <strong>[Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong> and create a new project<\/li>\n\n\n\n<li><strong>2. Enable billing<\/strong> (generous free tier available)<\/li>\n\n\n\n<li>3. Enable these required APIs:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211;<strong> Maps JavaScript API<\/strong> (core mapping)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Geocoding API<\/strong> (address conversion)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Places API <\/strong>(location search)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1002\" height=\"1000\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-214.png\" alt=\"\" class=\"wp-image-847\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-214.png 1002w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-214-300x300.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-214-150x150.png 150w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-214-768x766.png 768w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Navigate to <strong>Credentials \u2192 Create Credentials \u2192 API Key<\/strong><\/li>\n\n\n\n<li><strong>2. Immediately restrict<\/strong> your key:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Application:<strong> HTTP referrers<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Domain: `*<strong>.yourdomain.com\/<\/strong>*`<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; APIs: Only the three listed above<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Build the Advanced Plotting Map<\/p>\n\n\n\n<p>Create `plot-multiple-locations.html` with this sophisticated code:<\/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>Advanced Multiple Location Plotting Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/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\">#4361ee<\/span>;\n            <span class=\"hljs-attribute\">--secondary-color<\/span>: <span class=\"hljs-number\">#3a0ca3<\/span>;\n            <span class=\"hljs-attribute\">--success-color<\/span>: <span class=\"hljs-number\">#4cc9f0<\/span>;\n            <span class=\"hljs-attribute\">--danger-color<\/span>: <span class=\"hljs-number\">#f72585<\/span>;\n            <span class=\"hljs-attribute\">--light-bg<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">--dark-text<\/span>: <span class=\"hljs-number\">#212529<\/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        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Inter'<\/span>, -apple-system, BlinkMacSystemFont, sans-serif;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, #<span class=\"hljs-number\">667<\/span>eea <span class=\"hljs-number\">0%<\/span>, #<span class=\"hljs-number\">764<\/span>ba2 <span class=\"hljs-number\">100%<\/span>);\n            <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.dashboard<\/span> {\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1400px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">60px<\/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.3<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.dashboard-header<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">90deg<\/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\">30px<\/span> <span class=\"hljs-number\">40px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-content<\/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            <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-title<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2.8rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">800<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">90deg<\/span>, #fff, #f8f9fa);\n            <span class=\"hljs-attribute\">-webkit-background-clip<\/span>: text;\n            <span class=\"hljs-attribute\">-webkit-text-fill-color<\/span>: transparent;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-title<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.9<\/span>;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">600px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.stats-cards<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: grid;\n            <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\">repeat<\/span>(<span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">1<\/span>fr);\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--light-bg);\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-card<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">15px<\/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.05<\/span>);\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">5px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-number\">0.3s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-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\">5px<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-card<\/span> <span class=\"hljs-selector-tag\">h3<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">5px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-card<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#6c757d<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9rem<\/span>;\n            <span class=\"hljs-attribute\">text-transform<\/span>: uppercase;\n            <span class=\"hljs-attribute\">letter-spacing<\/span>: <span class=\"hljs-number\">1px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.main-content<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: grid;\n            <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">300px<\/span> <span class=\"hljs-number\">1<\/span>fr;\n            <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">700px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.sidebar<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.section-title<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.2rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">padding-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.input-group<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">25px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">label<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: block;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n        }\n        \n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">input<\/span>,\n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">textarea<\/span>,\n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">select<\/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\">12px<\/span> <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e0e0e0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: border-color <span class=\"hljs-number\">0.3s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span>,\n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">textarea<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span>,\n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">select<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span> {\n            <span class=\"hljs-attribute\">outline<\/span>: none;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">14px<\/span> <span class=\"hljs-number\">28px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: inline-flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">justify-content<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-primary<\/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        }\n        \n        <span class=\"hljs-selector-class\">.btn-primary<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--secondary-color);\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\">5px<\/span> <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">67<\/span>, <span class=\"hljs-number\">97<\/span>, <span class=\"hljs-number\">238<\/span>, <span class=\"hljs-number\">0.3<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-secondary<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#6c757d<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-success<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#2ecc71<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-danger<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--danger-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-full<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: relative;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">650px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">30px<\/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\">.locations-list<\/span> {\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">padding-right<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">4px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-color);\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            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-number\">10px<\/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.05<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-info<\/span> <span class=\"hljs-selector-tag\">h4<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">5px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-info<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#6c757d<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-actions<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.action-btn<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">36px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">36px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">justify-content<\/span>: center;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.action-btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">scale<\/span>(<span class=\"hljs-number\">1.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-zoom<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--success-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-remove<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--danger-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.cluster-info<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: absolute;\n            <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">20px<\/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\">z-index<\/span>: <span class=\"hljs-number\">1000<\/span>;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">300px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.cluster-info<\/span> <span class=\"hljs-selector-tag\">h4<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">1024px<\/span>) {\n            <span class=\"hljs-selector-class\">.main-content<\/span> {\n                <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr;\n            }\n            \n            <span class=\"hljs-selector-class\">.sidebar<\/span> {\n                <span class=\"hljs-attribute\">border-right<\/span>: none;\n                <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/span>;\n            }\n            \n            <span class=\"hljs-selector-class\">.stats-cards<\/span> {\n                <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\">repeat<\/span>(<span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">1<\/span>fr);\n            }\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n            <span class=\"hljs-selector-class\">.stats-cards<\/span> {\n                <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr;\n            }\n            \n            <span class=\"hljs-selector-class\">.header-content<\/span> {\n                <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n                <span class=\"hljs-attribute\">text-align<\/span>: center;\n            }\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\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"<\/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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"dashboard\"<\/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\">\"dashboard-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\">\"header-content\"<\/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\">\"header-title\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-map-marked-alt\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Advanced Location Plotter<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>Visualize and analyze multiple geographic points with precision mapping tools<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\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"exportDataBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-success\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-file-export\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Export Data\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"printMapBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-secondary\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-print\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Print Map\n                    <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        <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\">\"stats-cards\"<\/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\">\"stat-card\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"totalLocations\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Locations Plotted<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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"stat-card\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"avgDistance\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Avg Distance (mi)<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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"stat-card\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clustersFound\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Clusters Found<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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"stat-card\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"coverageArea\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Coverage Area (mi\u00b2)<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\">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\">\"main-content\"<\/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\">\"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\">\"input-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section-title\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-plus-circle\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Add New Location<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/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\">\"locationName\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-tag\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Location Name<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/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\">id<\/span>=<span class=\"hljs-string\">\"locationName\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter location name\"<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"locationAddress\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-map-marker-alt\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Address or Coordinates<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/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\">id<\/span>=<span class=\"hljs-string\">\"locationAddress\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Address or lat,lng\"<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"locationType\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-filter\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Location 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\">\"locationType\"<\/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\">\"store\"<\/span>&gt;<\/span>Store<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\">\"office\"<\/span>&gt;<\/span>Office<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\">\"warehouse\"<\/span>&gt;<\/span>Warehouse<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\">\"event\"<\/span>&gt;<\/span>Event<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\">\"residence\"<\/span>&gt;<\/span>Residence<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\">\"landmark\"<\/span>&gt;<\/span>Landmark<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                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"locationNotes\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-sticky-note\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Notes<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">textarea<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"locationNotes\"<\/span> <span class=\"hljs-attr\">rows<\/span>=<span class=\"hljs-string\">\"3\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Additional information\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">textarea<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"addLocationBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary btn-full\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-map-pin\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Plot This Location\n                    <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\">\"input-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section-title\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-tools\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Map Controls<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\">style<\/span>=<span class=\"hljs-string\">\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"fitBoundsBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-secondary\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-expand\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Fit All\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clearMapBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-danger\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-trash\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Clear All\n                        <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\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 20px;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-palette\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Map Style<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\">\"mapStyle\"<\/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\">\"standard\"<\/span>&gt;<\/span>Standard<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\">\"satellite\"<\/span>&gt;<\/span>Satellite<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\">\"terrain\"<\/span>&gt;<\/span>Terrain<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\">\"dark\"<\/span>&gt;<\/span>Dark Mode<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\">\"light\"<\/span>&gt;<\/span>Light Mode<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                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 20px;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-layer-group\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Clustering<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\">\"clusteringLevel\"<\/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\">\"auto\"<\/span>&gt;<\/span>Auto<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\">\"high\"<\/span>&gt;<\/span>High Density<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\">\"medium\"<\/span>&gt;<\/span>Medium Density<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\">\"low\"<\/span>&gt;<\/span>Low Density<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\">\"off\"<\/span>&gt;<\/span>Off<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                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"locations-list\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section-title\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-list-ul\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Plotted Locations<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\">id<\/span>=<span class=\"hljs-string\">\"locationsContainer\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-comment\">&lt;!-- Locations will be added here dynamically --&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"text-align: center; padding: 40px 20px; color: #6c757d;\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-map-pin\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"font-size: 3rem; opacity: 0.3; margin-bottom: 15px;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>No locations plotted yet.<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">br<\/span>&gt;<\/span>Add your first location above.<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\">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\">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\">\"map-container\"<\/span>&gt;<\/span>\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> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"cluster-info\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clusterInfo\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: none;\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-object-group\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Cluster Detected<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clusterDetails\"<\/span>&gt;<\/span>Loading cluster information...<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\">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\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Load Google Maps API with MarkerClusterer --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;libraries=places,geometry&amp;callback=initMap\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/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\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/@googlemaps\/markerclusterer\/dist\/index.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/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-comment\">\/\/ Configuration<\/span>\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> markerCluster;\n        <span class=\"hljs-keyword\">let<\/span> locations = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> geocoder;\n        <span class=\"hljs-keyword\">let<\/span> infoWindow;\n        \n        <span class=\"hljs-comment\">\/\/ Map styles<\/span>\n        <span class=\"hljs-keyword\">const<\/span> mapStyles = {\n            <span class=\"hljs-attr\">standard<\/span>: &#91;],\n            <span class=\"hljs-attr\">satellite<\/span>: &#91;\n                { <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"all\"<\/span>, <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }] }\n            ],\n            <span class=\"hljs-attr\">terrain<\/span>: &#91;\n                { <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"administrative\"<\/span>, <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }] }\n            ],\n            <span class=\"hljs-attr\">dark<\/span>: &#91;\n                { <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"geometry\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#242f3e\"<\/span> }] },\n                { <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels.text.stroke\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#242f3e\"<\/span> }] },\n                { <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels.text.fill\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#746855\"<\/span> }] }\n            ],\n            <span class=\"hljs-attr\">light<\/span>: &#91;\n                { <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"geometry\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#f5f5f5\"<\/span> }] },\n                { <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels.text.fill\"<\/span>, <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"#616161\"<\/span> }] }\n            ]\n        };\n        \n        <span class=\"hljs-comment\">\/\/ Color scheme by type<\/span>\n        <span class=\"hljs-keyword\">const<\/span> typeColors = {\n            <span class=\"hljs-attr\">store<\/span>: <span class=\"hljs-string\">'#e74c3c'<\/span>,\n            <span class=\"hljs-attr\">office<\/span>: <span class=\"hljs-string\">'#3498db'<\/span>,\n            <span class=\"hljs-attr\">warehouse<\/span>: <span class=\"hljs-string\">'#f39c12'<\/span>,\n            <span class=\"hljs-attr\">event<\/span>: <span class=\"hljs-string\">'#9b59b6'<\/span>,\n            <span class=\"hljs-attr\">residence<\/span>: <span class=\"hljs-string\">'#2ecc71'<\/span>,\n            <span class=\"hljs-attr\">landmark<\/span>: <span class=\"hljs-string\">'#1abc9c'<\/span>\n        };\n        \n        <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\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\">\/\/ Default center (North America)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> defaultCenter = { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">39.8283<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-98.5795<\/span> };\n            \n            <span class=\"hljs-comment\">\/\/ Initialize 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>: defaultCenter,\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">4<\/span>,\n                <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">fullscreenControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">mapTypeControlOptions<\/span>: {\n                    <span class=\"hljs-attr\">style<\/span>: google.maps.MapTypeControlStyle.DROPDOWN_MENU,\n                    <span class=\"hljs-attr\">position<\/span>: google.maps.ControlPosition.TOP_RIGHT\n                }\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Initialize services<\/span>\n            geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n            infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n            \n            <span class=\"hljs-comment\">\/\/ Initialize MarkerClusterer<\/span>\n            markerCluster = <span class=\"hljs-keyword\">new<\/span> markerClusterer.MarkerClusterer({ map });\n            \n            <span class=\"hljs-comment\">\/\/ Setup event listeners<\/span>\n            setupEventListeners();\n            \n            <span class=\"hljs-comment\">\/\/ Load sample data<\/span>\n            loadSampleData();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupEventListeners<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Add location button<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'addLocationBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, addLocationFromForm);\n            \n            <span class=\"hljs-comment\">\/\/ Map controls<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'fitBoundsBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, fitMapToBounds);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'clearMapBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, clearAllLocations);\n            \n            <span class=\"hljs-comment\">\/\/ Export and print<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'exportDataBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, exportData);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'printMapBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, printMap);\n            \n            <span class=\"hljs-comment\">\/\/ Style and clustering controls<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'mapStyle'<\/span>).addEventListener(<span class=\"hljs-string\">'change'<\/span>, updateMapStyle);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'clusteringLevel'<\/span>).addEventListener(<span class=\"hljs-string\">'change'<\/span>, updateClustering);\n            \n            <span class=\"hljs-comment\">\/\/ Allow Enter key in address field<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationAddress'<\/span>).addEventListener(<span class=\"hljs-string\">'keypress'<\/span>, (e) =&gt; {\n                <span class=\"hljs-keyword\">if<\/span> (e.key === <span class=\"hljs-string\">'Enter'<\/span>) addLocationFromForm();\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addLocationFromForm<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> name = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationName'<\/span>).value.trim();\n            <span class=\"hljs-keyword\">const<\/span> address = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationAddress'<\/span>).value.trim();\n            <span class=\"hljs-keyword\">const<\/span> type = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationType'<\/span>).value;\n            <span class=\"hljs-keyword\">const<\/span> notes = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationNotes'<\/span>).value.trim();\n            \n            <span class=\"hljs-keyword\">if<\/span> (!name || !address) {\n                alert(<span class=\"hljs-string\">'Please provide both a name and address\/coordinates.'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-comment\">\/\/ Check if input is coordinates<\/span>\n            <span class=\"hljs-keyword\">const<\/span> coordMatch = address.match(<span class=\"hljs-regexp\">\/(-?\\d+\\.?\\d*),\\s*(-?\\d+\\.?\\d*)\/<\/span>);\n            \n            <span class=\"hljs-keyword\">if<\/span> (coordMatch) {\n                <span class=\"hljs-comment\">\/\/ Direct coordinates<\/span>\n                <span class=\"hljs-keyword\">const<\/span> lat = <span class=\"hljs-built_in\">parseFloat<\/span>(coordMatch&#91;<span class=\"hljs-number\">1<\/span>]);\n                <span class=\"hljs-keyword\">const<\/span> lng = <span class=\"hljs-built_in\">parseFloat<\/span>(coordMatch&#91;<span class=\"hljs-number\">2<\/span>]);\n                \n                addLocationToMap(lat, lng, name, type, notes);\n                clearForm();\n            } <span class=\"hljs-keyword\">else<\/span> {\n                <span class=\"hljs-comment\">\/\/ Geocode address<\/span>\n                geocoder.geocode({ <span class=\"hljs-attr\">address<\/span>: address }, (results, status) =&gt; {\n                    <span class=\"hljs-keyword\">if<\/span> (status === <span class=\"hljs-string\">'OK'<\/span>) {\n                        <span class=\"hljs-keyword\">const<\/span> lat = results&#91;<span class=\"hljs-number\">0<\/span>].geometry.location.lat();\n                        <span class=\"hljs-keyword\">const<\/span> lng = results&#91;<span class=\"hljs-number\">0<\/span>].geometry.location.lng();\n                        \n                        addLocationToMap(lat, lng, name, type, notes);\n                        clearForm();\n                    } <span class=\"hljs-keyword\">else<\/span> {\n                        alert(<span class=\"hljs-string\">'Could not find location. Please try a different address or use coordinates.'<\/span>);\n                    }\n                });\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addLocationToMap<\/span>(<span class=\"hljs-params\">lat, lng, name, type, notes<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> locationId = <span class=\"hljs-built_in\">Date<\/span>.now();\n            <span class=\"hljs-keyword\">const<\/span> locationData = {\n                <span class=\"hljs-attr\">id<\/span>: locationId,\n                <span class=\"hljs-attr\">name<\/span>: name,\n                <span class=\"hljs-attr\">lat<\/span>: lat,\n                <span class=\"hljs-attr\">lng<\/span>: lng,\n                <span class=\"hljs-attr\">type<\/span>: type,\n                <span class=\"hljs-attr\">notes<\/span>: notes,\n                <span class=\"hljs-attr\">added<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n            };\n            \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>: { <span class=\"hljs-attr\">lat<\/span>: lat, <span class=\"hljs-attr\">lng<\/span>: lng },\n                <span class=\"hljs-attr\">map<\/span>: map,\n                <span class=\"hljs-attr\">title<\/span>: name,\n                <span class=\"hljs-attr\">icon<\/span>: {\n                    <span class=\"hljs-attr\">path<\/span>: google.maps.SymbolPath.CIRCLE,\n                    <span class=\"hljs-attr\">fillColor<\/span>: typeColors&#91;type] || <span class=\"hljs-string\">'#666'<\/span>,\n                    <span class=\"hljs-attr\">fillOpacity<\/span>: <span class=\"hljs-number\">0.9<\/span>,\n                    <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">2<\/span>,\n                    <span class=\"hljs-attr\">strokeColor<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n                    <span class=\"hljs-attr\">scale<\/span>: <span class=\"hljs-number\">12<\/span>\n                },\n                <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Create info window content<\/span>\n            <span class=\"hljs-keyword\">const<\/span> infoContent = <span class=\"hljs-string\">`\n                &lt;div style=\"min-width: 250px; padding: 15px; font-family: 'Inter', sans-serif;\"&gt;\n                    &lt;h3 style=\"margin: 0 0 10px 0; color: <span class=\"hljs-subst\">${typeColors&#91;type] || <span class=\"hljs-string\">'#666'<\/span>}<\/span>;\"&gt;<span class=\"hljs-subst\">${name}<\/span>&lt;\/h3&gt;\n                    &lt;div style=\"margin-bottom: 12px;\"&gt;\n                        &lt;p style=\"margin: 5px 0; color: #555;\"&gt;\n                            &lt;strong&gt;Type:&lt;\/strong&gt; <span class=\"hljs-subst\">${type.charAt(<span class=\"hljs-number\">0<\/span>).toUpperCase() + type.slice(<span class=\"hljs-number\">1<\/span>)}<\/span>&lt;br&gt;\n                            &lt;strong&gt;Coordinates:&lt;\/strong&gt; <span class=\"hljs-subst\">${lat.toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>, <span class=\"hljs-subst\">${lng.toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>\n                        &lt;\/p&gt;\n                        <span class=\"hljs-subst\">${notes ? <span class=\"hljs-string\">`&lt;p style=\"margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 5px; color: #666;\"&gt;<span class=\"hljs-subst\">${notes}<\/span>&lt;\/p&gt;`<\/span> : <span class=\"hljs-string\">''<\/span>}<\/span>\n                    &lt;\/div&gt;\n                    &lt;div style=\"display: flex; gap: 10px; margin-top: 15px;\"&gt;\n                        &lt;button onclick=\"zoomToLocation(<span class=\"hljs-subst\">${locationId}<\/span>)\" \n                                style=\"flex: 1; padding: 8px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;\"&gt;\n                            Zoom In\n                        &lt;\/button&gt;\n                        &lt;button onclick=\"removeLocation(<span class=\"hljs-subst\">${locationId}<\/span>)\" \n                                style=\"flex: 1; padding: 8px; background: #e74c3c; color: white; border: none; border-radius: 5px; cursor: pointer;\"&gt;\n                            Remove\n                        &lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Add click listener to marker<\/span>\n            marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                infoWindow.setContent(infoContent);\n                infoWindow.open(map, marker);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Store location data<\/span>\n            locations.push({\n                ...locationData,\n                <span class=\"hljs-attr\">marker<\/span>: marker\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Add marker to cluster<\/span>\n            markerCluster.addMarker(marker);\n            \n            <span class=\"hljs-comment\">\/\/ Update UI<\/span>\n            updateLocationsList();\n            updateStats();\n            \n            <span class=\"hljs-comment\">\/\/ Recenter map if this is the first location<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">1<\/span>) {\n                map.setCenter({ <span class=\"hljs-attr\">lat<\/span>: lat, <span class=\"hljs-attr\">lng<\/span>: lng });\n                map.setZoom(<span class=\"hljs-number\">10<\/span>);\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateLocationsList<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> container = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationsContainer'<\/span>);\n            \n            <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">0<\/span>) {\n                container.innerHTML = <span class=\"hljs-string\">`\n                    &lt;div style=\"text-align: center; padding: 40px 20px; color: #6c757d;\"&gt;\n                        &lt;i class=\"fas fa-map-pin\" style=\"font-size: 3rem; opacity: 0.3; margin-bottom: 15px;\"&gt;&lt;\/i&gt;\n                        &lt;p&gt;No locations plotted yet.&lt;br&gt;Add your first location above.&lt;\/p&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">let<\/span> html = <span class=\"hljs-string\">''<\/span>;\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">loc, index<\/span>) =&gt;<\/span> {\n                html += <span class=\"hljs-string\">`\n                    &lt;div class=\"location-item\"&gt;\n                        &lt;div class=\"location-info\"&gt;\n                            &lt;h4&gt;&lt;i class=\"fas fa-map-pin\" style=\"color: <span class=\"hljs-subst\">${typeColors&#91;loc.type] || <span class=\"hljs-string\">'#666'<\/span>}<\/span>\"&gt;&lt;\/i&gt; <span class=\"hljs-subst\">${loc.name}<\/span>&lt;\/h4&gt;\n                            &lt;p&gt;<span class=\"hljs-subst\">${loc.lat.toFixed(<span class=\"hljs-number\">4<\/span>)}<\/span>, <span class=\"hljs-subst\">${loc.lng.toFixed(<span class=\"hljs-number\">4<\/span>)}<\/span> \u2022 <span class=\"hljs-subst\">${loc.type}<\/span>&lt;\/p&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"location-actions\"&gt;\n                            &lt;button onclick=\"zoomToLocation(<span class=\"hljs-subst\">${loc.id}<\/span>)\" class=\"action-btn btn-zoom\" title=\"Zoom to location\"&gt;\n                                &lt;i class=\"fas fa-search-plus\"&gt;&lt;\/i&gt;\n                            &lt;\/button&gt;\n                            &lt;button onclick=\"removeLocation(<span class=\"hljs-subst\">${loc.id}<\/span>)\" class=\"action-btn btn-remove\" title=\"Remove location\"&gt;\n                                &lt;i class=\"fas fa-times\"&gt;&lt;\/i&gt;\n                            &lt;\/button&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n            });\n            \n            container.innerHTML = html;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateStats<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalLocations'<\/span>).textContent = locations.length;\n            \n            <span class=\"hljs-comment\">\/\/ Calculate average distance if we have at least 2 locations<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (locations.length &gt;= <span class=\"hljs-number\">2<\/span>) {\n                <span class=\"hljs-keyword\">let<\/span> totalDistance = <span class=\"hljs-number\">0<\/span>;\n                <span class=\"hljs-keyword\">let<\/span> pairCount = <span class=\"hljs-number\">0<\/span>;\n                \n                <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; locations.length; i++) {\n                    <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> j = i + <span class=\"hljs-number\">1<\/span>; j &lt; locations.length; j++) {\n                        <span class=\"hljs-keyword\">const<\/span> distance = calculateDistance(\n                            locations&#91;i].lat, locations&#91;i].lng,\n                            locations&#91;j].lat, locations&#91;j].lng\n                        );\n                        totalDistance += distance;\n                        pairCount++;\n                    }\n                }\n                \n                <span class=\"hljs-keyword\">const<\/span> avgDistance = pairCount &gt; <span class=\"hljs-number\">0<\/span> ? (totalDistance \/ pairCount).toFixed(<span class=\"hljs-number\">1<\/span>) : <span class=\"hljs-number\">0<\/span>;\n                <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'avgDistance'<\/span>).textContent = avgDistance;\n                \n                <span class=\"hljs-comment\">\/\/ Estimate clusters (simple heuristic)<\/span>\n                <span class=\"hljs-keyword\">const<\/span> clusters = <span class=\"hljs-built_in\">Math<\/span>.max(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-built_in\">Math<\/span>.floor(locations.length \/ <span class=\"hljs-number\">5<\/span>));\n                <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'clustersFound'<\/span>).textContent = clusters;\n                \n                <span class=\"hljs-comment\">\/\/ Estimate coverage area<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (locations.length &gt;= <span class=\"hljs-number\">3<\/span>) {\n                    <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n                    locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> {\n                        bounds.extend(<span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(loc.lat, loc.lng));\n                    });\n                    \n                    <span class=\"hljs-keyword\">const<\/span> ne = bounds.getNorthEast();\n                    <span class=\"hljs-keyword\">const<\/span> sw = bounds.getSouthWest();\n                    <span class=\"hljs-keyword\">const<\/span> width = calculateDistance(ne.lat(), sw.lng(), ne.lat(), ne.lng());\n                    <span class=\"hljs-keyword\">const<\/span> height = calculateDistance(ne.lat(), ne.lng(), sw.lat(), ne.lng());\n                    <span class=\"hljs-keyword\">const<\/span> area = (width * height).toFixed(<span class=\"hljs-number\">0<\/span>);\n                    <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'coverageArea'<\/span>).textContent = area;\n                }\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">calculateDistance<\/span>(<span class=\"hljs-params\">lat1, lon1, lat2, lon2<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> R = <span class=\"hljs-number\">3958.8<\/span>; <span class=\"hljs-comment\">\/\/ Earth's radius in miles<\/span>\n            <span class=\"hljs-keyword\">const<\/span> dLat = (lat2 - lat1) * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> dLon = (lon2 - lon1) * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> a = \n                <span class=\"hljs-built_in\">Math<\/span>.sin(dLat\/<span class=\"hljs-number\">2<\/span>) * <span class=\"hljs-built_in\">Math<\/span>.sin(dLat\/<span class=\"hljs-number\">2<\/span>) +\n                <span class=\"hljs-built_in\">Math<\/span>.cos(lat1 * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>) * <span class=\"hljs-built_in\">Math<\/span>.cos(lat2 * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>) * \n                <span class=\"hljs-built_in\">Math<\/span>.sin(dLon\/<span class=\"hljs-number\">2<\/span>) * <span class=\"hljs-built_in\">Math<\/span>.sin(dLon\/<span class=\"hljs-number\">2<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> c = <span class=\"hljs-number\">2<\/span> * <span class=\"hljs-built_in\">Math<\/span>.atan2(<span class=\"hljs-built_in\">Math<\/span>.sqrt(a), <span class=\"hljs-built_in\">Math<\/span>.sqrt(<span class=\"hljs-number\">1<\/span>-a));\n            <span class=\"hljs-keyword\">return<\/span> R * c;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">zoomToLocation<\/span>(<span class=\"hljs-params\">locationId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> location = locations.find(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> loc.id === locationId);\n            <span class=\"hljs-keyword\">if<\/span> (location) {\n                map.setCenter({ <span class=\"hljs-attr\">lat<\/span>: location.lat, <span class=\"hljs-attr\">lng<\/span>: location.lng });\n                map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                infoWindow.close();\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">removeLocation<\/span>(<span class=\"hljs-params\">locationId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> index = locations.findIndex(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> loc.id === locationId);\n            <span class=\"hljs-keyword\">if<\/span> (index !== <span class=\"hljs-number\">-1<\/span>) {\n                locations&#91;index].marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n                markerCluster.removeMarker(locations&#91;index].marker);\n                locations.splice(index, <span class=\"hljs-number\">1<\/span>);\n                updateLocationsList();\n                updateStats();\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">fitMapToBounds<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (locations.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            locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> {\n                bounds.extend(<span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(loc.lat, loc.lng));\n            });\n            \n            map.fitBounds(bounds);\n            \n            <span class=\"hljs-comment\">\/\/ Prevent zooming too far out<\/span>\n            google.maps.event.addListenerOnce(map, <span class=\"hljs-string\">'bounds_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-keyword\">this<\/span>.getZoom() &gt; <span class=\"hljs-number\">15<\/span>) {\n                    <span class=\"hljs-keyword\">this<\/span>.setZoom(<span class=\"hljs-number\">15<\/span>);\n                }\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearAllLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">`Are you sure you want to remove all <span class=\"hljs-subst\">${locations.length}<\/span> locations?`<\/span>)) {\n                locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> {\n                    loc.marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n                });\n                \n                markerCluster.clearMarkers();\n                locations = &#91;];\n                updateLocationsList();\n                updateStats();\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateMapStyle<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> style = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'mapStyle'<\/span>).value;\n            map.setOptions({ <span class=\"hljs-attr\">styles<\/span>: mapStyles&#91;style] });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateClustering<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> level = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'clusteringLevel'<\/span>).value;\n            <span class=\"hljs-comment\">\/\/ In a real implementation, you would adjust MarkerClusterer options here<\/span>\n            <span class=\"hljs-built_in\">console<\/span>.log(<span class=\"hljs-string\">`Clustering level changed to: <span class=\"hljs-subst\">${level}<\/span>`<\/span>);\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">exportData<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">0<\/span>) {\n                alert(<span class=\"hljs-string\">'No locations to export.'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">const<\/span> exportData = locations.map(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> ({\n                <span class=\"hljs-attr\">name<\/span>: loc.name,\n                <span class=\"hljs-attr\">latitude<\/span>: loc.lat,\n                <span class=\"hljs-attr\">longitude<\/span>: loc.lng,\n                <span class=\"hljs-attr\">type<\/span>: loc.type,\n                <span class=\"hljs-attr\">notes<\/span>: loc.notes,\n                <span class=\"hljs-attr\">added<\/span>: loc.added\n            }));\n            \n            <span class=\"hljs-keyword\">const<\/span> dataStr = <span class=\"hljs-built_in\">JSON<\/span>.stringify(exportData, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-number\">2<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> dataUri = <span class=\"hljs-string\">'data:application\/json;charset=utf-8,'<\/span> + <span class=\"hljs-built_in\">encodeURIComponent<\/span>(dataStr);\n            \n            <span class=\"hljs-keyword\">const<\/span> linkElement = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'a'<\/span>);\n            linkElement.setAttribute(<span class=\"hljs-string\">'href'<\/span>, dataUri);\n            linkElement.setAttribute(<span class=\"hljs-string\">'download'<\/span>, <span class=\"hljs-string\">`locations-export-<span class=\"hljs-subst\">${<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString().slice(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">10<\/span>)}<\/span>.json`<\/span>);\n            <span class=\"hljs-built_in\">document<\/span>.body.appendChild(linkElement);\n            linkElement.click();\n            <span class=\"hljs-built_in\">document<\/span>.body.removeChild(linkElement);\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">printMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-built_in\">window<\/span>.print();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearForm<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationName'<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationAddress'<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationNotes'<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationName'<\/span>).focus();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadSampleData<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Add a few sample locations to demonstrate<\/span>\n            <span class=\"hljs-keyword\">const<\/span> sampleData = &#91;\n                { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"New York Office\"<\/span>, <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"office\"<\/span> },\n                { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Los Angeles Store\"<\/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>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"store\"<\/span> },\n                { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Chicago Warehouse\"<\/span>, <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">41.8781<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-87.6298<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"warehouse\"<\/span> },\n                { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Miami Event Space\"<\/span>, <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">25.7617<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-80.1918<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"event\"<\/span> },\n                { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Seattle HQ\"<\/span>, <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">47.6062<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-122.3321<\/span>, <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"office\"<\/span> }\n            ];\n            \n            <span class=\"hljs-comment\">\/\/ Add samples after a short delay<\/span>\n            setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                sampleData.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">item, index<\/span>) =&gt;<\/span> {\n                    setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                        addLocationToMap(item.lat, item.lng, item.name, item.type, <span class=\"hljs-string\">\"Sample location for demonstration\"<\/span>);\n                    }, index * <span class=\"hljs-number\">300<\/span>);\n                });\n            }, <span class=\"hljs-number\">1000<\/span>);\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Make functions available globally<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.zoomToLocation = zoomToLocation;\n        <span class=\"hljs-built_in\">window<\/span>.removeLocation = removeLocation;\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 class=\"has-text-align-center\">Step 4: Deploy and Use Your Map<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Replace API Key: <\/strong>Change `<strong>YOUR_API_KEY_HERE<\/strong>` to your actual Google Maps API key<\/li>\n\n\n\n<li><strong>2. Test Locally: <\/strong>Open in browser to test functionality<\/li>\n\n\n\n<li><strong>3. Upload to Server: <\/strong>Deploy to your web hosting<\/li>\n\n\n\n<li><strong>4. Embed Anywhere: <\/strong>Use iframe or integrate directly into your site<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"383\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-215.png\" alt=\"\" class=\"wp-image-848\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-215.png 800w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-215-300x144.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-215-768x368.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Hidden Complexity of This Solution<\/strong><\/p>\n\n\n\n<p>While technically impressive, this approach has significant drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. API Management Overhead: <\/strong>Constant monitoring of usage and costs<\/li>\n\n\n\n<li><strong>2. No Built-in Data Import:<\/strong> Can&#8217;t easily import CSV or spreadsheet data<\/li>\n\n\n\n<li><strong>3. Complex Deployment<\/strong>: Requires web hosting and file management<\/li>\n\n\n\n<li><strong>4. No Collaboration Features:<\/strong> Only one person can edit at a time<\/li>\n\n\n\n<li><strong>5. Limited Analytics:<\/strong> Basic stats require custom coding<\/li>\n\n\n\n<li><strong>6. Mobile Responsiveness Challenges:<\/strong> Complex interface may not work well on phones<\/li>\n\n\n\n<li><strong>7. No Automatic Updates:<\/strong> Locations database doesn&#8217;t sync across devices<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>Why spend days building a plotting tool when you can have a better solution instantly?<\/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> provides all the advanced features of the custom solution\u2014plus enterprise capabilities\u2014without any coding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u2705 Drag-and-Drop Interface <\/strong>&#8211; Plot locations visually in seconds\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 CSV\/Excel Import <\/strong>&#8211; Upload thousands of locations at once\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Advanced Analytics <\/strong>&#8211; Built-in heatmaps, density analysis, and route optimization\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Real-time Collaboration<\/strong> &#8211; Multiple team members can edit simultaneously\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Automatic Geocoding <\/strong>&#8211; Converts addresses to coordinates instantly\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Professional Template<\/strong>s &#8211; Pre-designed maps for different use cases\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Cloud Storage<\/strong> &#8211; Access your maps from any device\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> One-Click Sharing<\/strong> &#8211; Generate public links or private embeds\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>With MapsFun.com, here&#8217;s the workflow:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Sign up at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> (free trial available)<\/li>\n\n\n\n<li>2. Upload your spreadsheet or add locations manually<\/li>\n\n\n\n<li>3. Customize with professional design tools<\/li>\n\n\n\n<li>4. Share or embed with one click<\/li>\n<\/ul>\n\n\n\n<p>The custom Google Maps API solution is perfect for developers building specialized applications, but for <strong>business analysts, marketers, logistics managers, event planners, or anyone needing to plot multiple locations quickly,<\/strong> it&#8217;s unnecessarily complex and time-consuming.<\/p>\n\n\n\n<p><strong>Stop building mapping tools and start using professional ones. <\/strong>Create stunning, interactive maps to plot multiple locations in minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> &#8211; the complete no-code mapping platform.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map to Plot Multiple Locations: A Developer&#8217;s Guide Need to visualize multiple addresses, store locations, or geographic data points on a single map? While Google Maps excels at showing one location, plotting multiple points requires technical expertise. Here&#8217;s the working method developers use to create custom multi-location maps. The Technical Approach: [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[118,1],"tags":[],"class_list":["post-846","post","type-post","status-publish","format-standard","hentry","category-map-to-plot-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/846","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=846"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/846\/revisions"}],"predecessor-version":[{"id":849,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/846\/revisions\/849"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}