{"id":850,"date":"2025-12-22T13:43:03","date_gmt":"2025-12-22T10:43:03","guid":{"rendered":"https:\/\/mapsfun.com\/?p=850"},"modified":"2025-12-22T13:43:03","modified_gmt":"2025-12-22T10:43:03","slug":"map-route-to-multiple-locations-2025-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=850","title":{"rendered":"Map Route to Multiple Locations (2025 Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map Route to Multiple Locations: The Technical Guide<\/h2>\n\n\n\n<p>Need to plan delivery routes, road trips, or multi-stop journeys? While Google Maps handles simple A-to-B routes, creating optimized routes with multiple stops requires programming. Here&#8217;s the developer method for building custom multi-location route planners.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Custom Google Maps Routes with Optimization<\/strong><\/p>\n\n\n\n<p>This solution creates an interactive route planner with multiple stops, distance calculation, and basic optimization.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Google Cloud with Additional APIs<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Create a project at <strong>[Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong><\/li>\n\n\n\n<li><strong>2. Enable billing <\/strong>(free credits cover moderate usage)<\/li>\n\n\n\n<li>3. Enable these <strong>essential APIs<\/strong><\/li>\n\n\n\n<li>\u00a0\u00a0<strong>\u00a0&#8211; Maps JavaScript API <\/strong>(core maps)<\/li>\n\n\n\n<li>\u00a0<strong>\u00a0\u00a0&#8211; Directions API<\/strong> (route calculations)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Distance Matrix API<\/strong> (multi-point distance calculations)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Geocoding API<\/strong> (address conversion)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-216-1024x481.png\" alt=\"\" class=\"wp-image-851\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-216-1024x481.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-216-300x141.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-216-768x361.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-216-1536x722.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-216.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Generate and Secure API Keys<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to <strong>Credentials \u2192 Create Credentials \u2192 API Key<\/strong><\/li>\n\n\n\n<li>2. Critical Security Step: Restrict your key:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Application: <strong>HTTP referrers<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Domains: `*.yourwebsite.com\/*`<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; APIs: <strong>Restrict to only the four APIs above<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"1024\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-217-928x1024.png\" alt=\"\" class=\"wp-image-852\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-217-928x1024.png 928w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-217-272x300.png 272w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-217-768x847.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-217-1392x1536.png 1392w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-217.png 1450w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Build the Advanced Route Planner<\/p>\n\n\n\n<p>Create `multi-location-route.html` with this comprehensive code:<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Advanced Multi-Location Route Planner<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-pseudo\">:root<\/span> {\n            <span class=\"hljs-attribute\">--primary-color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">--secondary-color<\/span>: <span class=\"hljs-number\">#0d47a1<\/span>;\n            <span class=\"hljs-attribute\">--success-color<\/span>: <span class=\"hljs-number\">#34a853<\/span>;\n            <span class=\"hljs-attribute\">--warning-color<\/span>: <span class=\"hljs-number\">#fbbc04<\/span>;\n            <span class=\"hljs-attribute\">--danger-color<\/span>: <span class=\"hljs-number\">#ea4335<\/span>;\n            <span class=\"hljs-attribute\">--light-bg<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">--dark-text<\/span>: <span class=\"hljs-number\">#202124<\/span>;\n        }\n        \n        * {\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Google Sans'<\/span>, -apple-system, BlinkMacSystemFont, sans-serif;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, #f5f7fa <span class=\"hljs-number\">0%<\/span>, #c3cfe2 <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-built_in\">var<\/span>(--dark-text);\n        }\n        \n        <span class=\"hljs-selector-class\">.container<\/span> {\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1600px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n        }\n        \n        <span class=\"hljs-selector-class\">.app-header<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.08<\/span>);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">2px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-content<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-title<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2.8rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">90deg<\/span>, var(--primary-color), <span class=\"hljs-built_in\">var<\/span>(--secondary-color));\n            <span class=\"hljs-attribute\">-webkit-background-clip<\/span>: text;\n            <span class=\"hljs-attribute\">-webkit-text-fill-color<\/span>: transparent;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-title<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">700px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header-actions<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">15px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.app-main<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: grid;\n            <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">400px<\/span> <span class=\"hljs-number\">1<\/span>fr;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">2px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">60px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.15<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.control-panel<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--light-bg);\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e0e0e0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.panel-section<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">40px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.section-title<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.3rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">padding-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <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\">.section-title<\/span> <span class=\"hljs-selector-tag\">i<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-list<\/span> {\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">padding-right<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-item<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/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-number\">#e0e0e0<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: move;\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-item<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">5px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">26<\/span>, <span class=\"hljs-number\">115<\/span>, <span class=\"hljs-number\">232<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-item<\/span><span class=\"hljs-selector-class\">.dragging<\/span> {\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.5<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e8f0fe<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-header<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-number<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">28px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">28px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/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-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.waypoint-actions<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.action-btn<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">32px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">32px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f1f3f4<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/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\">justify-content<\/span>: center;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.action-btn<\/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\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\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\">.waypoint-address<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.95rem<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.4<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.input-group<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.input-group<\/span> <span class=\"hljs-selector-tag\">label<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: block;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n        }\n        \n        <span class=\"hljs-selector-class\">.address-input<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.address-input<\/span> <span class=\"hljs-selector-tag\">input<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">14px<\/span> <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#dadce0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: border-color <span class=\"hljs-number\">0.3s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.address-input<\/span> <span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span> {\n            <span class=\"hljs-attribute\">outline<\/span>: none;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">14px<\/span> <span class=\"hljs-number\">28px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: inline-flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">justify-content<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-primary<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-primary<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--secondary-color);\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">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-success<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--success-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-warning<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--warning-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-danger<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--danger-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-full<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-group<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n        }\n        \n        <span class=\"hljs-selector-class\">.optimization-controls<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">margin-top<\/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\">#e0e0e0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.optimization-option<\/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            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: background <span class=\"hljs-number\">0.3s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.optimization-option<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.optimization-option<\/span> <span class=\"hljs-selector-tag\">input<\/span><span class=\"hljs-selector-attr\">&#91;type=<span class=\"hljs-string\">\"radio\"<\/span>]<\/span> {\n            <span class=\"hljs-attribute\">accent-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.optimization-option<\/span> <span class=\"hljs-selector-tag\">label<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: relative;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">700px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.route-info<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: absolute;\n            <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">30px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.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\">320px<\/span>;\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">80vh<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n        }\n        \n        <span class=\"hljs-selector-class\">.route-summary<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">25px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.summary-item<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#f0f0f0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.summary-item<\/span><span class=\"hljs-selector-pseudo\">:last-child<\/span> {\n            <span class=\"hljs-attribute\">border-bottom<\/span>: none;\n        }\n        \n        <span class=\"hljs-selector-class\">.summary-label<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.summary-value<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--dark-text);\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.directions-list<\/span> {\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">300px<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">padding-right<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.direction-step<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#f0f0f0<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9rem<\/span>;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.5<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.direction-step<\/span><span class=\"hljs-selector-pseudo\">:last-child<\/span> {\n            <span class=\"hljs-attribute\">border-bottom<\/span>: none;\n        }\n        \n        <span class=\"hljs-selector-class\">.direction-icon<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.empty-state<\/span> {\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">60px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#9aa0a6<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.empty-state<\/span> <span class=\"hljs-selector-tag\">i<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">4rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.3<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.empty-state<\/span> <span class=\"hljs-selector-tag\">h3<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.5rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.loading-overlay<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: absolute;\n            <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">bottom<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">0.9<\/span>);\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">justify-content<\/span>: center;\n            <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">2000<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: none;\n        }\n        \n        <span class=\"hljs-selector-class\">.spinner<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">50px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">5px<\/span> solid <span class=\"hljs-number\">#f3f3f3<\/span>;\n            <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">5px<\/span> solid <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n            <span class=\"hljs-attribute\">animation<\/span>: spin <span class=\"hljs-number\">1s<\/span> linear infinite;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-keyword\">@keyframes<\/span> spin {\n            0% { <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">0deg<\/span>); }\n            100% { <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">360deg<\/span>); }\n        }\n        \n        <span class=\"hljs-selector-class\">.optimization-badge<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--warning-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.8rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">1200px<\/span>) {\n            <span class=\"hljs-selector-class\">.app-main<\/span> {\n                <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr;\n            }\n            \n            <span class=\"hljs-selector-class\">.control-panel<\/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\">#e0e0e0<\/span>;\n            }\n            \n            <span class=\"hljs-selector-class\">.route-info<\/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\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n                <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">20px<\/span>;\n                <span class=\"hljs-attribute\">max-height<\/span>: none;\n            }\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n            <span class=\"hljs-selector-class\">.header-content<\/span> {\n                <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n                <span class=\"hljs-attribute\">text-align<\/span>: center;\n            }\n            \n            <span class=\"hljs-selector-class\">.header-actions<\/span> {\n                <span class=\"hljs-attribute\">justify-content<\/span>: center;\n                <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n            }\n            \n            <span class=\"hljs-selector-class\">.btn-group<\/span> {\n                <span class=\"hljs-attribute\">justify-content<\/span>: center;\n            }\n            \n            <span class=\"hljs-selector-class\">.map-container<\/span> {\n                <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            }\n            \n            <span class=\"hljs-selector-id\">#map<\/span> {\n                <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>;\n            }\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css2?family=Google+Sans:wght@400;500;600;700&amp;display=swap\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/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\">\"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\">\"app-header\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header-content\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header-title\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-route\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Advanced Multi-Location Route Planner<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>Plan, optimize, and visualize routes with multiple stops. Perfect for deliveries, road trips, and service routes.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header-actions\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"exportRouteBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-file-export\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Export Route\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"printRouteBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-secondary\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-print\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Print\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"app-main\"<\/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-panel\"<\/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\">\"panel-section\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section-title\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-map-pin\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Route Stops<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/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\">\"waypoint-list\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"waypointList\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-comment\">&lt;!-- Waypoints will be added here --&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"empty-state\"<\/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\">h3<\/span>&gt;<\/span>No stops added yet<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Add your first stop below to begin planning<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"input-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\">\"newStopInput\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-plus-circle\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Add New Stop<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\">class<\/span>=<span class=\"hljs-string\">\"address-input\"<\/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> \n                                   <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"newStopInput\"<\/span> \n                                   <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter address or search location...\"<\/span>\n                                   <span class=\"hljs-attr\">autocomplete<\/span>=<span class=\"hljs-string\">\"off\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"addStopBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"padding: 0 20px;\"<\/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-plus\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Add\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                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn-group\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"calculateRouteBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-success\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-calculator\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Calculate Route\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"optimizeRouteBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-warning\"<\/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-magic\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Optimize Route\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clearRouteBtn\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-danger\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-trash\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Clear All\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <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\">\"panel-section\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section-title\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-cogs\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Route Settings<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/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\">\"optimization-controls\"<\/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: 15px; color: var(--dark-text);\"<\/span>&gt;<\/span>Optimization Mode<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h4<\/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\">\"optimization-option\"<\/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\">\"radio\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"optFastest\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"optimization\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"fastest\"<\/span> <span class=\"hljs-attr\">checked<\/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\">\"optFastest\"<\/span>&gt;<\/span>\n                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Fastest Route<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/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\">\"font-size: 0.9rem; color: #5f6368; margin-top: 5px;\"<\/span>&gt;<\/span>\n                                    Minimizes travel time considering current traffic\n                                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/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\">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\">\"optimization-option\"<\/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\">\"radio\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"optShortest\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"optimization\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"shortest\"<\/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\">\"optShortest\"<\/span>&gt;<\/span>\n                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Shortest Distance<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/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\">\"font-size: 0.9rem; color: #5f6368; margin-top: 5px;\"<\/span>&gt;<\/span>\n                                    Minimizes total distance regardless of traffic\n                                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/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\">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\">\"optimization-option\"<\/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\">\"radio\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"optAvoidHighways\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"optimization\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"avoidHighways\"<\/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\">\"optAvoidHighways\"<\/span>&gt;<\/span>\n                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Avoid Highways<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/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\">\"font-size: 0.9rem; color: #5f6368; margin-top: 5px;\"<\/span>&gt;<\/span>\n                                    Prefers local roads and avoids highways\n                                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/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\">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\">\"optimization-option\"<\/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\">\"radio\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"optAvoidTolls\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"optimization\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"avoidTolls\"<\/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\">\"optAvoidTolls\"<\/span>&gt;<\/span>\n                                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Avoid Tolls<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/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\">\"font-size: 0.9rem; color: #5f6368; margin-top: 5px;\"<\/span>&gt;<\/span>\n                                    Routes around toll roads when possible\n                                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/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\">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\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 25px;\"<\/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: 15px; color: var(--dark-text);\"<\/span>&gt;<\/span>Travel Mode<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\">style<\/span>=<span class=\"hljs-string\">\"display: flex; gap: 10px; flex-wrap: wrap;\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"modeDriving\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">data-mode<\/span>=<span class=\"hljs-string\">\"DRIVING\"<\/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-car\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Driving\n                            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"modeWalking\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-secondary\"<\/span> <span class=\"hljs-attr\">data-mode<\/span>=<span class=\"hljs-string\">\"WALKING\"<\/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-walking\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Walking\n                            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"modeBicycling\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-secondary\"<\/span> <span class=\"hljs-attr\">data-mode<\/span>=<span class=\"hljs-string\">\"BICYCLING\"<\/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-bicycle\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Bicycling\n                            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"panel-section\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"section-title\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">i<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fas fa-history\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Recent Routes<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\">\"recentRoutes\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color: #5f6368; font-size: 0.95rem;\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>No recent routes saved. Routes will appear here after calculation.<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            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"route-info\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"routeInfo\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: none;\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom: 20px; color: var(--dark-text);\"<\/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-info-circle\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">i<\/span>&gt;<\/span> Route Summary\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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"route-summary\"<\/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\">\"summary-item\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-label\"<\/span>&gt;<\/span>Total Distance:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-value\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"totalDistance\"<\/span>&gt;<\/span>0 mi<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                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-item\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-label\"<\/span>&gt;<\/span>Total Duration:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-value\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"totalDuration\"<\/span>&gt;<\/span>0 min<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                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-item\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-label\"<\/span>&gt;<\/span>Number of Stops:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-value\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"stopCount\"<\/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\">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\">\"summary-item\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-label\"<\/span>&gt;<\/span>Fuel Estimate:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"summary-value\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"fuelEstimate\"<\/span>&gt;<\/span>0 gal<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                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h4<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: 25px 0 15px 0; color: var(--dark-text);\"<\/span>&gt;<\/span>Turn-by-Turn Directions<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\">\"directions-list\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"directionsList\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-comment\">&lt;!-- Directions will be added here --&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\">\"loading-overlay\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"loadingOverlay\"<\/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\">\"spinner\"<\/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\">h3<\/span>&gt;<\/span>Calculating optimal route...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color: #5f6368; margin-top: 10px;\"<\/span>&gt;<\/span>This may take a moment<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Load Google Maps API with required libraries --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;libraries=places,geometry&amp;callback=initMap\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-comment\">\/\/ Configuration<\/span>\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> directionsService;\n        <span class=\"hljs-keyword\">let<\/span> directionsRenderer;\n        <span class=\"hljs-keyword\">let<\/span> waypoints = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> travelMode = <span class=\"hljs-string\">'DRIVING'<\/span>;\n        <span class=\"hljs-keyword\">let<\/span> currentRoute = <span class=\"hljs-literal\">null<\/span>;\n        <span class=\"hljs-keyword\">let<\/span> autocomplete;\n        <span class=\"hljs-keyword\">let<\/span> dragStartIndex = <span class=\"hljs-literal\">null<\/span>;\n        \n        <span class=\"hljs-comment\">\/\/ Initialize the application<\/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 (USA)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> defaultCenter = { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">39.8283<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-98.5795<\/span> };\n            \n            <span class=\"hljs-comment\">\/\/ Initialize map<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"map\"<\/span>), {\n                <span class=\"hljs-attr\">center<\/span>: defaultCenter,\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">4<\/span>,\n                <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">fullscreenControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">mapTypeControlOptions<\/span>: {\n                    <span class=\"hljs-attr\">style<\/span>: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,\n                    <span class=\"hljs-attr\">position<\/span>: google.maps.ControlPosition.TOP_RIGHT\n                },\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"poi.business\"<\/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 Directions services<\/span>\n            directionsService = <span class=\"hljs-keyword\">new<\/span> google.maps.DirectionsService();\n            directionsRenderer = <span class=\"hljs-keyword\">new<\/span> google.maps.DirectionsRenderer({\n                <span class=\"hljs-attr\">map<\/span>: map,\n                <span class=\"hljs-attr\">suppressMarkers<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                <span class=\"hljs-attr\">preserveViewport<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                <span class=\"hljs-attr\">polylineOptions<\/span>: {\n                    <span class=\"hljs-attr\">strokeColor<\/span>: <span class=\"hljs-string\">'#1a73e8'<\/span>,\n                    <span class=\"hljs-attr\">strokeOpacity<\/span>: <span class=\"hljs-number\">0.8<\/span>,\n                    <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">6<\/span>\n                },\n                <span class=\"hljs-attr\">markerOptions<\/span>: {\n                    <span class=\"hljs-attr\">icon<\/span>: {\n                        <span class=\"hljs-attr\">path<\/span>: google.maps.SymbolPath.CIRCLE,\n                        <span class=\"hljs-attr\">fillColor<\/span>: <span class=\"hljs-string\">'#1a73e8'<\/span>,\n                        <span class=\"hljs-attr\">fillOpacity<\/span>: <span class=\"hljs-number\">1<\/span>,\n                        <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">2<\/span>,\n                        <span class=\"hljs-attr\">strokeColor<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n                        <span class=\"hljs-attr\">scale<\/span>: <span class=\"hljs-number\">8<\/span>\n                    }\n                }\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Initialize autocomplete for address input<\/span>\n            autocomplete = <span class=\"hljs-keyword\">new<\/span> google.maps.places.Autocomplete(\n                <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'newStopInput'<\/span>),\n                {\n                    <span class=\"hljs-attr\">types<\/span>: &#91;<span class=\"hljs-string\">'address'<\/span>],\n                    <span class=\"hljs-attr\">componentRestrictions<\/span>: { <span class=\"hljs-attr\">country<\/span>: <span class=\"hljs-string\">'us'<\/span> }\n                }\n            );\n            \n            <span class=\"hljs-comment\">\/\/ Setup event listeners<\/span>\n            setupEventListeners();\n            setupDragAndDrop();\n            \n            <span class=\"hljs-comment\">\/\/ Load sample stops for demonstration<\/span>\n            setTimeout(loadSampleStops, <span class=\"hljs-number\">1000<\/span>);\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupEventListeners<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Add stop button<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'addStopBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, addStopFromInput);\n            \n            <span class=\"hljs-comment\">\/\/ Enter key in input field<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'newStopInput'<\/span>).addEventListener(<span class=\"hljs-string\">'keypress'<\/span>, (e) =&gt; {\n                <span class=\"hljs-keyword\">if<\/span> (e.key === <span class=\"hljs-string\">'Enter'<\/span>) addStopFromInput();\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Route calculation buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'calculateRouteBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, calculateRoute);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'optimizeRouteBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, optimizeRoute);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'clearRouteBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, clearAllStops);\n            \n            <span class=\"hljs-comment\">\/\/ Export and print<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'exportRouteBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, exportRoute);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'printRouteBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, printRoute);\n            \n            <span class=\"hljs-comment\">\/\/ Travel mode buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'&#91;data-mode]'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">btn<\/span> =&gt;<\/span> {\n                btn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                    travelMode = <span class=\"hljs-keyword\">this<\/span>.getAttribute(<span class=\"hljs-string\">'data-mode'<\/span>);\n                    \n                    <span class=\"hljs-comment\">\/\/ Update button styles<\/span>\n                    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'&#91;data-mode]'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">b<\/span> =&gt;<\/span> {\n                        b.classList.remove(<span class=\"hljs-string\">'btn-primary'<\/span>);\n                        b.classList.add(<span class=\"hljs-string\">'btn-secondary'<\/span>);\n                    });\n                    \n                    <span class=\"hljs-keyword\">this<\/span>.classList.remove(<span class=\"hljs-string\">'btn-secondary'<\/span>);\n                    <span class=\"hljs-keyword\">this<\/span>.classList.add(<span class=\"hljs-string\">'btn-primary'<\/span>);\n                    \n                    <span class=\"hljs-comment\">\/\/ Recalculate route if we have one<\/span>\n                    <span class=\"hljs-keyword\">if<\/span> (waypoints.length &gt;= <span class=\"hljs-number\">2<\/span>) {\n                        calculateRoute();\n                    }\n                });\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Set initial active mode<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'modeDriving'<\/span>).classList.add(<span class=\"hljs-string\">'btn-primary'<\/span>);\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupDragAndDrop<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> waypointList = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'waypointList'<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Drag start<\/span>\n            waypointList.addEventListener(<span class=\"hljs-string\">'dragstart'<\/span>, (e) =&gt; {\n                <span class=\"hljs-keyword\">if<\/span> (e.target.classList.contains(<span class=\"hljs-string\">'waypoint-item'<\/span>)) {\n                    dragStartIndex = <span class=\"hljs-built_in\">Array<\/span>.from(waypointList.children).indexOf(e.target);\n                    e.target.classList.add(<span class=\"hljs-string\">'dragging'<\/span>);\n                    e.dataTransfer.effectAllowed = <span class=\"hljs-string\">'move'<\/span>;\n                }\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Drag over<\/span>\n            waypointList.addEventListener(<span class=\"hljs-string\">'dragover'<\/span>, (e) =&gt; {\n                e.preventDefault();\n                e.dataTransfer.dropEffect = <span class=\"hljs-string\">'move'<\/span>;\n                \n                <span class=\"hljs-keyword\">const<\/span> draggingItem = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.dragging'<\/span>);\n                <span class=\"hljs-keyword\">if<\/span> (!draggingItem) <span class=\"hljs-keyword\">return<\/span>;\n                \n                <span class=\"hljs-keyword\">const<\/span> siblings = &#91;...waypointList.querySelectorAll(<span class=\"hljs-string\">'.waypoint-item:not(.dragging)'<\/span>)];\n                <span class=\"hljs-keyword\">const<\/span> nextSibling = siblings.find(<span class=\"hljs-function\"><span class=\"hljs-params\">sibling<\/span> =&gt;<\/span> {\n                    <span class=\"hljs-keyword\">return<\/span> e.clientY &lt;= sibling.getBoundingClientRect().top + sibling.offsetHeight \/ <span class=\"hljs-number\">2<\/span>;\n                });\n                \n                waypointList.insertBefore(draggingItem, nextSibling);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Drag end<\/span>\n            waypointList.addEventListener(<span class=\"hljs-string\">'dragend'<\/span>, (e) =&gt; {\n                <span class=\"hljs-keyword\">const<\/span> draggingItem = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.dragging'<\/span>);\n                <span class=\"hljs-keyword\">if<\/span> (!draggingItem) <span class=\"hljs-keyword\">return<\/span>;\n                \n                draggingItem.classList.remove(<span class=\"hljs-string\">'dragging'<\/span>);\n                \n                <span class=\"hljs-keyword\">const<\/span> dragEndIndex = <span class=\"hljs-built_in\">Array<\/span>.from(waypointList.children).indexOf(draggingItem);\n                \n                <span class=\"hljs-keyword\">if<\/span> (dragStartIndex !== <span class=\"hljs-literal\">null<\/span> &amp;&amp; dragStartIndex !== dragEndIndex) {\n                    <span class=\"hljs-comment\">\/\/ Reorder waypoints array<\/span>\n                    <span class=\"hljs-keyword\">const<\/span> movedWaypoint = waypoints.splice(dragStartIndex, <span class=\"hljs-number\">1<\/span>)&#91;<span class=\"hljs-number\">0<\/span>];\n                    waypoints.splice(dragEndIndex, <span class=\"hljs-number\">0<\/span>, movedWaypoint);\n                    \n                    <span class=\"hljs-comment\">\/\/ Update waypoint numbers<\/span>\n                    updateWaypointList();\n                    \n                    <span class=\"hljs-comment\">\/\/ Recalculate route if we have enough stops<\/span>\n                    <span class=\"hljs-keyword\">if<\/span> (waypoints.length &gt;= <span class=\"hljs-number\">2<\/span>) {\n                        calculateRoute();\n                    }\n                }\n                \n                dragStartIndex = <span class=\"hljs-literal\">null<\/span>;\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addStopFromInput<\/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\">'newStopInput'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> address = input.value.trim();\n            \n            <span class=\"hljs-keyword\">if<\/span> (!address) {\n                alert(<span class=\"hljs-string\">'Please enter an address'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-comment\">\/\/ Use geocoding to get coordinates<\/span>\n            <span class=\"hljs-keyword\">const<\/span> geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n            \n            showLoading(<span class=\"hljs-literal\">true<\/span>);\n            \n            geocoder.geocode({ <span class=\"hljs-attr\">address<\/span>: address }, (results, status) =&gt; {\n                showLoading(<span class=\"hljs-literal\">false<\/span>);\n                \n                <span class=\"hljs-keyword\">if<\/span> (status === <span class=\"hljs-string\">'OK'<\/span>) {\n                    <span class=\"hljs-keyword\">const<\/span> location = results&#91;<span class=\"hljs-number\">0<\/span>].geometry.location;\n                    <span class=\"hljs-keyword\">const<\/span> formattedAddress = results&#91;<span class=\"hljs-number\">0<\/span>].formatted_address;\n                    \n                    addStop(location.lat(), location.lng(), formattedAddress);\n                    input.value = <span class=\"hljs-string\">''<\/span>;\n                    \n                    <span class=\"hljs-comment\">\/\/ If this is the second stop, automatically calculate route<\/span>\n                    <span class=\"hljs-keyword\">if<\/span> (waypoints.length === <span class=\"hljs-number\">2<\/span>) {\n                        setTimeout(calculateRoute, <span class=\"hljs-number\">500<\/span>);\n                    }\n                } <span class=\"hljs-keyword\">else<\/span> {\n                    alert(<span class=\"hljs-string\">'Could not find location. Please try a different address.'<\/span>);\n                }\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addStop<\/span>(<span class=\"hljs-params\">lat, lng, address<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> waypoint = {\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\">lat<\/span>: lat,\n                <span class=\"hljs-attr\">lng<\/span>: lng,\n                <span class=\"hljs-attr\">address<\/span>: address,\n                <span class=\"hljs-attr\">added<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n            };\n            \n            waypoints.push(waypoint);\n            updateWaypointList();\n            \n            <span class=\"hljs-comment\">\/\/ Center map on new stop if it's the first one<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length === <span class=\"hljs-number\">1<\/span>) {\n                map.setCenter({ <span class=\"hljs-attr\">lat<\/span>: lat, <span class=\"hljs-attr\">lng<\/span>: lng });\n                map.setZoom(<span class=\"hljs-number\">12<\/span>);\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateWaypointList<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> waypointList = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'waypointList'<\/span>);\n            \n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length === <span class=\"hljs-number\">0<\/span>) {\n                waypointList.innerHTML = <span class=\"hljs-string\">`\n                    &lt;div class=\"empty-state\"&gt;\n                        &lt;i class=\"fas fa-route\"&gt;&lt;\/i&gt;\n                        &lt;h3&gt;No stops added yet&lt;\/h3&gt;\n                        &lt;p&gt;Add your first stop below to begin planning&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            \n            waypoints.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">waypoint, index<\/span>) =&gt;<\/span> {\n                html += <span class=\"hljs-string\">`\n                    &lt;div class=\"waypoint-item\" draggable=\"true\"&gt;\n                        &lt;div class=\"waypoint-header\"&gt;\n                            &lt;div class=\"waypoint-number\"&gt;<span class=\"hljs-subst\">${index + <span class=\"hljs-number\">1<\/span>}<\/span>&lt;\/div&gt;\n                            &lt;div class=\"waypoint-actions\"&gt;\n                                &lt;button onclick=\"zoomToStop(<span class=\"hljs-subst\">${index}<\/span>)\" class=\"action-btn\" title=\"Zoom to stop\"&gt;\n                                    &lt;i class=\"fas fa-search-plus\"&gt;&lt;\/i&gt;\n                                &lt;\/button&gt;\n                                &lt;button onclick=\"removeStop(<span class=\"hljs-subst\">${index}<\/span>)\" class=\"action-btn\" title=\"Remove stop\"&gt;\n                                    &lt;i class=\"fas fa-times\"&gt;&lt;\/i&gt;\n                                &lt;\/button&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"waypoint-address\"&gt;<span class=\"hljs-subst\">${waypoint.address}<\/span>&lt;\/div&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n            });\n            \n            waypointList.innerHTML = html;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">zoomToStop<\/span>(<span class=\"hljs-params\">index<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (waypoints&#91;index]) {\n                map.setCenter({ <span class=\"hljs-attr\">lat<\/span>: waypoints&#91;index].lat, <span class=\"hljs-attr\">lng<\/span>: waypoints&#91;index].lng });\n                map.setZoom(<span class=\"hljs-number\">14<\/span>);\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">removeStop<\/span>(<span class=\"hljs-params\">index<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">'Remove this stop from the route?'<\/span>)) {\n                waypoints.splice(index, <span class=\"hljs-number\">1<\/span>);\n                updateWaypointList();\n                \n                <span class=\"hljs-comment\">\/\/ Recalculate route if we still have enough stops<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (waypoints.length &gt;= <span class=\"hljs-number\">2<\/span>) {\n                    calculateRoute();\n                } <span class=\"hljs-keyword\">else<\/span> {\n                    <span class=\"hljs-comment\">\/\/ Clear route display<\/span>\n                    directionsRenderer.setDirections({ <span class=\"hljs-attr\">routes<\/span>: &#91;] });\n                    <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'routeInfo'<\/span>).style.display = <span class=\"hljs-string\">'none'<\/span>;\n                }\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">calculateRoute<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length &lt; <span class=\"hljs-number\">2<\/span>) {\n                alert(<span class=\"hljs-string\">'Please add at least two stops to calculate a route.'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            showLoading(<span class=\"hljs-literal\">true<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Prepare request for Directions API<\/span>\n            <span class=\"hljs-keyword\">const<\/span> origin = waypoints&#91;<span class=\"hljs-number\">0<\/span>];\n            <span class=\"hljs-keyword\">const<\/span> destination = waypoints&#91;waypoints.length - <span class=\"hljs-number\">1<\/span>];\n            <span class=\"hljs-keyword\">const<\/span> middleWaypoints = waypoints.slice(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">-1<\/span>).map(<span class=\"hljs-function\"><span class=\"hljs-params\">wp<\/span> =&gt;<\/span> ({\n                <span class=\"hljs-attr\">location<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(wp.lat, wp.lng),\n                <span class=\"hljs-attr\">stopover<\/span>: <span class=\"hljs-literal\">true<\/span>\n            }));\n            \n            <span class=\"hljs-comment\">\/\/ Get optimization mode<\/span>\n            <span class=\"hljs-keyword\">const<\/span> optimization = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'input&#91;name=\"optimization\"]:checked'<\/span>).value;\n            \n            <span class=\"hljs-comment\">\/\/ Build request with optimization options<\/span>\n            <span class=\"hljs-keyword\">const<\/span> request = {\n                <span class=\"hljs-attr\">origin<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(origin.lat, origin.lng),\n                <span class=\"hljs-attr\">destination<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.LatLng(destination.lat, destination.lng),\n                <span class=\"hljs-attr\">waypoints<\/span>: middleWaypoints,\n                <span class=\"hljs-attr\">travelMode<\/span>: google.maps.TravelMode&#91;travelMode],\n                <span class=\"hljs-attr\">optimizeWaypoints<\/span>: (optimization === <span class=\"hljs-string\">'fastest'<\/span>),\n                <span class=\"hljs-attr\">provideRouteAlternatives<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                <span class=\"hljs-attr\">avoidHighways<\/span>: (optimization === <span class=\"hljs-string\">'avoidHighways'<\/span>),\n                <span class=\"hljs-attr\">avoidTolls<\/span>: (optimization === <span class=\"hljs-string\">'avoidTolls'<\/span>),\n                <span class=\"hljs-attr\">unitSystem<\/span>: google.maps.UnitSystem.IMPERIAL\n            };\n            \n            <span class=\"hljs-comment\">\/\/ Make API call<\/span>\n            directionsService.route(request, (result, status) =&gt; {\n                showLoading(<span class=\"hljs-literal\">false<\/span>);\n                \n                <span class=\"hljs-keyword\">if<\/span> (status === <span class=\"hljs-string\">'OK'<\/span>) {\n                    directionsRenderer.setDirections(result);\n                    currentRoute = result.routes&#91;<span class=\"hljs-number\">0<\/span>];\n                    displayRouteInfo(result.routes&#91;<span class=\"hljs-number\">0<\/span>]);\n                    saveToRecentRoutes();\n                } <span class=\"hljs-keyword\">else<\/span> {\n                    alert(<span class=\"hljs-string\">'Could not calculate route. Error: '<\/span> + status);\n                }\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">optimizeRoute<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length &lt; <span class=\"hljs-number\">3<\/span>) {\n                alert(<span class=\"hljs-string\">'Optimization requires at least 3 stops.'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            showLoading(<span class=\"hljs-literal\">true<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ For true optimization, we'd use the Distance Matrix API and TSP algorithms<\/span>\n            <span class=\"hljs-comment\">\/\/ This is a simplified version that reorders stops based on proximity<\/span>\n            \n            <span class=\"hljs-comment\">\/\/ Extract middle waypoints (excluding first and last)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> middlePoints = waypoints.slice(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">-1<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> optimizedMiddle = &#91;];\n            \n            <span class=\"hljs-comment\">\/\/ Simple nearest neighbor algorithm<\/span>\n            <span class=\"hljs-keyword\">let<\/span> currentPoint = waypoints&#91;<span class=\"hljs-number\">0<\/span>];\n            <span class=\"hljs-keyword\">let<\/span> remainingPoints = &#91;...middlePoints];\n            \n            <span class=\"hljs-keyword\">while<\/span> (remainingPoints.length &gt; <span class=\"hljs-number\">0<\/span>) {\n                <span class=\"hljs-comment\">\/\/ Find closest point to current point<\/span>\n                <span class=\"hljs-keyword\">let<\/span> closestIndex = <span class=\"hljs-number\">0<\/span>;\n                <span class=\"hljs-keyword\">let<\/span> closestDistance = <span class=\"hljs-built_in\">Number<\/span>.MAX_VALUE;\n                \n                remainingPoints.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">point, index<\/span>) =&gt;<\/span> {\n                    <span class=\"hljs-keyword\">const<\/span> distance = calculateDistance(\n                        currentPoint.lat, currentPoint.lng,\n                        point.lat, point.lng\n                    );\n                    \n                    <span class=\"hljs-keyword\">if<\/span> (distance &lt; closestDistance) {\n                        closestDistance = distance;\n                        closestIndex = index;\n                    }\n                });\n                \n                <span class=\"hljs-comment\">\/\/ Add closest point to optimized route<\/span>\n                optimizedMiddle.push(remainingPoints&#91;closestIndex]);\n                currentPoint = remainingPoints&#91;closestIndex];\n                remainingPoints.splice(closestIndex, <span class=\"hljs-number\">1<\/span>);\n            }\n            \n            <span class=\"hljs-comment\">\/\/ Reconstruct waypoints array<\/span>\n            <span class=\"hljs-keyword\">const<\/span> optimizedWaypoints = &#91;\n                waypoints&#91;<span class=\"hljs-number\">0<\/span>],\n                ...optimizedMiddle,\n                waypoints&#91;waypoints.length - <span class=\"hljs-number\">1<\/span>]\n            ];\n            \n            waypoints = optimizedWaypoints;\n            updateWaypointList();\n            \n            <span class=\"hljs-comment\">\/\/ Show optimization badge<\/span>\n            <span class=\"hljs-keyword\">const<\/span> optimizeBtn = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'optimizeRouteBtn'<\/span>);\n            optimizeBtn.innerHTML = <span class=\"hljs-string\">'&lt;i class=\"fas fa-check\"&gt;&lt;\/i&gt; Optimized!'<\/span>;\n            optimizeBtn.classList.remove(<span class=\"hljs-string\">'btn-warning'<\/span>);\n            optimizeBtn.classList.add(<span class=\"hljs-string\">'btn-success'<\/span>);\n            \n            setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                optimizeBtn.innerHTML = <span class=\"hljs-string\">'&lt;i class=\"fas fa-magic\"&gt;&lt;\/i&gt; Optimize Route'<\/span>;\n                optimizeBtn.classList.remove(<span class=\"hljs-string\">'btn-success'<\/span>);\n                optimizeBtn.classList.add(<span class=\"hljs-string\">'btn-warning'<\/span>);\n            }, <span class=\"hljs-number\">3000<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Recalculate route with optimized waypoints<\/span>\n            calculateRoute();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">displayRouteInfo<\/span>(<span class=\"hljs-params\">route<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> legs = route.legs;\n            <span class=\"hljs-keyword\">let<\/span> totalDistance = <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-keyword\">let<\/span> totalDuration = <span class=\"hljs-number\">0<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Calculate totals<\/span>\n            legs.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">leg<\/span> =&gt;<\/span> {\n                totalDistance += leg.distance.value; <span class=\"hljs-comment\">\/\/ in meters<\/span>\n                totalDuration += leg.duration.value; <span class=\"hljs-comment\">\/\/ in seconds<\/span>\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Convert distance to miles<\/span>\n            <span class=\"hljs-keyword\">const<\/span> distanceMiles = (totalDistance \/ <span class=\"hljs-number\">1609.34<\/span>).toFixed(<span class=\"hljs-number\">1<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Convert duration to hours\/minutes<\/span>\n            <span class=\"hljs-keyword\">const<\/span> hours = <span class=\"hljs-built_in\">Math<\/span>.floor(totalDuration \/ <span class=\"hljs-number\">3600<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> minutes = <span class=\"hljs-built_in\">Math<\/span>.floor((totalDuration % <span class=\"hljs-number\">3600<\/span>) \/ <span class=\"hljs-number\">60<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Calculate fuel estimate (assuming 25 MPG)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> fuelGallons = (distanceMiles \/ <span class=\"hljs-number\">25<\/span>).toFixed(<span class=\"hljs-number\">1<\/span>);\n            \n            <span class=\"hljs-comment\">\/\/ Update summary<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalDistance'<\/span>).textContent = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${distanceMiles}<\/span> mi`<\/span>;\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalDuration'<\/span>).textContent = hours &gt; <span class=\"hljs-number\">0<\/span> \n                ? <span class=\"hljs-string\">`<span class=\"hljs-subst\">${hours}<\/span>h <span class=\"hljs-subst\">${minutes}<\/span>m`<\/span> \n                : <span class=\"hljs-string\">`<span class=\"hljs-subst\">${minutes}<\/span> min`<\/span>;\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'stopCount'<\/span>).textContent = waypoints.length;\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'fuelEstimate'<\/span>).textContent = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${fuelGallons}<\/span> gal`<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Build directions list<\/span>\n            <span class=\"hljs-keyword\">let<\/span> directionsHtml = <span class=\"hljs-string\">''<\/span>;\n            <span class=\"hljs-keyword\">let<\/span> stepNumber = <span class=\"hljs-number\">1<\/span>;\n            \n            legs.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">leg, legIndex<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-comment\">\/\/ Add start of leg<\/span>\n                directionsHtml += <span class=\"hljs-string\">`\n                    &lt;div class=\"direction-step\"&gt;\n                        &lt;i class=\"fas fa-flag-checkered direction-icon\"&gt;&lt;\/i&gt;\n                        &lt;strong&gt;Start: <span class=\"hljs-subst\">${leg.start_address}<\/span>&lt;\/strong&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n                \n                <span class=\"hljs-comment\">\/\/ Add steps<\/span>\n                leg.steps.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">step<\/span> =&gt;<\/span> {\n                    <span class=\"hljs-keyword\">const<\/span> instruction = step.instructions.replace(<span class=\"hljs-regexp\">\/&lt;&#91;^&gt;]*&gt;\/g<\/span>, <span class=\"hljs-string\">''<\/span>);\n                    directionsHtml += <span class=\"hljs-string\">`\n                        &lt;div class=\"direction-step\"&gt;\n                            &lt;i class=\"fas fa-arrow-right direction-icon\"&gt;&lt;\/i&gt;\n                            &lt;span&gt;<span class=\"hljs-subst\">${stepNumber}<\/span>. <span class=\"hljs-subst\">${instruction}<\/span>&lt;\/span&gt;\n                        &lt;\/div&gt;\n                    `<\/span>;\n                    stepNumber++;\n                });\n                \n                <span class=\"hljs-comment\">\/\/ Add end of leg (unless it's the last leg)<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (legIndex &lt; legs.length - <span class=\"hljs-number\">1<\/span>) {\n                    directionsHtml += <span class=\"hljs-string\">`\n                        &lt;div class=\"direction-step\"&gt;\n                            &lt;i class=\"fas fa-map-marker-alt direction-icon\"&gt;&lt;\/i&gt;\n                            &lt;strong&gt;Arrive at: <span class=\"hljs-subst\">${leg.end_address}<\/span>&lt;\/strong&gt;\n                        &lt;\/div&gt;\n                    `<\/span>;\n                }\n            });\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'directionsList'<\/span>).innerHTML = directionsHtml;\n            \n            <span class=\"hljs-comment\">\/\/ Show route info panel<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'routeInfo'<\/span>).style.display = <span class=\"hljs-string\">'block'<\/span>;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearAllStops<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length === <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">`Clear all <span class=\"hljs-subst\">${waypoints.length}<\/span> stops?`<\/span>)) {\n                waypoints = &#91;];\n                updateWaypointList();\n                directionsRenderer.setDirections({ <span class=\"hljs-attr\">routes<\/span>: &#91;] });\n                <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'routeInfo'<\/span>).style.display = <span class=\"hljs-string\">'none'<\/span>;\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">exportRoute<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (!currentRoute) {\n                alert(<span class=\"hljs-string\">'No route to export. Calculate a route first.'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">const<\/span> exportData = {\n                <span class=\"hljs-attr\">waypoints<\/span>: waypoints.map(<span class=\"hljs-function\">(<span class=\"hljs-params\">wp, index<\/span>) =&gt;<\/span> ({\n                    <span class=\"hljs-attr\">stopNumber<\/span>: index + <span class=\"hljs-number\">1<\/span>,\n                    <span class=\"hljs-attr\">address<\/span>: wp.address,\n                    <span class=\"hljs-attr\">latitude<\/span>: wp.lat,\n                    <span class=\"hljs-attr\">longitude<\/span>: wp.lng\n                })),\n                <span class=\"hljs-attr\">routeSummary<\/span>: {\n                    <span class=\"hljs-attr\">totalDistance<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalDistance'<\/span>).textContent,\n                    <span class=\"hljs-attr\">totalDuration<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalDuration'<\/span>).textContent,\n                    <span class=\"hljs-attr\">numberOfStops<\/span>: waypoints.length,\n                    <span class=\"hljs-attr\">travelMode<\/span>: travelMode,\n                    <span class=\"hljs-attr\">calculatedAt<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n                },\n                <span class=\"hljs-attr\">directions<\/span>: currentRoute.legs.flatMap(<span class=\"hljs-function\"><span class=\"hljs-params\">leg<\/span> =&gt;<\/span> \n                    leg.steps.map(<span class=\"hljs-function\"><span class=\"hljs-params\">step<\/span> =&gt;<\/span> ({\n                        <span class=\"hljs-attr\">instruction<\/span>: step.instructions.replace(<span class=\"hljs-regexp\">\/&lt;&#91;^&gt;]*&gt;\/g<\/span>, <span class=\"hljs-string\">''<\/span>),\n                        <span class=\"hljs-attr\">distance<\/span>: step.distance.text,\n                        <span class=\"hljs-attr\">duration<\/span>: step.duration.text\n                    }))\n                )\n            };\n            \n            <span class=\"hljs-keyword\">const<\/span> dataStr = <span class=\"hljs-built_in\">JSON<\/span>.stringify(exportData, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-number\">2<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> dataUri = <span class=\"hljs-string\">'data:application\/json;charset=utf-8,'<\/span> + <span class=\"hljs-built_in\">encodeURIComponent<\/span>(dataStr);\n            \n            <span class=\"hljs-keyword\">const<\/span> linkElement = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'a'<\/span>);\n            linkElement.setAttribute(<span class=\"hljs-string\">'href'<\/span>, dataUri);\n            linkElement.setAttribute(<span class=\"hljs-string\">'download'<\/span>, <span class=\"hljs-string\">`route-<span class=\"hljs-subst\">${<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString().slice(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">10<\/span>)}<\/span>.json`<\/span>);\n            <span class=\"hljs-built_in\">document<\/span>.body.appendChild(linkElement);\n            linkElement.click();\n            <span class=\"hljs-built_in\">document<\/span>.body.removeChild(linkElement);\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">printRoute<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-built_in\">window<\/span>.print();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveToRecentRoutes<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> recentRoutes = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'recentRoutes'<\/span>);\n            \n            <span class=\"hljs-keyword\">const<\/span> routeInfo = {\n                <span class=\"hljs-attr\">date<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toLocaleString(),\n                <span class=\"hljs-attr\">stops<\/span>: waypoints.length,\n                <span class=\"hljs-attr\">distance<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalDistance'<\/span>).textContent,\n                <span class=\"hljs-attr\">duration<\/span>: <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalDuration'<\/span>).textContent\n            };\n            \n            <span class=\"hljs-keyword\">const<\/span> routeHtml = <span class=\"hljs-string\">`\n                &lt;div style=\"background: white; padding: 12px; border-radius: 8px; margin-bottom: 10px; border-left: 4px solid var(--primary-color);\"&gt;\n                    &lt;div style=\"font-weight: 600; margin-bottom: 5px;\"&gt;Route from <span class=\"hljs-subst\">${waypoints&#91;<span class=\"hljs-number\">0<\/span>].address.split(<span class=\"hljs-string\">','<\/span>)&#91;<span class=\"hljs-number\">0<\/span>]}<\/span> to <span class=\"hljs-subst\">${waypoints&#91;waypoints.length<span class=\"hljs-number\">-1<\/span>].address.split(<span class=\"hljs-string\">','<\/span>)&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>&lt;\/div&gt;\n                    &lt;div style=\"display: flex; justify-content: space-between; font-size: 0.85rem; color: #5f6368;\"&gt;\n                        &lt;span&gt;<span class=\"hljs-subst\">${routeInfo.stops}<\/span> stops&lt;\/span&gt;\n                        &lt;span&gt;<span class=\"hljs-subst\">${routeInfo.distance}<\/span>&lt;\/span&gt;\n                        &lt;span&gt;<span class=\"hljs-subst\">${routeInfo.duration}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"font-size: 0.8rem; color: #9aa0a6; margin-top: 5px;\"&gt;<span class=\"hljs-subst\">${routeInfo.date}<\/span>&lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Add to beginning of list<\/span>\n            recentRoutes.innerHTML = routeHtml + recentRoutes.innerHTML;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showLoading<\/span>(<span class=\"hljs-params\">show<\/span>) <\/span>{\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'loadingOverlay'<\/span>).style.display = show ? <span class=\"hljs-string\">'flex'<\/span> : <span class=\"hljs-string\">'none'<\/span>;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">calculateDistance<\/span>(<span class=\"hljs-params\">lat1, lon1, lat2, lon2<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> R = <span class=\"hljs-number\">6371<\/span>; <span class=\"hljs-comment\">\/\/ Earth's radius in km<\/span>\n            <span class=\"hljs-keyword\">const<\/span> dLat = (lat2 - lat1) * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> dLon = (lon2 - lon1) * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> a = \n                <span class=\"hljs-built_in\">Math<\/span>.sin(dLat\/<span class=\"hljs-number\">2<\/span>) * <span class=\"hljs-built_in\">Math<\/span>.sin(dLat\/<span class=\"hljs-number\">2<\/span>) +\n                <span class=\"hljs-built_in\">Math<\/span>.cos(lat1 * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>) * <span class=\"hljs-built_in\">Math<\/span>.cos(lat2 * <span class=\"hljs-built_in\">Math<\/span>.PI \/ <span class=\"hljs-number\">180<\/span>) * \n                <span class=\"hljs-built_in\">Math<\/span>.sin(dLon\/<span class=\"hljs-number\">2<\/span>) * <span class=\"hljs-built_in\">Math<\/span>.sin(dLon\/<span class=\"hljs-number\">2<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> c = <span class=\"hljs-number\">2<\/span> * <span class=\"hljs-built_in\">Math<\/span>.atan2(<span class=\"hljs-built_in\">Math<\/span>.sqrt(a), <span class=\"hljs-built_in\">Math<\/span>.sqrt(<span class=\"hljs-number\">1<\/span>-a));\n            <span class=\"hljs-keyword\">return<\/span> R * c; <span class=\"hljs-comment\">\/\/ Distance in km<\/span>\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadSampleStops<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length &gt; <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> sampleStops = &#91;\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span>, <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"New York, NY, USA\"<\/span> },\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">39.9526<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-75.1652<\/span>, <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"Philadelphia, PA, USA\"<\/span> },\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">38.9072<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-77.0369<\/span>, <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"Washington, DC, USA\"<\/span> },\n                { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">39.2904<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-76.6122<\/span>, <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"Baltimore, MD, USA\"<\/span> }\n            ];\n            \n            sampleStops.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">stop, index<\/span>) =&gt;<\/span> {\n                setTimeout(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                    addStop(stop.lat, stop.lng, stop.address);\n                    \n                    <span class=\"hljs-comment\">\/\/ Auto-calculate after adding all stops<\/span>\n                    <span class=\"hljs-keyword\">if<\/span> (index === sampleStops.length - <span class=\"hljs-number\">1<\/span>) {\n                        setTimeout(calculateRoute, <span class=\"hljs-number\">1000<\/span>);\n                    }\n                }, index * <span class=\"hljs-number\">300<\/span>);\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Make functions available globally<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.zoomToStop = zoomToStop;\n        <span class=\"hljs-built_in\">window<\/span>.removeStop = removeStop;\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\">Step 4: Deploy and Use Your Route Planner<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Replace API Key: <\/strong>Change `<strong>YOUR_API_KEY_HERE<\/strong>` to your actual Google Maps API key<\/li>\n\n\n\n<li><strong>2. Test Locally:<\/strong> Open in browser and test with sample stops<\/li>\n\n\n\n<li><strong>3. Deploy to Server: <\/strong>Upload to your web hosting environment<\/li>\n\n\n\n<li><strong>4. Share with Team:<\/strong> Provide access to colleagues or embed in internal tools<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Hidden Costs and Complexities<\/strong><\/p>\n\n\n\n<p>While this custom solution is powerful, it comes with significant challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Multiple API Costs:<\/strong> Directions API and Distance Matrix API incur separate charges per request<\/li>\n\n\n\n<li><strong>2. Complex Optimization:<\/strong> True route optimization requires advanced algorithms (Traveling Salesman Problem)<\/li>\n\n\n\n<li><strong>3. Rate Limiting: <\/strong>Google imposes strict limits on API calls (50 requests per second)<\/li>\n\n\n\n<li><strong>4. No Real Traffic Integration<\/strong>: Advanced traffic-aware routing requires additional APIs<\/li>\n\n\n\n<li><strong>5. No Historical Data<\/strong> Can&#8217;t analyze past routes or performance<\/li>\n\n\n\n<li><strong>6. No Multi-Day Planning:<\/strong> Can&#8217;t schedule routes across multiple days<\/li>\n\n\n\n<li><strong>7. No Driver Management: <\/strong>No way to assign routes to specific drivers or vehicles<\/li>\n\n\n\n<li><strong>8. Mobile Limitations: <\/strong>Complex interface doesn&#8217;t work well for field staff<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional Alternative: MapsFun.com<\/strong><\/p>\n\n\n\n<p>Why spend weeks building and maintaining a route planner when you can have an enterprise solution instantly?<\/p>\n\n\n<p><iframe src=\"https:\/\/panel.mapsfun.com\/embed-map?code=668ecbcced7931f89205d1e881bb82aa&#038;lang=uk&#038;tpl=photo\" width=\"100%\" height=\"600\" style=\"border:0\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe><\/p>\n\n\n\n<p>&nbsp;<a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> provides complete route planning and optimization without any coding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 True Route Optimization &#8211; Advanced algorithms for optimal stop sequencing\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Multi-Day Planning &#8211; Schedule routes across days with driver assignments\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Real Traffic Integration &#8211; Live traffic-aware routing\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Unlimited Waypoints &#8211; Plan routes with hundreds of stops\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Driver Mobile App &#8211; Turn-by-turn navigation for field staff\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Proof of Delivery &#8211; Digital signatures and photo capture\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Analytics Dashboard- Track performance and efficiency metrics\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 Team Collaboration- Multiple planners can work simultaneously\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>With MapsFun.com, here&#8217;s the complete workflow:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Import addresses from CSV or spreadsheet<\/li>\n\n\n\n<li>2. Set constraints (time windows, driver schedules, vehicle capacities)<\/li>\n\n\n\n<li>3. Click &#8220;Optimize&#8221; &#8211; AI calculates the most efficient routes<\/li>\n\n\n\n<li>4. Dispatch to drivers via mobile app<\/li>\n\n\n\n<li>5. Track in real-time and analyze performance<\/li>\n<\/ul>\n\n\n\n<p>The custom Google Maps solution works for simple A-to-B-to-C routing, but for <strong>delivery companies, field service businesses, sales teams, or anyone needing true multi-location route optimization<\/strong>, it&#8217;s insufficient and requires months of additional development.<\/p>\n\n\n\n<p>Stop building route planners and start using professional ones. Plan, optimize, and execute multi-location routes in minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> &#8211; the complete route optimization platform.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map Route to Multiple Locations: The Technical Guide Need to plan delivery routes, road trips, or multi-stop journeys? While Google Maps handles simple A-to-B routes, creating optimized routes with multiple stops requires programming. Here&#8217;s the developer method for building custom multi-location route planners. Method 1: Custom Google Maps Routes with Optimization [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[119,1],"tags":[],"class_list":["post-850","post","type-post","status-publish","format-standard","hentry","category-map-route-to-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/850","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=850"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/850\/revisions"}],"predecessor-version":[{"id":853,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/850\/revisions\/853"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}