{"id":842,"date":"2025-12-22T11:53:00","date_gmt":"2025-12-22T08:53:00","guid":{"rendered":"https:\/\/mapsfun.com\/?p=842"},"modified":"2025-12-22T11:53:01","modified_gmt":"2025-12-22T08:53:01","slug":"map-where-i-can-mark-multiple-locations-2025-tutorial","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=842","title":{"rendered":"Map Where I Can Mark Multiple Locations (2025 Tutorial)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map Where You Can Mark Multiple Locations: The Complete Technical Guide<\/h2>\n\n\n\n<p>Looking for a map where you can mark or pin multiple locations for planning, visualization, or sharing? Creating an interactive &#8220;markable&#8221; map requires specific technical implementation. Here&#8217;s the working method using Google Maps Platform with a drawing interface.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method: Custom Interactive Map with Drawing Tools<\/strong><\/p>\n\n\n\n<p>This solution lets users mark locations by clicking on the map, with options to save, customize, and export their marked points.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Google Cloud Platform 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><\/li>\n\n\n\n<li>2. Create a project named <strong>&#8220;Markable Locations Map&#8221;<\/strong><\/li>\n\n\n\n<li>3.<strong> Enable billing<\/strong> (utilizes $200 monthly free credit)<\/li>\n\n\n\n<li>4. Enable these essential APIs:\n<ul class=\"wp-block-list\">\n<li><strong>\u00a0\u00a0\u00a0&#8211; Maps JavaScript API<\/strong> (core map functionality)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Drawing Library <\/strong>(for marking tools)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Geocoding API <\/strong>(for address lookup of marked points)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"689\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-212-1024x689.png\" alt=\"\" class=\"wp-image-843\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-212-1024x689.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-212-300x202.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-212-768x516.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-212-1536x1033.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-212.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Secure Your API Key<\/p>\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. Restrict immediately** for security and cost control:<\/strong><\/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; Website restrictions: `*.yourdomain.com\/*` and `localhost\/*` for testing<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; API restrictions: Select Maps JavaScript API, Drawing Library, and Geocoding API<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Build the Markable Map Interface<\/p>\n\n\n\n<p>Create `markable-map.html` with this complete 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>Interactive Map - Mark Multiple Locations<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-blue<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">--secondary-blue<\/span>: <span class=\"hljs-number\">#4285f4<\/span>;\n            <span class=\"hljs-attribute\">--success-green<\/span>: <span class=\"hljs-number\">#34a853<\/span>;\n            <span class=\"hljs-attribute\">--warning-orange<\/span>: <span class=\"hljs-number\">#fbbc04<\/span>;\n            <span class=\"hljs-attribute\">--danger-red<\/span>: <span class=\"hljs-number\">#ea4335<\/span>;\n            <span class=\"hljs-attribute\">--light-gray<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">--medium-gray<\/span>: <span class=\"hljs-number\">#dadce0<\/span>;\n            <span class=\"hljs-attribute\">--dark-gray<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n        }\n        \n        * {\n            <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\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        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Segoe UI'<\/span>, system-ui, -apple-system, 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            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/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\">16px<\/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.15<\/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\">90vh<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/* Sidebar Styles *\/<\/span>\n        <span class=\"hljs-selector-class\">.sidebar<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9ff<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e8eaf6<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n        }\n        \n        <span class=\"hljs-selector-class\">.logo<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">22px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.logo-icon<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\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\">color<\/span>: white;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.tools-panel<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e8eaf6<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">12px<\/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\">.tool-btn<\/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\">14px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--medium-gray);\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">12px<\/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-gray);\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.tool-btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f0f7ff<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2px<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.tool-btn<\/span><span class=\"hljs-selector-class\">.active<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e8f0fe<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n        }\n        \n        <span class=\"hljs-selector-class\">.tool-icon<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">24px<\/span>;\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\">font-size<\/span>: <span class=\"hljs-number\">18px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.color-palette<\/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\">8px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-number\">0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.color-option<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">3px<\/span> solid transparent;\n            <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-number\">0.2s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.color-option<\/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\">.color-option<\/span><span class=\"hljs-selector-class\">.selected<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.locations-list<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e8eaf6<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9ff<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">4px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e8f0fe<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">4px<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-title<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a237e<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-coords<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Courier New'<\/span>, monospace;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-gray);\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/* Map Container Styles *\/<\/span>\n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: relative;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-header<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span> <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">90deg<\/span>, #<span class=\"hljs-number\">1<\/span>a237e <span class=\"hljs-number\">0%<\/span>, #<span class=\"hljs-number\">283593<\/span> <span class=\"hljs-number\">100%<\/span>);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-header<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">28px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-header<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.9<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">15px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">500px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-controls<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: absolute;\n            <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">120px<\/span>;\n            <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/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\">8px<\/span> <span class=\"hljs-number\">24px<\/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.15<\/span>);\n            <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1000<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">220px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.control-group<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.control-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\">6px<\/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-gray);\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-tag\">select<\/span>, <span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-attr\">&#91;type=<span class=\"hljs-string\">\"text\"<\/span>]<\/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\">10px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--medium-gray);\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/* Stats Bar *\/<\/span>\n        <span class=\"hljs-selector-class\">.stats-bar<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--medium-gray);\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-item<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-value<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-blue);\n        }\n        \n        <span class=\"hljs-selector-class\">.stat-label<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-gray);\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.action-buttons<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">12px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\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\">gap<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/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-blue);\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-number\">#0d62d9<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">26<\/span>, <span class=\"hljs-number\">115<\/span>, <span class=\"hljs-number\">232<\/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-built_in\">var<\/span>(--light-gray);\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-gray);\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-secondary<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e8eaed<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/* Marker Info Window *\/<\/span>\n        <span class=\"hljs-selector-class\">.custom-infowindow<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">min-width<\/span>: <span class=\"hljs-number\">280px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.custom-infowindow<\/span> <span class=\"hljs-selector-tag\">h3<\/span> {\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a237e<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.custom-infowindow<\/span> <span class=\"hljs-selector-tag\">input<\/span>,\n        <span class=\"hljs-selector-class\">.custom-infowindow<\/span> <span class=\"hljs-selector-tag\">textarea<\/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\">10px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--medium-gray);\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.marker-preview<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid white;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">4px<\/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.2<\/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\">.dashboard<\/span> {\n                <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr;\n                <span class=\"hljs-attribute\">min-height<\/span>: auto;\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\">#e8eaf6<\/span>;\n            }\n            \n            <span class=\"hljs-selector-class\">.map-controls<\/span> {\n                <span class=\"hljs-attribute\">position<\/span>: relative;\n                <span class=\"hljs-attribute\">top<\/span>: auto;\n                <span class=\"hljs-attribute\">right<\/span>: auto;\n                <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span>;\n                <span class=\"hljs-attribute\">width<\/span>: auto;\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.0.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-comment\">&lt;!-- Sidebar with Tools --&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\">\"logo\"<\/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\">\"logo-icon\"<\/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-marked-alt\"<\/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\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>MapMarker Pro<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/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\">\"tools-panel\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom: 20px; color: #1a237e;\"<\/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-tools\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Marking Tools\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tool-btn active\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"markerTool\"<\/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\">\"tool-icon\"<\/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>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Add Marker<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tool-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"polygonTool\"<\/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\">\"tool-icon\"<\/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-draw-polygon\"<\/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\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Draw Area<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tool-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"lineTool\"<\/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\">\"tool-icon\"<\/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-route\"<\/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\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Draw Route<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"tool-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clearTool\"<\/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\">\"tool-icon\"<\/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-alt\"<\/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\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>Clear All<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: 20px 0;\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom: 10px; color: #1a237e;\"<\/span>&gt;<\/span>Marker Colors<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/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\">\"color-palette\"<\/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\">\"color-option selected\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #1a73e8;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#1a73e8\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #34a853;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#34a853\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #ea4335;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#ea4335\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #fbbc04;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#fbbc04\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #8e44ad;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#8e44ad\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #2c3e50;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#2c3e50\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #e74c3c;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#e74c3c\"<\/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\">\"color-option\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #27ae60;\"<\/span> <span class=\"hljs-attr\">data-color<\/span>=<span class=\"hljs-string\">\"#27ae60\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <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\">\"control-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"markerStyle\"<\/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-palette\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Marker Style\n                    <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\">\"markerStyle\"<\/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\">\"pin\"<\/span>&gt;<\/span>Standard Pin<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\">\"circle\"<\/span>&gt;<\/span>Circle<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\">\"square\"<\/span>&gt;<\/span>Square<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\">\"star\"<\/span>&gt;<\/span>Star<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">option<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">select<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            \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\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom: 20px; color: #1a237e;\"<\/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-layer-group\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Marked Locations\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"markerCount\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #e8eaf6; padding: 2px 10px; border-radius: 20px; font-size: 14px; float: right;\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <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-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: #9fa8da;\"<\/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: 48px; margin-bottom: 20px; opacity: 0.5;\"<\/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 marked yet<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"font-size: 14px; margin-top: 10px;\"<\/span>&gt;<\/span>Click on the map to add your first marker<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;!-- Main Map Area --&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-header\"<\/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\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Interactive Marking Map<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>Click anywhere on the map to mark locations. Customize each marker with details.<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            \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            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-controls\"<\/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\">\"control-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"mapType\"<\/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-globe\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Map Style\n                    <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\">\"mapType\"<\/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\">\"roadmap\"<\/span>&gt;<\/span>Road Map<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\">\"hybrid\"<\/span>&gt;<\/span>Hybrid<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\">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\">\"control-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"searchLocation\"<\/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-search\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Search Location\n                    <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\">\"searchLocation\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter address or place...\"<\/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\">\"control-group\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/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-sliders-h\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Settings\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/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: flex; flex-direction: column; gap: 8px;\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: flex; align-items: center; gap: 8px; font-size: 13px;\"<\/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\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"autoSave\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> Auto-save marks\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: flex; align-items: center; gap: 8px; font-size: 13px;\"<\/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\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"snapToRoads\"<\/span>&gt;<\/span> Snap to roads\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: flex; align-items: center; gap: 8px; font-size: 13px;\"<\/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\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"showLabels\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> Show labels\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/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-bar\"<\/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-item\"<\/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-value\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"totalMarkers\"<\/span>&gt;<\/span>0<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-label\"<\/span>&gt;<\/span>Markers<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\">\"stat-item\"<\/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-value\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"mapArea\"<\/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\">\"stat-label\"<\/span>&gt;<\/span>Area Covered<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\">\"action-buttons\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-secondary\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"exportBtn\"<\/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-download\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Export\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\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"saveMapBtn\"<\/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-save\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Save 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    <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 Drawing Library --&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=drawing,places,geometry\"<\/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\">\/\/ Replace with your actual API key<\/span>\n        <span class=\"hljs-keyword\">const<\/span> API_KEY = <span class=\"hljs-string\">'YOUR_API_KEY_HERE'<\/span>;\n        \n        <span class=\"hljs-comment\">\/\/ Global variables<\/span>\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> drawingManager;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> currentColor = <span class=\"hljs-string\">'#1a73e8'<\/span>;\n        <span class=\"hljs-keyword\">let<\/span> currentTool = <span class=\"hljs-string\">'marker'<\/span>;\n        <span class=\"hljs-keyword\">let<\/span> geocoder;\n        <span class=\"hljs-keyword\">let<\/span> searchBox;\n        <span class=\"hljs-keyword\">let<\/span> bounds;\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 (Central US)<\/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\">\/\/ Create 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\">false<\/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\">mapTypeId<\/span>: <span class=\"hljs-string\">'roadmap'<\/span>,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"poi\"<\/span>,\n                        <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>,\n                        <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n                    }\n                ]\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Initialize services<\/span>\n            geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n            bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            \n            <span class=\"hljs-comment\">\/\/ Setup drawing manager<\/span>\n            setupDrawingTools();\n            \n            <span class=\"hljs-comment\">\/\/ Setup search box<\/span>\n            setupSearchBox();\n            \n            <span class=\"hljs-comment\">\/\/ Setup event listeners<\/span>\n            setupEventListeners();\n            \n            <span class=\"hljs-comment\">\/\/ Load saved markers from localStorage<\/span>\n            loadSavedMarkers();\n            \n            <span class=\"hljs-comment\">\/\/ Update stats<\/span>\n            updateStats();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Setup drawing tools<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupDrawingTools<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            drawingManager = <span class=\"hljs-keyword\">new<\/span> google.maps.drawing.DrawingManager({\n                <span class=\"hljs-attr\">drawingMode<\/span>: <span class=\"hljs-literal\">null<\/span>,\n                <span class=\"hljs-attr\">drawingControl<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                <span class=\"hljs-attr\">markerOptions<\/span>: {\n                    <span class=\"hljs-attr\">draggable<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                    <span class=\"hljs-attr\">icon<\/span>: createCustomMarkerIcon(currentColor, <span class=\"hljs-string\">'pin'<\/span>)\n                },\n                <span class=\"hljs-attr\">polygonOptions<\/span>: {\n                    <span class=\"hljs-attr\">fillColor<\/span>: currentColor,\n                    <span class=\"hljs-attr\">fillOpacity<\/span>: <span class=\"hljs-number\">0.3<\/span>,\n                    <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">2<\/span>,\n                    <span class=\"hljs-attr\">strokeColor<\/span>: currentColor\n                },\n                <span class=\"hljs-attr\">polylineOptions<\/span>: {\n                    <span class=\"hljs-attr\">strokeColor<\/span>: currentColor,\n                    <span class=\"hljs-attr\">strokeOpacity<\/span>: <span class=\"hljs-number\">1.0<\/span>,\n                    <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">3<\/span>\n                }\n            });\n            \n            drawingManager.setMap(map);\n            \n            <span class=\"hljs-comment\">\/\/ Listen for marker completion<\/span>\n            google.maps.event.addListener(drawingManager, <span class=\"hljs-string\">'markercomplete'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">marker<\/span>) <\/span>{\n                addMarkerToCollection(marker);\n                openMarkerInfoWindow(marker);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Listen for polygon completion<\/span>\n            google.maps.event.addListener(drawingManager, <span class=\"hljs-string\">'polygoncomplete'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">polygon<\/span>) <\/span>{\n                addPolygonToCollection(polygon);\n                bounds.union(polygon.getBounds());\n                updateStats();\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Listen for polyline completion<\/span>\n            google.maps.event.addListener(drawingManager, <span class=\"hljs-string\">'polylinecomplete'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">polyline<\/span>) <\/span>{\n                addPolylineToCollection(polyline);\n                updateStats();\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Create custom marker icon<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createCustomMarkerIcon<\/span>(<span class=\"hljs-params\">color, style = <span class=\"hljs-string\">'pin'<\/span><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> base = <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/'<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> colors = {\n                <span class=\"hljs-string\">'#1a73e8'<\/span>: <span class=\"hljs-string\">'blue'<\/span>,\n                <span class=\"hljs-string\">'#34a853'<\/span>: <span class=\"hljs-string\">'green'<\/span>,\n                <span class=\"hljs-string\">'#ea4335'<\/span>: <span class=\"hljs-string\">'red'<\/span>,\n                <span class=\"hljs-string\">'#fbbc04'<\/span>: <span class=\"hljs-string\">'yellow'<\/span>,\n                <span class=\"hljs-string\">'#8e44ad'<\/span>: <span class=\"hljs-string\">'purple'<\/span>,\n                <span class=\"hljs-string\">'#2c3e50'<\/span>: <span class=\"hljs-string\">'black'<\/span>,\n                <span class=\"hljs-string\">'#e74c3c'<\/span>: <span class=\"hljs-string\">'orange'<\/span>,\n                <span class=\"hljs-string\">'#27ae60'<\/span>: <span class=\"hljs-string\">'lightgreen'<\/span>\n            };\n            \n            <span class=\"hljs-keyword\">const<\/span> colorName = colors&#91;color] || <span class=\"hljs-string\">'blue'<\/span>;\n            \n            <span class=\"hljs-keyword\">if<\/span> (style === <span class=\"hljs-string\">'pin'<\/span>) {\n                <span class=\"hljs-keyword\">return<\/span> {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${base}<\/span><span class=\"hljs-subst\">${colorName}<\/span>-dot.png`<\/span>,\n                    <span class=\"hljs-attr\">scaledSize<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Size(<span class=\"hljs-number\">32<\/span>, <span class=\"hljs-number\">32<\/span>)\n                };\n            } <span class=\"hljs-keyword\">else<\/span> {\n                <span class=\"hljs-comment\">\/\/ For other styles, use custom SVG<\/span>\n                <span class=\"hljs-keyword\">const<\/span> svg = createSVGIcon(color, style);\n                <span class=\"hljs-keyword\">return<\/span> {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'data:image\/svg+xml;charset=UTF-8,'<\/span> + <span class=\"hljs-built_in\">encodeURIComponent<\/span>(svg),\n                    <span class=\"hljs-attr\">scaledSize<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Size(<span class=\"hljs-number\">32<\/span>, <span class=\"hljs-number\">32<\/span>),\n                    <span class=\"hljs-attr\">anchor<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Point(<span class=\"hljs-number\">16<\/span>, <span class=\"hljs-number\">16<\/span>)\n                };\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Create SVG icon for custom markers<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createSVGIcon<\/span>(<span class=\"hljs-params\">color, style<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> svgMap = {\n                <span class=\"hljs-attr\">circle<\/span>: <span class=\"hljs-string\">`&lt;svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n                            &lt;circle cx=\"16\" cy=\"16\" r=\"12\" fill=\"<span class=\"hljs-subst\">${color}<\/span>\" stroke=\"white\" stroke-width=\"3\"\/&gt;\n                         &lt;\/svg&gt;`<\/span>,\n                <span class=\"hljs-attr\">square<\/span>: <span class=\"hljs-string\">`&lt;svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n                            &lt;rect x=\"6\" y=\"6\" width=\"20\" height=\"20\" fill=\"<span class=\"hljs-subst\">${color}<\/span>\" stroke=\"white\" stroke-width=\"3\" rx=\"3\"\/&gt;\n                         &lt;\/svg&gt;`<\/span>,\n                <span class=\"hljs-attr\">star<\/span>: <span class=\"hljs-string\">`&lt;svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n                         &lt;path d=\"M16 2 L20 12 L30 12 L22 19 L25 30 L16 23 L7 30 L10 19 L2 12 L12 12 Z\" \n                               fill=\"<span class=\"hljs-subst\">${color}<\/span>\" stroke=\"white\" stroke-width=\"1\"\/&gt;\n                       &lt;\/svg&gt;`<\/span>\n            };\n            \n            <span class=\"hljs-keyword\">return<\/span> svgMap&#91;style] || svgMap.circle;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Add marker to collection<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addMarkerToCollection<\/span>(<span class=\"hljs-params\">marker<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-built_in\">Date<\/span>.now() + <span class=\"hljs-built_in\">Math<\/span>.random(),\n                <span class=\"hljs-attr\">marker<\/span>: marker,\n                <span class=\"hljs-attr\">color<\/span>: currentColor,\n                <span class=\"hljs-attr\">style<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerStyle'<\/span>).value,\n                <span class=\"hljs-attr\">position<\/span>: marker.getPosition(),\n                <span class=\"hljs-attr\">createdAt<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n            };\n            \n            markers.push(markerData);\n            \n            <span class=\"hljs-comment\">\/\/ Add drag event<\/span>\n            marker.addListener(<span class=\"hljs-string\">'dragend'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                updateMarkerInList(markerData.id);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Add click event to open info window<\/span>\n            marker.addListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                openMarkerInfoWindow(marker);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Extend bounds<\/span>\n            bounds.extend(marker.getPosition());\n            \n            <span class=\"hljs-comment\">\/\/ Update UI<\/span>\n            updateMarkerList();\n            updateStats();\n            \n            <span class=\"hljs-comment\">\/\/ Auto-save if enabled<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'autoSave'<\/span>).checked) {\n                saveMarkersToStorage();\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Open info window for marker<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">openMarkerInfoWindow<\/span>(<span class=\"hljs-params\">marker<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.marker === marker);\n            <span class=\"hljs-keyword\">if<\/span> (!markerData) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-string\">`\n                &lt;div class=\"custom-infowindow\"&gt;\n                    &lt;h3&gt;Edit Marker&lt;\/h3&gt;\n                    &lt;input type=\"text\" id=\"markerTitle\" placeholder=\"Marker title\" value=\"Marker <span class=\"hljs-subst\">${markers.indexOf(markerData) + <span class=\"hljs-number\">1<\/span>}<\/span>\"&gt;\n                    &lt;textarea id=\"markerDescription\" placeholder=\"Description (optional)\" rows=\"3\"&gt;&lt;\/textarea&gt;\n                    &lt;div style=\"display: flex; gap: 10px; margin-top: 15px;\"&gt;\n                        &lt;button onclick=\"saveMarkerDetails('<span class=\"hljs-subst\">${markerData.id}<\/span>')\" \n                                style=\"flex: 1; padding: 10px; background: #1a73e8; color: white; border: none; border-radius: 6px; cursor: pointer;\"&gt;\n                            Save\n                        &lt;\/button&gt;\n                        &lt;button onclick=\"deleteMarker('<span class=\"hljs-subst\">${markerData.id}<\/span>')\" \n                                style=\"flex: 1; padding: 10px; background: #ea4335; color: white; border: none; border-radius: 6px; cursor: pointer;\"&gt;\n                            Delete\n                        &lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                <span class=\"hljs-attr\">content<\/span>: content,\n                <span class=\"hljs-attr\">maxWidth<\/span>: <span class=\"hljs-number\">300<\/span>\n            });\n            \n            infoWindow.open(map, marker);\n            markerData.infoWindow = infoWindow;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Save marker details<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveMarkerDetails<\/span>(<span class=\"hljs-params\">markerId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.id === markerId);\n            <span class=\"hljs-keyword\">if<\/span> (!markerData) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> title = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerTitle'<\/span>).value;\n            <span class=\"hljs-keyword\">const<\/span> description = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerDescription'<\/span>).value;\n            \n            markerData.title = title;\n            markerData.description = description;\n            \n            <span class=\"hljs-keyword\">if<\/span> (markerData.infoWindow) {\n                markerData.infoWindow.close();\n            }\n            \n            updateMarkerList();\n            saveMarkersToStorage();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Delete marker<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">deleteMarker<\/span>(<span class=\"hljs-params\">markerId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.id === markerId);\n            <span class=\"hljs-keyword\">if<\/span> (!markerData) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Remove from map<\/span>\n            markerData.marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Remove from array<\/span>\n            markers = markers.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.id !== markerId);\n            \n            <span class=\"hljs-comment\">\/\/ Close info window<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (markerData.infoWindow) {\n                markerData.infoWindow.close();\n            }\n            \n            updateMarkerList();\n            updateStats();\n            saveMarkersToStorage();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Update marker in list<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateMarkerInList<\/span>(<span class=\"hljs-params\">markerId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.id === markerId);\n            <span class=\"hljs-keyword\">if<\/span> (markerData) {\n                markerData.position = markerData.marker.getPosition();\n                updateMarkerList();\n                saveMarkersToStorage();\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Update marker list in sidebar<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateMarkerList<\/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            <span class=\"hljs-keyword\">const<\/span> countElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerCount'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> totalMarkersElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalMarkers'<\/span>);\n            \n            countElement.textContent = markers.length;\n            totalMarkersElement.textContent = markers.length;\n            \n            <span class=\"hljs-keyword\">if<\/span> (markers.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: #9fa8da;\"&gt;\n                        &lt;i class=\"fas fa-map-pin\" style=\"font-size: 48px; margin-bottom: 20px; opacity: 0.5;\"&gt;&lt;\/i&gt;\n                        &lt;p&gt;No locations marked yet&lt;\/p&gt;\n                        &lt;p style=\"font-size: 14px; margin-top: 10px;\"&gt;Click on the map to add your first marker&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            markers.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">markerData, index<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> lat = markerData.position.lat().toFixed(<span class=\"hljs-number\">6<\/span>);\n                <span class=\"hljs-keyword\">const<\/span> lng = markerData.position.lng().toFixed(<span class=\"hljs-number\">6<\/span>);\n                <span class=\"hljs-keyword\">const<\/span> title = markerData.title || <span class=\"hljs-string\">`Marker <span class=\"hljs-subst\">${index + <span class=\"hljs-number\">1<\/span>}<\/span>`<\/span>;\n                \n                html += <span class=\"hljs-string\">`\n                    &lt;div class=\"location-item\" onclick=\"panToMarker('<span class=\"hljs-subst\">${markerData.id}<\/span>')\"&gt;\n                        &lt;div class=\"location-title\"&gt;\n                            &lt;span class=\"marker-preview\" style=\"background: <span class=\"hljs-subst\">${markerData.color}<\/span>;\"&gt;&lt;\/span&gt;\n                            <span class=\"hljs-subst\">${title}<\/span>\n                        &lt;\/div&gt;\n                        <span class=\"hljs-subst\">${markerData.description ? \n                          <span class=\"hljs-string\">`&lt;div style=\"color: #666; font-size: 14px; margin-top: 5px;\"&gt;<span class=\"hljs-subst\">${markerData.description}<\/span>&lt;\/div&gt;`<\/span> : <span class=\"hljs-string\">''<\/span>}<\/span>\n                        &lt;div class=\"location-coords\"&gt;<span class=\"hljs-subst\">${lat}<\/span>, <span class=\"hljs-subst\">${lng}<\/span>&lt;\/div&gt;\n                        &lt;div style=\"display: flex; justify-content: flex-end; margin-top: 10px; gap: 8px;\"&gt;\n                            &lt;button onclick=\"event.stopPropagation(); editMarker('<span class=\"hljs-subst\">${markerData.id}<\/span>')\" \n                                    style=\"padding: 4px 8px; background: #e8eaf6; border: none; border-radius: 4px; font-size: 12px; cursor: pointer;\"&gt;\n                                &lt;i class=\"fas fa-edit\"&gt;&lt;\/i&gt;\n                            &lt;\/button&gt;\n                            &lt;button onclick=\"event.stopPropagation(); deleteMarker('<span class=\"hljs-subst\">${markerData.id}<\/span>')\" \n                                    style=\"padding: 4px 8px; background: #ffebee; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; color: #ea4335;\"&gt;\n                                &lt;i class=\"fas fa-trash\"&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-comment\">\/\/ Pan to specific marker<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">panToMarker<\/span>(<span class=\"hljs-params\">markerId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.id === markerId);\n            <span class=\"hljs-keyword\">if<\/span> (markerData) {\n                map.panTo(markerData.position);\n                map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                markerData.marker.setAnimation(google.maps.Animation.BOUNCE);\n                setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                    markerData.marker.setAnimation(<span class=\"hljs-literal\">null<\/span>);\n                }, <span class=\"hljs-number\">1500<\/span>);\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Edit marker<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">editMarker<\/span>(<span class=\"hljs-params\">markerId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> markerData = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.id === markerId);\n            <span class=\"hljs-keyword\">if<\/span> (markerData) {\n                openMarkerInfoWindow(markerData.marker);\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Setup search box<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupSearchBox<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> input = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'searchLocation'<\/span>);\n            searchBox = <span class=\"hljs-keyword\">new<\/span> google.maps.places.SearchBox(input);\n            \n            map.controls&#91;google.maps.ControlPosition.TOP_LEFT].push(input);\n            \n            <span class=\"hljs-comment\">\/\/ Bias search results to current map viewport<\/span>\n            map.addListener(<span class=\"hljs-string\">'bounds_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                searchBox.setBounds(map.getBounds());\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Listen for place selection<\/span>\n            searchBox.addListener(<span class=\"hljs-string\">'places_changed'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                <span class=\"hljs-keyword\">const<\/span> places = searchBox.getPlaces();\n                \n                <span class=\"hljs-keyword\">if<\/span> (places.length === <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n                \n                <span class=\"hljs-keyword\">const<\/span> place = places&#91;<span class=\"hljs-number\">0<\/span>];\n                \n                <span class=\"hljs-comment\">\/\/ Pan to the place<\/span>\n                map.panTo(place.geometry.location);\n                map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                \n                <span class=\"hljs-comment\">\/\/ Add a marker at the place<\/span>\n                <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">position<\/span>: place.geometry.location,\n                    <span class=\"hljs-attr\">icon<\/span>: createCustomMarkerIcon(currentColor, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerStyle'<\/span>).value)\n                });\n                \n                addMarkerToCollection(marker);\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Setup event listeners<\/span>\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\">\/\/ Tool buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerTool'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                setActiveTool(<span class=\"hljs-string\">'marker'<\/span>);\n                drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);\n            });\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'polygonTool'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                setActiveTool(<span class=\"hljs-string\">'polygon'<\/span>);\n                drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);\n            });\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'lineTool'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                setActiveTool(<span class=\"hljs-string\">'line'<\/span>);\n                drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE);\n            });\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'clearTool'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">'Are you sure you want to clear all markers and drawings?'<\/span>)) {\n                    clearAllMarkers();\n                }\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Color palette<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.color-option'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">option<\/span> =&gt;<\/span> {\n                option.addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.color-option'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">opt<\/span> =&gt;<\/span> {\n                        opt.classList.remove(<span class=\"hljs-string\">'selected'<\/span>);\n                    });\n                    <span class=\"hljs-keyword\">this<\/span>.classList.add(<span class=\"hljs-string\">'selected'<\/span>);\n                    currentColor = <span class=\"hljs-keyword\">this<\/span>.getAttribute(<span class=\"hljs-string\">'data-color'<\/span>);\n                    \n                    <span class=\"hljs-comment\">\/\/ Update drawing manager options<\/span>\n                    drawingManager.setOptions({\n                        <span class=\"hljs-attr\">markerOptions<\/span>: {\n                            <span class=\"hljs-attr\">icon<\/span>: createCustomMarkerIcon(currentColor, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerStyle'<\/span>).value)\n                        },\n                        <span class=\"hljs-attr\">polygonOptions<\/span>: {\n                            <span class=\"hljs-attr\">fillColor<\/span>: currentColor,\n                            <span class=\"hljs-attr\">strokeColor<\/span>: currentColor\n                        },\n                        <span class=\"hljs-attr\">polylineOptions<\/span>: {\n                            <span class=\"hljs-attr\">strokeColor<\/span>: currentColor\n                        }\n                    });\n                });\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Marker style change<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerStyle'<\/span>).addEventListener(<span class=\"hljs-string\">'change'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                drawingManager.setOptions({\n                    <span class=\"hljs-attr\">markerOptions<\/span>: {\n                        <span class=\"hljs-attr\">icon<\/span>: createCustomMarkerIcon(currentColor, <span class=\"hljs-keyword\">this<\/span>.value)\n                    }\n                });\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Map type change<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'mapType'<\/span>).addEventListener(<span class=\"hljs-string\">'change'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                map.setMapTypeId(<span class=\"hljs-keyword\">this<\/span>.value);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Export button<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'exportBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, exportMarkers);\n            \n            <span class=\"hljs-comment\">\/\/ Save map button<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'saveMapBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, saveMap);\n            \n            <span class=\"hljs-comment\">\/\/ Map click for manual marker addition<\/span>\n            map.addListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n                <span class=\"hljs-keyword\">if<\/span> (currentTool === <span class=\"hljs-string\">'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>: event.latLng,\n                        <span class=\"hljs-attr\">map<\/span>: map,\n                        <span class=\"hljs-attr\">icon<\/span>: createCustomMarkerIcon(currentColor, <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'markerStyle'<\/span>).value),\n                        <span class=\"hljs-attr\">draggable<\/span>: <span class=\"hljs-literal\">true<\/span>\n                    });\n                    \n                    addMarkerToCollection(marker);\n                    openMarkerInfoWindow(marker);\n                }\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Set active tool<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setActiveTool<\/span>(<span class=\"hljs-params\">tool<\/span>) <\/span>{\n            currentTool = tool;\n            \n            <span class=\"hljs-comment\">\/\/ Update button states<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.tool-btn'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">btn<\/span> =&gt;<\/span> {\n                btn.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n            });\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(tool + <span class=\"hljs-string\">'Tool'<\/span>).classList.add(<span class=\"hljs-string\">'active'<\/span>);\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Add polygon to collection<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addPolygonToCollection<\/span>(<span class=\"hljs-params\">polygon<\/span>) <\/span>{\n            polygon.setOptions({\n                <span class=\"hljs-attr\">fillColor<\/span>: currentColor,\n                <span class=\"hljs-attr\">fillOpacity<\/span>: <span class=\"hljs-number\">0.3<\/span>,\n                <span class=\"hljs-attr\">strokeColor<\/span>: currentColor,\n                <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">2<\/span>\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Add right-click to delete<\/span>\n            polygon.addListener(<span class=\"hljs-string\">'rightclick'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n                <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">'Delete this polygon?'<\/span>)) {\n                    polygon.setMap(<span class=\"hljs-literal\">null<\/span>);\n                    updateStats();\n                }\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Add polyline to collection<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addPolylineToCollection<\/span>(<span class=\"hljs-params\">polyline<\/span>) <\/span>{\n            polyline.setOptions({\n                <span class=\"hljs-attr\">strokeColor<\/span>: currentColor,\n                <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">3<\/span>\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Add right-click to delete<\/span>\n            polyline.addListener(<span class=\"hljs-string\">'rightclick'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n                <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">'Delete this line?'<\/span>)) {\n                    polyline.setMap(<span class=\"hljs-literal\">null<\/span>);\n                    updateStats();\n                }\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Clear all markers<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearAllMarkers<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">markerData<\/span> =&gt;<\/span> {\n                markerData.marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n                <span class=\"hljs-keyword\">if<\/span> (markerData.infoWindow) {\n                    markerData.infoWindow.close();\n                }\n            });\n            \n            markers = &#91;];\n            bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            \n            updateMarkerList();\n            updateStats();\n            localStorage.removeItem(<span class=\"hljs-string\">'savedMarkers'<\/span>);\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Update statistics<\/span>\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-keyword\">if<\/span> (bounds.isEmpty()) {\n                <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'mapArea'<\/span>).textContent = <span class=\"hljs-string\">'--'<\/span>;\n                <span class=\"hljs-keyword\">return<\/span>;\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> latDiff = <span class=\"hljs-built_in\">Math<\/span>.abs(ne.lat() - sw.lat());\n            <span class=\"hljs-keyword\">const<\/span> lngDiff = <span class=\"hljs-built_in\">Math<\/span>.abs(ne.lng() - sw.lng());\n            \n            <span class=\"hljs-keyword\">let<\/span> areaDescription;\n            <span class=\"hljs-keyword\">if<\/span> (latDiff &lt; <span class=\"hljs-number\">0.1<\/span> &amp;&amp; lngDiff &lt; <span class=\"hljs-number\">0.1<\/span>) {\n                areaDescription = <span class=\"hljs-string\">\"Local\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (latDiff &lt; <span class=\"hljs-number\">1<\/span> &amp;&amp; lngDiff &lt; <span class=\"hljs-number\">1<\/span>) {\n                areaDescription = <span class=\"hljs-string\">\"City\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (latDiff &lt; <span class=\"hljs-number\">5<\/span> &amp;&amp; lngDiff &lt; <span class=\"hljs-number\">5<\/span>) {\n                areaDescription = <span class=\"hljs-string\">\"Regional\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> {\n                areaDescription = <span class=\"hljs-string\">\"Large Area\"<\/span>;\n            }\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'mapArea'<\/span>).textContent = areaDescription;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Export markers<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">exportMarkers<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (markers.length === <span class=\"hljs-number\">0<\/span>) {\n                alert(<span class=\"hljs-string\">'No markers to export!'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">const<\/span> exportData = markers.map(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> ({\n                <span class=\"hljs-attr\">title<\/span>: marker.title || <span class=\"hljs-string\">'Untitled Marker'<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: marker.description || <span class=\"hljs-string\">''<\/span>,\n                <span class=\"hljs-attr\">latitude<\/span>: marker.position.lat(),\n                <span class=\"hljs-attr\">longitude<\/span>: marker.position.lng(),\n                <span class=\"hljs-attr\">color<\/span>: marker.color,\n                <span class=\"hljs-attr\">style<\/span>: marker.style,\n                <span class=\"hljs-attr\">created<\/span>: marker.createdAt\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> exportFileDefaultName = <span class=\"hljs-string\">`map-markers-<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            \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>, exportFileDefaultName);\n            linkElement.click();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Save map state<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> mapState = {\n                <span class=\"hljs-attr\">center<\/span>: map.getCenter(),\n                <span class=\"hljs-attr\">zoom<\/span>: map.getZoom(),\n                <span class=\"hljs-attr\">markers<\/span>: markers.map(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> ({\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: marker.position.lat(), <span class=\"hljs-attr\">lng<\/span>: marker.position.lng() },\n                    <span class=\"hljs-attr\">color<\/span>: marker.color,\n                    <span class=\"hljs-attr\">style<\/span>: marker.style,\n                    <span class=\"hljs-attr\">title<\/span>: marker.title,\n                    <span class=\"hljs-attr\">description<\/span>: marker.description\n                })),\n                <span class=\"hljs-attr\">savedAt<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n            };\n            \n            localStorage.setItem(<span class=\"hljs-string\">'mapState'<\/span>, <span class=\"hljs-built_in\">JSON<\/span>.stringify(mapState));\n            alert(<span class=\"hljs-string\">'Map saved successfully!'<\/span>);\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Load saved markers from localStorage<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadSavedMarkers<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> saved = localStorage.getItem(<span class=\"hljs-string\">'mapState'<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (saved) {\n                <span class=\"hljs-keyword\">try<\/span> {\n                    <span class=\"hljs-keyword\">const<\/span> mapState = <span class=\"hljs-built_in\">JSON<\/span>.parse(saved);\n                    \n                    <span class=\"hljs-comment\">\/\/ Restore map position<\/span>\n                    map.setCenter(mapState.center);\n                    map.setZoom(mapState.zoom);\n                    \n                    <span class=\"hljs-comment\">\/\/ Restore markers<\/span>\n                    mapState.markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">markerData<\/span> =&gt;<\/span> {\n                        <span class=\"hljs-keyword\">const<\/span> position = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(markerData.position.lat, markerData.position.lng);\n                        <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                            <span class=\"hljs-attr\">position<\/span>: position,\n                            <span class=\"hljs-attr\">map<\/span>: map,\n                            <span class=\"hljs-attr\">icon<\/span>: createCustomMarkerIcon(markerData.color || currentColor, markerData.style || <span class=\"hljs-string\">'pin'<\/span>),\n                            <span class=\"hljs-attr\">draggable<\/span>: <span class=\"hljs-literal\">true<\/span>\n                        });\n                        \n                        <span class=\"hljs-keyword\">const<\/span> restoredMarker = {\n                            <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-built_in\">Date<\/span>.now() + <span class=\"hljs-built_in\">Math<\/span>.random(),\n                            <span class=\"hljs-attr\">marker<\/span>: marker,\n                            <span class=\"hljs-attr\">color<\/span>: markerData.color || currentColor,\n                            <span class=\"hljs-attr\">style<\/span>: markerData.style || <span class=\"hljs-string\">'pin'<\/span>,\n                            <span class=\"hljs-attr\">position<\/span>: position,\n                            <span class=\"hljs-attr\">title<\/span>: markerData.title,\n                            <span class=\"hljs-attr\">description<\/span>: markerData.description,\n                            <span class=\"hljs-attr\">createdAt<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n                        };\n                        \n                        markers.push(restoredMarker);\n                        bounds.extend(position);\n                        \n                        <span class=\"hljs-comment\">\/\/ Add drag event<\/span>\n                        marker.addListener(<span class=\"hljs-string\">'dragend'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                            updateMarkerInList(restoredMarker.id);\n                        });\n                        \n                        <span class=\"hljs-comment\">\/\/ Add click event<\/span>\n                        marker.addListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                            openMarkerInfoWindow(marker);\n                        });\n                    });\n                    \n                    updateMarkerList();\n                    updateStats();\n                } <span class=\"hljs-keyword\">catch<\/span> (e) {\n                    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">'Error loading saved map:'<\/span>, e);\n                }\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Save markers to localStorage<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveMarkersToStorage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> simplifiedMarkers = markers.map(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> ({\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: marker.position.lat(), <span class=\"hljs-attr\">lng<\/span>: marker.position.lng() },\n                <span class=\"hljs-attr\">color<\/span>: marker.color,\n                <span class=\"hljs-attr\">style<\/span>: marker.style,\n                <span class=\"hljs-attr\">title<\/span>: marker.title,\n                <span class=\"hljs-attr\">description<\/span>: marker.description\n            }));\n            \n            localStorage.setItem(<span class=\"hljs-string\">'savedMarkers'<\/span>, <span class=\"hljs-built_in\">JSON<\/span>.stringify(simplifiedMarkers));\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.onload = initMap;\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: Implementation and Testing<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Replace API Key: <\/strong>Insert your actual Google Maps API key<\/li>\n\n\n\n<li><strong>2. Test Functionality:\u00a0<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Click map to add markers<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Use drawing tools for polygons and lines<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Customize colors and styles<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Export marked locations<\/li>\n\n\n\n<li><strong>3. Deploy:<\/strong> Add to your website via iframe or direct integration<\/li>\n\n\n\n<li><strong>4. Customize:<\/strong> Adjust colors, add custom marker icons, or extend functionality<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"698\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-213-1024x698.png\" alt=\"\" class=\"wp-image-844\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-213-1024x698.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-213-300x205.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-213-768x524.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-213-1536x1047.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-213.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenges of Building This Yourself<\/strong><\/p>\n\n\n\n<p>While this solution works, it has significant complexities:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Drawing Library Complexity:<\/strong> Managing multiple drawing modes and user interactions<\/li>\n\n\n\n<li><strong>State Management:<\/strong> Handling marker data, colors, styles, and persistence<\/li>\n\n\n\n<li><strong>Performance Issues<\/strong>: Slows down with 50+ markers or complex drawings<\/li>\n\n\n\n<li><strong>Export Limitations:<\/strong> Limited export formats without additional coding<\/li>\n\n\n\n<li><strong>No Cloud Storage<\/strong>: All data stored locally in browser<\/li>\n\n\n\n<li><strong>Mobile Responsiveness:<\/strong> Touch gestures require additional optimization<\/li>\n\n\n\n<li><strong>No Collaboration:<\/strong> Cannot share or collaborate on marked maps with others<\/li>\n\n\n\n<li><strong>Maintenance Burden: <\/strong>Google Maps API changes can break functionality<\/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>\u00a0<\/strong><\/p>\n\n\n\n<p>Why spend weeks building a marking interface when you can have a superior solution <strong>instantly<\/strong>?<\/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 a complete platform for creating maps where you can mark multiple locations without any coding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u2705 Intuitive Marking Tools:<\/strong> Click-to-mark interface with smart tools\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Unlimited Markers: <\/strong>No performance issues with hundreds of locations\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Cloud Storage:<\/strong> All your marked maps saved automatically\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Collaboration Features:<\/strong> Share maps with team members for joint marking\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Advanced Export:<\/strong> PDF, image, KML, CSV, and embed codes\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Pre-built Templates:<\/strong> Real estate, travel planning, event mapping\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Mobile Optimized:<\/strong> Works perfectly on all touch devices\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 No API Management: <\/strong>We handle all technical backend\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p><strong>With MapsFun.com, you can:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Create a new map in seconds<\/li>\n\n\n\n<li>2. Mark locations by clicking, searching, or importing<\/li>\n\n\n\n<li>3. Add rich details, photos, and custom fields to each marker<\/li>\n\n\n\n<li>4. Organize markers into layers and categories<\/li>\n\n\n\n<li>5. Share with colleagues or embed on your website<\/li>\n\n\n\n<li>6. Access from any device, anywhere<\/li>\n<\/ul>\n\n\n\n<p>Building a custom marking map requires extensive development time and ongoing technical maintenance. The solution above, while functional, lacks the polish, reliability, and features needed for professional use.<\/p>\n\n\n\n<p>Get professional results without the technical hassle. Create beautiful, interactive maps where you can mark multiple locations instantly at  <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> \u2013 the complete mapping platform designed for ease of use and professional results.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map Where You Can Mark Multiple Locations: The Complete Technical Guide Looking for a map where you can mark or pin multiple locations for planning, visualization, or sharing? Creating an interactive &#8220;markable&#8221; map requires specific technical implementation. Here&#8217;s the working method using Google Maps Platform with a drawing interface. Method: Custom [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[117,1],"tags":[],"class_list":["post-842","post","type-post","status-publish","format-standard","hentry","category-map-where-i-can-mark-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/842","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=842"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/842\/revisions"}],"predecessor-version":[{"id":845,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/842\/revisions\/845"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}