1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <!-- Character Encoding and Viewport --> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <!-- Primary SEO Meta Tags --> 9 <title>DC Metro Station Destinations - Hotels, Restaurants, Bars & Amenities | MetroMatch</title> 10 <meta name="description" content="Explore what's near every DC Metro station. Find hotels, restaurants, bars, coffee shops, pharmacies, and supermarkets within walking distance of Washington Metro stations. Your guide to car-free DC neighborhoods."> 11 <meta name="keywords" content="DC Metro stations, Metro accessible hotels, restaurants near Metro, DC station amenities, Metro station guide, Washington Metro destinations, car-free DC neighborhoods, Metro station directory"> 12 13 <!-- Canonical URL --> 14 <link rel="canonical" href="https://metromatchapp.com/destinations"> 15 16 <!-- Geographic Meta Tags for Local SEO --> 17 <meta name="geo.region" content="US-DC"> 18 <meta name="geo.placename" content="Washington, District of Columbia"> 19 <meta name="geo.position" content="38.9072;-77.0369"> 20 21 <!-- Open Graph Tags for Social Media --> 22 <meta property="og:title" content="DC Metro Station Destinations Guide | MetroMatch"> 23 <meta property="og:description" content="Discover hotels, restaurants, bars, and amenities near every DC Metro station. Plan your car-free outing in Washington."> 24 <meta property="og:type" content="website"> 25 <meta property="og:url" content="https://metromatchapp.com/destinations"> 26 <meta property="og:image" content="https://metromatchapp.com/static/images/metromatch-preview.jpg"> 27 <meta property="og:image:width" content="1200"> 28 <meta property="og:image:height" content="630"> 29 <meta property="og:image:type" content="image/jpeg"> 30 <meta property="og:image:alt" content="MetroMatch DC Metro destinations guide"> 31 <meta property="og:locale" content="en_US"> 32 <meta property="og:site_name" content="MetroMatch"> 33 34 <!-- Twitter Card Tags --> 35 <meta name="twitter:card" content="summary_large_image"> 36 <meta name="twitter:title" content="DC Metro Station Destinations Guide | MetroMatch"> 37 <meta name="twitter:description" content="Discover hotels, restaurants, bars, and amenities near every DC Metro station."> 38 <meta name="twitter:image" content="https://metromatchapp.com/static/images/metromatch-preview.jpg"> 39 40 <!-- Favicon --> 41 <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> 42 43 <!-- Structured Data (JSON-LD) for Search Engines --> 44
44<script type="application/ld+json"> 45 { 46 "@context": "https://schema.org", 47 "@type": "ItemList", 48 "name": "DC Metro Station Destinations", 49 "description": "Complete directory of Washington DC Metro stations with nearby hotels, restaurants, bars, and amenities", 50 "url": "https://metromatchapp.com/destinations", 51 "numberOfItems": "125", 52 "itemListElement": [ 53 { 54 "@type": "ListItem", 55 "position": 1, 56 "item": { 57 "@type": "Place", 58 "name": "DC Metro Stations", 59 "description": "Comprehensive guide to destinations accessible via Washington Metro" 60 } 61 } 62 ], 63 "provider": { 64 "@type": "WebApplication", 65 "name": "MetroMatch", 66 "url": "https://metromatchapp.com" 67 } 68 } 69 </script>
69 70 71 <!-- Breadcrumb Structured Data --> 72
72<script type="application/ld+json"> 73 { 74 "@context": "https://schema.org", 75 "@type": "BreadcrumbList", 76 "itemListElement": [ 77 { 78 "@type": "ListItem", 79 "position": 1, 80 "name": "Home", 81 "item": "https://metromatchapp.com" 82 }, 83 { 84 "@type": "ListItem", 85 "position": 2, 86 "name": "Destinations", 87 "item": "https://metromatchapp.com/destinations" 88 } 89 ] 90 } 91 </script>
91 92 93 <!-- NOTE: Review this script - consider moving to end of body for better performance --> 94 <!-- ALSO: This script is duplicated twice (lines 4-11 and 12-19 in original) - remove one --> 95
95<script data-noptimize="1" data-cfasync="false" data-wpfc-render="false"> 96 (function () { 97 var script = document.createElement("script"); 98 script.async = 1; 99 script.src = 'https://mn-tz.com/NDIzMjM2.js?t=423236'; 100 document.head.appendChild(script); 101 })(); 102 </script>
102 103 104 <!-- Link to your custom CSS --> 105 <link rel="stylesheet" href="/static/css/styles.css"> 106 107 <!-- FontAwesome CSS for icons --> 108 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> 109 110 <!-- Load Leaflet JS only if map exists --> 111
111<script> 112 // Check if the map container exists and load map.js only if it does 113 window.addEventListener('load', function() { 114 const mapContainer = document.getElementById('map'); 115 if (mapContainer) { 116 const script = document.createElement('script'); 117 script.src = "/static/js/map.js"; 118 document.head.appendChild(script); 119 console.log('map.js loaded successfully for map page.'); 120 } 121 }); 122 </script>
122 123 124 <!-- Inline CSS Styles for Additional Styling --> 125 <style> 126 /* Your existing styles continue here... */ 127 </style> 128</head> 129 <!-- Inline CSS Styles for Additional Styling --> 130 <style> 131 132 /* Search Container Styles */ 133 .search-container { 134 max-width: 800px; 135 margin: 80px auto 20px auto; /* Adjust top margin to account for navbar */ 136 display: flex; 137 gap: 10px; 138 justify-content: center; 139 align-items: center; 140 } 141 .search-container input, 142 .search-container select, 143 .search-container button { 144 padding: 8px; 145 font-size: 16px; 146 border: 1px solid #ccc; 147 border-radius: 4px; 148 } 149 #clear-search { 150 background-color: #f44336; 151 color: white; 152 border: none; 153 cursor: pointer; 154 } 155 #clear-search:hover { 156 background-color: #d32f2f; 157 } 158 /* Line Circle Styles */ 159 .line-circle { 160 display: inline-block; 161 width: 12px; 162 height: 12px; 163 border-radius: 50%; 164 margin-right: 2px; 165 border: 1px solid #000; /* Optional border for better visibility */ 166 } 167 /* Station Header Styles */ 168 .station-header { 169 cursor: pointer; 170 display: flex; 171 align-items: center; 172 padding: 10px; 173 background-color: #f9f9f9; 174 border: 1px solid #ddd; 175 border-radius: 4px; 176 transition: background-color 0.3s; 177 justify-content: space-between; 178 } 179 .station-header .toggle-icon { 180 transition: transform 0.3s; 181 user-select: none; /* Prevents text selection of the + symbol */ 182 } 183 184 .station-header:hover { 185 background-color: #f1f1f1; 186 } 187 .station-header span.line-circle { 188 margin-right: 10px; 189 } 190 /* Station List Styles */ 191 .station-list { 192 list-style-type: none; 193 padding: 0; 194 max-width: 800px; 195 margin: 20px auto; 196 } 197 .station-item { 198 margin-bottom: 15px; 199 } 200 /* Amenities List Styles */ 201 .amenities-list { 202 list-style-type: none; 203 padding-left: 30px; 204 margin-top: 10px; 205 display: none; /* Hidden by default */ 206 } 207 .amenities-list li { 208 margin-bottom: 8px; 209 } 210 211 /* Category Header Styles */ 212 .category-header { 213 cursor: pointer; 214 padding: 8px 12px; 215 background-color: #e8f4f8; 216 border: 1px solid #b3d9e8; 217 border-radius: 4px; 218 margin: 5px 0; 219 display: flex; 220 align-items: center; 221 justify-content: space-between; 222 transition: background-color 0.3s; 223 font-weight: bold; 224 } 225 .category-header:hover { 226 background-color: #d1ecf1; 227 } 228 .category-header .toggle-icon { 229 font-size: 12px; 230 transition: transform 0.3s; 231 } 232 .category-header.expanded .toggle-icon { 233 transform: rotate(90deg); 234 } 235 236 /* Category Content Styles */ 237 .category-content { 238 display: none; 239 padding-left: 20px; 240 margin-bottom: 10px; 241 } 242 .category-content ul { 243 list-style-type: none; 244 padding: 0; 245 margin: 5px 0; 246 } 247 .category-content li { 248 margin-bottom: 6px; 249 padding: 4px 0; 250 } 251 252 /* Category Count Badge */ 253 .category-count { 254 background-color: #007bff; 255 color: white; 256 border-radius: 12px; 257 padding: 2px 8px; 258 font-size: 12px; 259 font-weight: normal; 260 margin-left: 8px; 261 } 262 263 /* Loading and Error Messages */ 264 .loading, .error { 265 font-style: italic; 266 color: #555; 267 } 268 /* Highlight Matching Stations */ 269 .station-item.match {
270 background-color: #e0f7fa; /* Light cyan background */ 271 transition: background-color 0.3s; 272 } 273 274 /* Footer Styles - Added to match other pages */ 275 .about-footer { 276 text-align: center; 277 padding: 15px 20px; 278 background-color: #f8f9fa; 279 } 280 281 .footer-content { 282 max-width: 1200px; 283 margin: 0 auto; 284 } 285 286 /* Button Row */ 287 .footer-buttons { 288 display: flex; 289 justify-content: center; 290 align-items: center; 291 gap: 20px; 292 margin-bottom: 15px; 293 flex-wrap: wrap; 294 } 295 296 .footer-button img { 297 height: 45px; 298 width: auto; 299 max-width: 150px; 300 min-width: 100px; 301 object-fit: contain; /* Add this line */ 302 303 } 304 305 /* Footer Info */ 306 .footer-info { 307 margin: 0; 308 } 309 310 .footer-info p { 311 margin: 0; 312 font-size: 0.9rem; 313 color: #666; 314 } 315 316 /* Ensure images have good contrast */ 317 .footer-button img { 318 background-color: transparent; 319 border-radius: 4px; 320 filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1)); 321 } 322 323 /* Mobile Responsive - Footer */ 324 @media (max-width: 768px) { 325 .footer-buttons { 326 gap: 15px; 327 } 328 329 .footer-button img { 330 height: 40px; 331 min-width: 85px; 332 max-width: 130px; 333 object-fit: contain; /* Add this line */ 334 } 335 336 .footer-info p { 337 font-size: 0.85rem; 338 } 339 } 340 341 @media (max-width: 480px) { 342 .footer-buttons { 343 gap: 10px; 344 } 345 346 .footer-button img { 347 height: 35px; 348 min-width: 75px; 349 max-width: 110px; 350 object-fit: contain; /* Add this line */ 351 } 352 353 .about-footer { 354 padding: 12px 15px; 355 } 356 357 .footer-info p { 358 font-size: 0.8rem; 359 } 360 } 361 362 /* Responsive Design - Existing Station Page Styles */ 363 @media (max-width: 600px) { 364 .search-container { 365 flex-direction: column; 366 align-items: stretch; 367 } 368 .station-header { 369 /* Keep horizontal layout on mobile */ 370 display: flex; 371 flex-direction: row; 372 align-items: center; 373 flex-wrap: wrap; /* Allow wrapping if needed */ 374 gap: 5px; /* Add small gap between elements */ 375 } 376 .station-header span.line-circle { 377 margin-right: 2px; 378 margin-bottom: 0; /* Remove vertical spacing */ 379 } 380 .station-header strong { 381 margin-right: 5px; /* Add spacing after station name */ 382 } 383 .category-content { 384 padding-left: 10px; 385 } 386} 387 </style> 388</head> 389<body> 390 391 <!-- Navigation Bar --> 392 <header> 393 <div class="navbar"> 394 <h1>MetroMatch</h1> 395 <!-- Hamburger Icon for Mobile --> 396 <span class="hamburger" onclick="toggleMenu()">☰</span> 397 398 <!-- Navigation Links for Desktop and Mobile --> 399 <nav class="nav-links"> 400 <a href="/" class=""> 401 <i class="fas fa-map-marker-alt"></i> Home (Map) 402 </a> 403 <a href="/destinations" class="active"> 404 <i class="fas fa-list"></i> Destinations 405 </a> 406 <a href="/itineraries" class=""> 407 <i class="fas fa-route"></i> Itineraries 408 </a> 409 <a href="/how-to-use" class=""> 410 <i class="fas fa-question-circle"></i> How to Use 411 <a href="/about" class=""> 412 <i class="fas fa-info-circle"></i> About 413 </a> 414 </nav> 415 </div> 416 417 <!-- Mobile Menu (Hidden by Default) --> 418 <div class="mobile-menu" id="mobileMenu"> 419 <a href="/" class=""> 420 <i class="fas fa-map-marker-alt"></i> Home (Map) 421 </a> 422 <a href="/destinations" class="active"> 423 <i class="fas fa-list"></i> Destinations 424 </a> 425 <a href="/itineraries" class=""> 426 <i class="fas fa-route"></i> Itineraries 427 </a> 428 <a href="/how-to-use" class=""> 429 <i class="fas fa-question-circle"></i> How to Use 430 </a> 431 <a href="/about" class=""> 432 <i class="fas fa-info-circle"></i> About 433 </a> 434 </div> 435 </header> 436<h1 style="text-align: center; margin-top: 80px;">DC Metro Station Guide: Hotels, Restaurants & Amenities Near Every Station</h1> 437 438<img src="/static/images/sign.jpg" alt="Exit Sign" style="display: block; margin: 20px auto; width: 60%; max-width: 450px; height: auto;"> 439 440<!-- Updated text-container styles --> 441<div class="text-container" style="max-width: 800px; margin: 0 auto; padding: 0 20px; text-align: center;"> 442 <p> 443 What if there were the equivalent of highway exit signs that direct you to places to
443stay, eat, drink, and shop near transit stations? Now there are! Use this page to explore neighborhoods near transit, plan your outing, and find places to meet up with friends. Click a station to see what's nearby or enter a station or line in the filter and head over to the map page for a visual. 444 </p> 445</div> 446 447 <!-- Search Container --> 448 <div class="search-container"> 449 <input type="text" id="station-search" placeholder="Search for a station..." aria-label="Search for a station" /> 450 <select id="line-search" aria-label="Filter by transit line"> 451 <option value="">All Lines</option> 452 453 <option value="Red">Red</option> 454 455 <option value="Blue">Blue</option> 456 457 <option value="Yellow">Yellow</option> 458 459 <option value="Green">Green</option> 460 461 <option value="Orange">Orange</option> 462 463 <option value="Silver">Silver</option> 464 465 <option value="MARC">MARC</option> 466 467 <option value="VRE">VRE</option> 468 469 </select> 470 <button id="clear-search" aria-label="Clear search filters">Clear Search</button> 471 </div> 472 473 <ul class="station-list"> 474 475 <li class="station-item"> 476 <div class="station-header" onclick="toggleAmenities('41')"> 477 <!-- Display circles for each metro line --> 478 479 480 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 481 482 483 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 484 485 <strong>ADDISON ROAD METRO STATION</strong> 486 487 <!-- Hotel icon if hotels are available --> 488 489 490 <!-- Coffee shop icon if coffee shops are available --> 491 492 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 493 494 495 <!-- Restaurant icon if restaurants are available --> 496 497 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 498 499 500 <!-- Nightlife icon if bars are available --> 501 502 503 <!-- Pharmacy icon if pharmacies are available --> 504 505 506 <!-- Supermarket icon if supermarkets are available --> 507 508 509 <!-- Museum icon if museums are available --> 510 511 512 <span class="toggle-icon" id="toggle-41" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 513</div> 514 <ul class="amenities-list" id="amenities-41"> 515 <!-- Amenities will be dynamically loaded here --> 516 <li class="loading">Loading amenities...</li> 517 </ul> 518 </li> 519 520 <li class="station-item"> 521 <div class="station-header" onclick="toggleAmenities('112')"> 522 <!-- Display circles for each metro line --> 523 524 525 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 526 527 <strong>ALEXANDRIA VRE</strong> 528 529 <!-- Hotel icon if hotels are available --> 530 531 532 <!-- Coffee shop icon if coffee shops are available --> 533 534 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 535 536 537 <!-- Restaurant icon if restaurants are available --> 538 539 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (6)"></i> 540 541 542 <!-- Nightlife icon if bars are available --> 543 544 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 545 546 547 <!-- Pharmacy icon if pharmacies are available --> 548 549 550 <!-- Supermarket icon if supermarkets are available --> 551 552 553 <!-- Museum icon if museums are available --> 554 555 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 556 557 558 <span class="toggle-icon" id="toggle-112" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 559</div> 560 <ul class="amenities-list" id="amenities-112"> 561 <!-- Amenities will be dynamically loaded here --> 562 <li class="loading">Loading amenities...</li> 563 </ul> 564 </li> 565 566 <li class="station-item"> 567 <div class="station-header" onclick="toggleAmenities('31')"> 568 <!-- Display circles for each metro line --> 569 570
571 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 572 573 <strong>ANACOSTIA METRO STATION</strong> 574 575 <!-- Hotel icon if hotels are available --> 576 577 578 <!-- Coffee shop icon if coffee shops are available --> 579 580 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 581 582 583 <!-- Restaurant icon if restaurants are available --> 584 585 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i> 586 587 588 <!-- Nightlife icon if bars are available --> 589 590 591 <!-- Pharmacy icon if pharmacies are available --> 592 593 594 <!-- Supermarket icon if supermarkets are available --> 595 596 597 <!-- Museum icon if museums are available --> 598 599 600 <span class="toggle-icon" id="toggle-31" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 601</div> 602 <ul class="amenities-list" id="amenities-31"> 603 <!-- Amenities will be dynamically loaded here --> 604 <li class="loading">Loading amenities...</li> 605 </ul> 606 </li> 607 608 <li class="station-item"> 609 <div class="station-header" onclick="toggleAmenities('14')"> 610 <!-- Display circles for each metro line --> 611 612 613 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 614 615 616 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 617 618 <strong>ARCHIVES METRO STATION</strong> 619 620 <!-- Hotel icon if hotels are available --> 621 622 623 <!-- Coffee shop icon if coffee shops are available --> 624 625 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 626 627 628 <!-- Restaurant icon if restaurants are available --> 629 630 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (17)"></i> 631 632 633 <!-- Nightlife icon if bars are available --> 634 635 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 636 637 638 <!-- Pharmacy icon if pharmacies are available --> 639 640 641 <!-- Supermarket icon if supermarkets are available --> 642 643 644 <!-- Museum icon if museums are available --> 645 646 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 647 648 649 <span class="toggle-icon" id="toggle-14" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 650</div> 651 <ul class="amenities-list" id="amenities-14"> 652 <!-- Amenities will be dynamically loaded here --> 653 <li class="loading">Loading amenities...</li> 654 </ul> 655 </li> 656 657 <li class="station-item"> 658 <div class="station-header" onclick="toggleAmenities('81')"> 659 <!-- Display circles for each metro line --> 660 661 662 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 663 664 <strong>ARLINGTON CEMETERY METRO STATION</strong> 665 666 <!-- Hotel icon if hotels are available --> 667 668 669 <!-- Coffee shop icon if coffee shops are available --> 670 671 672 <!-- Restaurant icon if restaurants are available --> 673 674 675 <!-- Nightlife icon if bars are available --> 676 677 678 <!-- Pharmacy icon if pharmacies are available --> 679 680 681 <!-- Supermarket icon if supermarkets are available --> 682 683 684 <!-- Museum icon if museums are available --> 685 686 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 687 688 689 <span class="toggle-icon" id="toggle-81" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 690</div> 691 <ul class="amenities-list" id="amenities-81"> 692 <!-- Amenities will be dynamically loaded here --> 693 <li class="loading">Loading amenities...</li> 694 </ul> 695 </li> 696 697 <li class="station-item"> 698 <div class="station-header" onclick="toggleAmenities('87')"> 699 <!-- Display circles for each metro line --> 700 701
702 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 703 704 <strong>ASHBURN METRO STATION</strong> 705 706 <!-- Hotel icon if hotels are available --> 707 708 709 <!-- Coffee shop icon if coffee shops are available --> 710 711 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i> 712 713 714 <!-- Restaurant icon if restaurants are available --> 715 716 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (11)"></i> 717 718 719 <!-- Nightlife icon if bars are available --> 720 721 722 <!-- Pharmacy icon if pharmacies are available --> 723 724 725 <!-- Supermarket icon if supermarkets are available --> 726 727 728 <!-- Museum icon if museums are available --> 729 730 731 <span class="toggle-icon" id="toggle-87" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 732</div> 733 <ul class="amenities-list" id="amenities-87"> 734 <!-- Amenities will be dynamically loaded here --> 735 <li class="loading">Loading amenities...</li> 736 </ul> 737 </li> 738 739 <li class="station-item"> 740 <div class="station-header" onclick="toggleAmenities('108')"> 741 <!-- Display circles for each metro line --> 742 743 744 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 745 746 <strong>BACKLICK ROAD VRE</strong> 747 748 <!-- Hotel icon if hotels are available --> 749 750 751 <!-- Coffee shop icon if coffee shops are available --> 752 753 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 754 755 756 <!-- Restaurant icon if restaurants are available --> 757 758 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i> 759 760 761 <!-- Nightlife icon if bars are available --> 762 763 764 <!-- Pharmacy icon if pharmacies are available --> 765 766 767 <!-- Supermarket icon if supermarkets are available --> 768 769 770 <!-- Museum icon if museums are available --> 771 772 773 <span class="toggle-icon" id="toggle-108" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 774</div> 775 <ul class="amenities-list" id="amenities-108"> 776 <!-- Amenities will be dynamically loaded here --> 777 <li class="loading">Loading amenities...</li> 778 </ul> 779 </li> 780 781 <li class="station-item"> 782 <div class="station-header" onclick="toggleAmenities('77')"> 783 <!-- Display circles for each metro line --> 784 785 786 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 787 788 789 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 790 791 <strong>BALLSTON METRO STATION</strong> 792 793 <!-- Hotel icon if hotels are available --> 794 795 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i> 796 797 798 <!-- Coffee shop icon if coffee shops are available --> 799 800 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (15)"></i> 801 802 803 <!-- Restaurant icon if restaurants are available --> 804 805 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (43)"></i> 806 807 808 <!-- Nightlife icon if bars are available --> 809 810 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i> 811 812 813 <!-- Pharmacy icon if pharmacies are available --> 814 815 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 816 817 818 <!-- Supermarket icon if supermarkets are available --> 819 820 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 821 822 823 <!-- Museum icon if museums are available --> 824 825 826 <span class="toggle-icon" id="toggle-77" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 827</div> 828 <ul class="amenities-list" id="amenities-77"> 829 <!-- Amenities will be dynamically loaded here --> 830 <li class="loading">Loading amenities...</li> 831 </ul> 832 </li> 833 834 <li class="station-item"> 835 <div class="station-header" onclick="toggleAmenities('28')"> 836 <!-- Display circles for each metro line --> 837 838
839 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 840 841 842 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 843 844 <strong>BENNING ROAD METRO STATION</strong> 845 846 <!-- Hotel icon if hotels are available --> 847 848 849 <!-- Coffee shop icon if coffee shops are available --> 850 851 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 852 853 854 <!-- Restaurant icon if restaurants are available --> 855 856 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 857 858 859 <!-- Nightlife icon if bars are available --> 860 861 862 <!-- Pharmacy icon if pharmacies are available --> 863 864 865 <!-- Supermarket icon if supermarkets are available --> 866 867 868 <!-- Museum icon if museums are available --> 869 870 871 <span class="toggle-icon" id="toggle-28" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 872</div> 873 <ul class="amenities-list" id="amenities-28"> 874 <!-- Amenities will be dynamically loaded here --> 875 <li class="loading">Loading amenities...</li> 876 </ul> 877 </li> 878 879 <li class="station-item"> 880 <div class="station-header" onclick="toggleAmenities('55')"> 881 <!-- Display circles for each metro line --> 882 883 884 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 885 886 <strong>BETHESDA METRO STATION</strong> 887 888 <!-- Hotel icon if hotels are available --> 889 890 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i> 891 892 893 <!-- Coffee shop icon if coffee shops are available --> 894 895 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (15)"></i> 896 897 898 <!-- Restaurant icon if restaurants are available --> 899 900 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (65)"></i> 901 902 903 <!-- Nightlife icon if bars are available --> 904 905 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i> 906 907 908 <!-- Pharmacy icon if pharmacies are available --> 909 910 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i> 911 912 913 <!-- Supermarket icon if supermarkets are available --> 914 915 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (3)"></i> 916 917 918 <!-- Museum icon if museums are available --> 919 920 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 921 922 923 <span class="toggle-icon" id="toggle-55" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 924</div> 925 <ul class="amenities-list" id="amenities-55"> 926 <!-- Amenities will be dynamically loaded here --> 927 <li class="loading">Loading amenities...</li> 928 </ul> 929 </li> 930 931 <li class="station-item"> 932 <div class="station-header" onclick="toggleAmenities('84')"> 933 <!-- Display circles for each metro line --> 934 935 936 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 937 938 939 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 940 941 <strong>BRADDOCK ROAD METRO STATION</strong> 942 943 <!-- Hotel icon if hotels are available --> 944 945 946 <!-- Coffee shop icon if coffee shops are available --> 947 948 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (7)"></i> 949 950 951 <!-- Restaurant icon if restaurants are available --> 952 953 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (25)"></i> 954 955 956 <!-- Nightlife icon if bars are available --> 957 958 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 959 960 961 <!-- Pharmacy icon if pharmacies are available --> 962 963 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i> 964 965 966 <!-- Supermarket icon if supermarkets are available --> 967 968 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 969 970 971 <!-- Museum icon if museums are available --> 972 973 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (8)"></i> 974 975 976 <span class="toggle-icon" id="toggle-84" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 977</div> 978 <ul class="amenities-list" id="amenities-84"> 979 <!-- Amenities will be dynamically loaded here --> 980 <li class="loading">Loading amenities...</li> 981 </ul> 982 </li> 983 984 <li class="station-item"> 985 <div class="station-header" onclick="toggleAmenities('43')"> 986 <!-- Display circles for each metro line --> 987 988
989 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 990 991 <strong>BRANCH AVE METRO STATION</strong> 992 993 <!-- Hotel icon if hotels are available --> 994 995 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i> 996 997 998 <!-- Coffee shop icon if coffee shops are available --> 999 1000 1001 <!-- Restaurant icon if restaurants are available --> 1002 1003 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (11)"></i> 1004 1005 1006 <!-- Nightlife icon if bars are available --> 1007 1008 1009 <!-- Pharmacy icon if pharmacies are available --> 1010 1011 1012 <!-- Supermarket icon if supermarkets are available --> 1013 1014 1015 <!-- Museum icon if museums are available --> 1016 1017 1018 <span class="toggle-icon" id="toggle-43" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1019</div> 1020 <ul class="amenities-list" id="amenities-43"> 1021 <!-- Amenities will be dynamically loaded here --> 1022 <li class="loading">Loading amenities...</li> 1023 </ul> 1024 </li> 1025 1026 <li class="station-item"> 1027 <div class="station-header" onclick="toggleAmenities('26')"> 1028 <!-- Display circles for each metro line --> 1029 1030 1031 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 1032 1033 <strong>BROOKLAND-CUA METRO STATION</strong> 1034 1035 <!-- Hotel icon if hotels are available --> 1036 1037 1038 <!-- Coffee shop icon if coffee shops are available --> 1039 1040 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 1041 1042 1043 <!-- Restaurant icon if restaurants are available --> 1044 1045 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (21)"></i> 1046 1047 1048 <!-- Nightlife icon if bars are available --> 1049 1050 1051 <!-- Pharmacy icon if pharmacies are available --> 1052 1053 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1054 1055 1056 <!-- Supermarket icon if supermarkets are available --> 1057 1058 1059 <!-- Museum icon if museums are available --> 1060 1061 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 1062 1063 1064 <span class="toggle-icon" id="toggle-26" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1065</div> 1066 <ul class="amenities-list" id="amenities-26"> 1067 <!-- Amenities will be dynamically loaded here --> 1068 <li class="loading">Loading amenities...</li> 1069 </ul> 1070 </li> 1071 1072 <li class="station-item"> 1073 <div class="station-header" onclick="toggleAmenities('103')"> 1074 <!-- Display circles for each metro line --> 1075 1076 1077 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 1078 1079 <strong>BURKE CENTER VRE</strong> 1080 1081 <!-- Hotel icon if hotels are available --> 1082 1083 1084 <!-- Coffee shop icon if coffee shops are available --> 1085 1086 1087 <!-- Restaurant icon if restaurants are available --> 1088 1089 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 1090 1091 1092 <!-- Nightlife icon if bars are available --> 1093 1094 1095 <!-- Pharmacy icon if pharmacies are available --> 1096 1097 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1098 1099 1100 <!-- Supermarket icon if supermarkets are available --> 1101 1102 1103 <!-- Museum icon if museums are available --> 1104 1105 1106 <span class="toggle-icon" id="toggle-103" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1107</div> 1108 <ul class="amenities-list" id="amenities-103"> 1109 <!-- Amenities will be dynamically loaded here --> 1110 <li class="loading">Loading amenities...</li> 1111 </ul> 1112 </li> 1113 1114 <li class="station-item"> 1115 <div class="station-header" onclick="toggleAmenities('42')"> 1116 <!-- Display circles for each metro line --> 1117 1118
1119 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 1120 1121 1122 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1123 1124 <strong>CAPITOL HEIGHTS METRO STATION</strong> 1125 1126 <!-- Hotel icon if hotels are available --> 1127 1128 1129 <!-- Coffee shop icon if coffee shops are available --> 1130 1131 1132 <!-- Restaurant icon if restaurants are available --> 1133 1134 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 1135 1136 1137 <!-- Nightlife icon if bars are available --> 1138 1139 1140 <!-- Pharmacy icon if pharmacies are available --> 1141 1142 1143 <!-- Supermarket icon if supermarkets are available --> 1144 1145 1146 <!-- Museum icon if museums are available --> 1147 1148 1149 <span class="toggle-icon" id="toggle-42" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1150</div> 1151 <ul class="amenities-list" id="amenities-42"> 1152 <!-- Amenities will be dynamically loaded here --> 1153 <li class="loading">Loading amenities...</li> 1154 </ul> 1155 </li> 1156 1157 <li class="station-item"> 1158 <div class="station-header" onclick="toggleAmenities('10')"> 1159 <!-- Display circles for each metro line --> 1160 1161 1162 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 1163 1164 1165 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1166 1167 1168 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1169 1170 <strong>CAPITOL SOUTH METRO STATION</strong> 1171 1172 <!-- Hotel icon if hotels are available --> 1173 1174 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 1175 1176 1177 <!-- Coffee shop icon if coffee shops are available --> 1178 1179 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i> 1180 1181 1182 <!-- Restaurant icon if restaurants are available --> 1183 1184 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (15)"></i> 1185 1186 1187 <!-- Nightlife icon if bars are available --> 1188 1189 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 1190 1191 1192 <!-- Pharmacy icon if pharmacies are available --> 1193 1194 1195 <!-- Supermarket icon if supermarkets are available --> 1196 1197 1198 <!-- Museum icon if museums are available --> 1199 1200 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 1201 1202 1203 <span class="toggle-icon" id="toggle-10" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1204</div> 1205 <ul class="amenities-list" id="amenities-10"> 1206 <!-- Amenities will be dynamically loaded here --> 1207 <li class="loading">Loading amenities...</li> 1208 </ul> 1209 </li> 1210 1211 <li class="station-item"> 1212 <div class="station-header" onclick="toggleAmenities('52')"> 1213 <!-- Display circles for each metro line --> 1214 1215 1216 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1217 1218 <strong>CHEVERLY METRO STATION</strong> 1219 1220 <!-- Hotel icon if hotels are available --> 1221 1222 1223 <!-- Coffee shop icon if coffee shops are available --> 1224 1225 1226 <!-- Restaurant icon if restaurants are available --> 1227 1228 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 1229 1230 1231 <!-- Nightlife icon if bars are available --> 1232 1233 1234 <!-- Pharmacy icon if pharmacies are available --> 1235 1236 1237 <!-- Supermarket icon if supermarkets are available --> 1238 1239 1240 <!-- Museum icon if museums are available --> 1241 1242 1243 <span class="toggle-icon" id="toggle-52" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1244</div> 1245 <ul class="amenities-list" id="amenities-52"> 1246 <!-- Amenities will be dynamically loaded here --> 1247 <li class="loading">Loading amenities...</li> 1248 </ul> 1249 </li> 1250 1251 <li class="station-item"> 1252 <div class="station-header" onclick="toggleAmenities('71')"> 1253 <!-- Display circles for each metro line --> 1254 1255
1256 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1257 1258 1259 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1260 1261 <strong>CLARENDON METRO STATION</strong> 1262 1263 <!-- Hotel icon if hotels are available --> 1264 1265 1266 <!-- Coffee shop icon if coffee shops are available --> 1267 1268 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i> 1269 1270 1271 <!-- Restaurant icon if restaurants are available --> 1272 1273 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i> 1274 1275 1276 <!-- Nightlife icon if bars are available --> 1277 1278 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (15)"></i> 1279 1280 1281 <!-- Pharmacy icon if pharmacies are available --> 1282 1283 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1284 1285 1286 <!-- Supermarket icon if supermarkets are available --> 1287 1288 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 1289 1290 1291 <!-- Museum icon if museums are available --> 1292 1293 1294 <span class="toggle-icon" id="toggle-71" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1295</div> 1296 <ul class="amenities-list" id="amenities-71"> 1297 <!-- Amenities will be dynamically loaded here --> 1298 <li class="loading">Loading amenities...</li> 1299 </ul> 1300 </li> 1301 1302 <li class="station-item"> 1303 <div class="station-header" onclick="toggleAmenities('17')"> 1304 <!-- Display circles for each metro line --> 1305 1306 1307 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 1308 1309 <strong>CLEVELAND PARK METRO STATION</strong> 1310 1311 <!-- Hotel icon if hotels are available --> 1312 1313 1314 <!-- Coffee shop icon if coffee shops are available --> 1315 1316 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 1317 1318 1319 <!-- Restaurant icon if restaurants are available --> 1320 1321 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (18)"></i> 1322 1323 1324 <!-- Nightlife icon if bars are available --> 1325 1326 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i> 1327 1328 1329 <!-- Pharmacy icon if pharmacies are available --> 1330 1331 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 1332 1333 1334 <!-- Supermarket icon if supermarkets are available --> 1335 1336 1337 <!-- Museum icon if museums are available --> 1338 1339 1340 <span class="toggle-icon" id="toggle-17" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1341</div> 1342 <ul class="amenities-list" id="amenities-17"> 1343 <!-- Amenities will be dynamically loaded here --> 1344 <li class="loading">Loading amenities...</li> 1345 </ul> 1346 </li> 1347 1348 <li class="station-item"> 1349 <div class="station-header" onclick="toggleAmenities('116')"> 1350 <!-- Display circles for each metro line --> 1351 1352 1353 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 1354 1355 <strong>CLIFTON VRE</strong> 1356 1357 <!-- Hotel icon if hotels are available --> 1358 1359 1360 <!-- Coffee shop icon if coffee shops are available --> 1361 1362 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 1363 1364 1365 <!-- Restaurant icon if restaurants are available --> 1366 1367 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i> 1368 1369 1370 <!-- Nightlife icon if bars are available --> 1371 1372 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 1373 1374 1375 <!-- Pharmacy icon if pharmacies are available --> 1376 1377 1378 <!-- Supermarket icon if supermarkets are available --> 1379 1380 1381 <!-- Museum icon if museums are available --> 1382 1383 1384 <span class="toggle-icon" id="toggle-116" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1385</div> 1386 <ul class="amenities-list" id="amenities-116"> 1387 <!-- Amenities will be dynamically loaded here --> 1388 <li class="loading">Loading amenities...</li> 1389 </ul> 1390 </li> 1391 1392 <li class="station-item"> 1393 <div class="station-header" onclick="toggleAmenities('125')"> 1394 <!-- Display circles for each metro line --> 1395 1396
1397 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 1398 1399 <strong>COLLEGE PARK MARC</strong> 1400 1401 <!-- Hotel icon if hotels are available --> 1402 1403 1404 <!-- Coffee shop icon if coffee shops are available --> 1405 1406 1407 <!-- Restaurant icon if restaurants are available --> 1408 1409 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i> 1410 1411 1412 <!-- Nightlife icon if bars are available --> 1413 1414 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 1415 1416 1417 <!-- Pharmacy icon if pharmacies are available --> 1418 1419 1420 <!-- Supermarket icon if supermarkets are available --> 1421 1422 1423 <!-- Museum icon if museums are available --> 1424 1425 1426 <span class="toggle-icon" id="toggle-125" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1427</div> 1428 <ul class="amenities-list" id="amenities-125"> 1429 <!-- Amenities will be dynamically loaded here --> 1430 <li class="loading">Loading amenities...</li> 1431 </ul> 1432 </li> 1433 1434 <li class="station-item"> 1435 <div class="station-header" onclick="toggleAmenities('40')"> 1436 <!-- Display circles for each metro line --> 1437 1438 1439 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 1440 1441 <strong>COLLEGE PARK U- MD METRO STATION</strong> 1442 1443 <!-- Hotel icon if hotels are available --> 1444 1445 1446 <!-- Coffee shop icon if coffee shops are available --> 1447 1448 1449 <!-- Restaurant icon if restaurants are available --> 1450 1451 1452 <!-- Nightlife icon if bars are available --> 1453 1454 1455 <!-- Pharmacy icon if pharmacies are available --> 1456 1457 1458 <!-- Supermarket icon if supermarkets are available --> 1459 1460 1461 <!-- Museum icon if museums are available --> 1462 1463 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 1464 1465 1466 <span class="toggle-icon" id="toggle-40" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1467</div> 1468 <ul class="amenities-list" id="amenities-40"> 1469 <!-- Amenities will be dynamically loaded here --> 1470 <li class="loading">Loading amenities...</li> 1471 </ul> 1472 </li> 1473 1474 <li class="station-item"> 1475 <div class="station-header" onclick="toggleAmenities('21')"> 1476 <!-- Display circles for each metro line --> 1477 1478 1479 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 1480 1481 <strong>COLUMBIA HEIGHTS METRO STATION</strong> 1482 1483 <!-- Hotel icon if hotels are available --> 1484 1485 1486 <!-- Coffee shop icon if coffee shops are available --> 1487 1488 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (7)"></i> 1489 1490 1491 <!-- Restaurant icon if restaurants are available --> 1492 1493 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (41)"></i> 1494 1495 1496 <!-- Nightlife icon if bars are available --> 1497 1498 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i> 1499 1500 1501 <!-- Pharmacy icon if pharmacies are available --> 1502 1503 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1504 1505 1506 <!-- Supermarket icon if supermarkets are available --> 1507 1508 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 1509 1510 1511 <!-- Museum icon if museums are available --> 1512 1513 1514 <span class="toggle-icon" id="toggle-21" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1515</div> 1516 <ul class="amenities-list" id="amenities-21"> 1517 <!-- Amenities will be dynamically loaded here --> 1518 <li class="loading">Loading amenities...</li> 1519 </ul> 1520 </li> 1521 1522 <li class="station-item"> 1523 <div class="station-header" onclick="toggleAmenities('32')"> 1524 <!-- Display circles for each metro line --> 1525 1526
1527 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 1528 1529 <strong>CONGRESS HEIGHTS METRO STATION</strong> 1530 1531 <!-- Hotel icon if hotels are available --> 1532 1533 1534 <!-- Coffee shop icon if coffee shops are available --> 1535 1536 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 1537 1538 1539 <!-- Restaurant icon if restaurants are available --> 1540 1541 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i> 1542 1543 1544 <!-- Nightlife icon if bars are available --> 1545 1546 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 1547 1548 1549 <!-- Pharmacy icon if pharmacies are available --> 1550 1551 1552 <!-- Supermarket icon if supermarkets are available --> 1553 1554 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 1555 1556 1557 <!-- Museum icon if museums are available --> 1558 1559 1560 <span class="toggle-icon" id="toggle-32" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1561</div> 1562 <ul class="amenities-list" id="amenities-32"> 1563 <!-- Amenities will be dynamically loaded here --> 1564 <li class="loading">Loading amenities...</li> 1565 </ul> 1566 </li> 1567 1568 <li class="station-item"> 1569 <div class="station-header" onclick="toggleAmenities('72')"> 1570 <!-- Display circles for each metro line --> 1571 1572 1573 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1574 1575 1576 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1577 1578 <strong>COURTHOUSE METRO STATION</strong> 1579 1580 <!-- Hotel icon if hotels are available --> 1581 1582 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i> 1583 1584 1585 <!-- Coffee shop icon if coffee shops are available --> 1586 1587 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i> 1588 1589 1590 <!-- Restaurant icon if restaurants are available --> 1591 1592 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i> 1593 1594 1595 <!-- Nightlife icon if bars are available --> 1596 1597 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 1598 1599 1600 <!-- Pharmacy icon if pharmacies are available --> 1601 1602 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1603 1604 1605 <!-- Supermarket icon if supermarkets are available --> 1606 1607 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 1608 1609 1610 <!-- Museum icon if museums are available --> 1611 1612 1613 <span class="toggle-icon" id="toggle-72" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1614</div> 1615 <ul class="amenities-list" id="amenities-72"> 1616 <!-- Amenities will be dynamically loaded here --> 1617 <li class="loading">Loading amenities...</li> 1618 </ul> 1619 </li> 1620 1621 <li class="station-item"> 1622 <div class="station-header" onclick="toggleAmenities('74')"> 1623 <!-- Display circles for each metro line --> 1624 1625 1626 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 1627 1628 1629 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 1630 1631 <strong>CRYSTAL CITY METRO STATION</strong> 1632 1633 <!-- Hotel icon if hotels are available --> 1634 1635 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i> 1636 1637 1638 <!-- Coffee shop icon if coffee shops are available --> 1639 1640 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i> 1641 1642 1643 <!-- Restaurant icon if restaurants are available --> 1644 1645 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i> 1646 1647 1648 <!-- Nightlife icon if bars are available --> 1649 1650 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i> 1651 1652 1653 <!-- Pharmacy icon if pharmacies are available --> 1654 1655 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1656 1657 1658 <!-- Supermarket icon if supermarkets are available --> 1659 1660 1661 <!-- Museum icon if museums are available --> 1662 1663 1664 <span class="toggle-icon" id="toggle-74" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1665</div> 1666 <ul class="amenities-list" id="amenities-74"> 1667 <!-- Amenities will be dynamically loaded here --> 1668 <li class="loading">Loading amenities...</li> 1669 </ul> 1670 </li> 1671 1672 <li class="station-item"> 1673 <div class="station-header" onclick="toggleAmenities('29')"> 1674 <!-- Display circles for each metro line --> 1675 1676
1677 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1678 1679 <strong>DEANWOOD METRO STATION</strong> 1680 1681 <!-- Hotel icon if hotels are available --> 1682 1683 1684 <!-- Coffee shop icon if coffee shops are available --> 1685 1686 1687 <!-- Restaurant icon if restaurants are available --> 1688 1689 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 1690 1691 1692 <!-- Nightlife icon if bars are available --> 1693 1694 1695 <!-- Pharmacy icon if pharmacies are available --> 1696 1697 1698 <!-- Supermarket icon if supermarkets are available --> 1699 1700 1701 <!-- Museum icon if museums are available --> 1702 1703 1704 <span class="toggle-icon" id="toggle-29" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1705</div> 1706 <ul class="amenities-list" id="amenities-29"> 1707 <!-- Amenities will be dynamically loaded here --> 1708 <li class="loading">Loading amenities...</li> 1709 </ul> 1710 </li> 1711 1712 <li class="station-item"> 1713 <div class="station-header" onclick="toggleAmenities('127')"> 1714 <!-- Display circles for each metro line --> 1715 1716 1717 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 1718 1719 <strong>DORSEY MARC</strong> 1720 1721 <!-- Hotel icon if hotels are available --> 1722 1723 1724 <!-- Coffee shop icon if coffee shops are available --> 1725 1726 1727 <!-- Restaurant icon if restaurants are available --> 1728 1729 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 1730 1731 1732 <!-- Nightlife icon if bars are available --> 1733 1734 1735 <!-- Pharmacy icon if pharmacies are available --> 1736 1737 1738 <!-- Supermarket icon if supermarkets are available --> 1739 1740 1741 <!-- Museum icon if museums are available --> 1742 1743 1744 <span class="toggle-icon" id="toggle-127" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1745</div> 1746 <ul class="amenities-list" id="amenities-127"> 1747 <!-- Amenities will be dynamically loaded here --> 1748 <li class="loading">Loading amenities...</li> 1749 </ul> 1750 </li> 1751 1752 <li class="station-item"> 1753 <div class="station-header" onclick="toggleAmenities('48')"> 1754 <!-- Display circles for each metro line --> 1755 1756 1757 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 1758 1759 1760 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1761 1762 <strong>DOWNTOWN LARGO METRO STATION</strong> 1763 1764 <!-- Hotel icon if hotels are available --> 1765 1766 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i> 1767 1768 1769 <!-- Coffee shop icon if coffee shops are available --> 1770 1771 1772 <!-- Restaurant icon if restaurants are available --> 1773 1774 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (6)"></i> 1775 1776 1777 <!-- Nightlife icon if bars are available --> 1778 1779 1780 <!-- Pharmacy icon if pharmacies are available --> 1781 1782 1783 <!-- Supermarket icon if supermarkets are available --> 1784 1785 1786 <!-- Museum icon if museums are available --> 1787 1788 1789 <span class="toggle-icon" id="toggle-48" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1790</div> 1791 <ul class="amenities-list" id="amenities-48"> 1792 <!-- Amenities will be dynamically loaded here --> 1793 <li class="loading">Loading amenities...</li> 1794 </ul> 1795 </li> 1796 1797 <li class="station-item"> 1798 <div class="station-header" onclick="toggleAmenities('67')"> 1799 <!-- Display circles for each metro line --> 1800 1801 1802 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1803 1804 <strong>DUNN LORING MERRIFIELD METRO STATION</strong> 1805 1806 <!-- Hotel icon if hotels are available --> 1807 1808 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 1809 1810 1811 <!-- Coffee shop icon if coffee shops are available --> 1812 1813 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 1814 1815 1816 <!-- Restaurant icon if restaurants are available --> 1817 1818 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (18)"></i> 1819 1820 1821 <!-- Nightlife icon if bars are available --> 1822 1823 1824 <!-- Pharmacy icon if pharmacies are available --> 1825 1826 1827 <!-- Supermarket icon if supermarkets are available --> 1828 1829 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 1830 1831 1832 <!-- Museum icon if museums are available --> 1833 1834 1835 <span class="toggle-icon" id="toggle-67" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1836</div> 1837 <ul class="amenities-list" id="amenities-67"> 1838 <!-- Amenities will be dynamically loaded here --> 1839 <li class="loading">Loading amenities...</li> 1840 </ul> 1841 </li> 1842 1843 <li class="station-item"> 1844 <div class="station-header" onclick="toggleAmenities('37')"> 1845 <!-- Display circles for each metro line --> 1846 1847
1848 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 1849 1850 <strong>DUPONT CIRCLE METRO STATION</strong> 1851 1852 <!-- Hotel icon if hotels are available --> 1853 1854 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (20)"></i> 1855 1856 1857 <!-- Coffee shop icon if coffee shops are available --> 1858 1859 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (15)"></i> 1860 1861 1862 <!-- Restaurant icon if restaurants are available --> 1863 1864 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (56)"></i> 1865 1866 1867 <!-- Nightlife icon if bars are available --> 1868 1869 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (22)"></i> 1870 1871 1872 <!-- Pharmacy icon if pharmacies are available --> 1873 1874 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (5)"></i> 1875 1876 1877 <!-- Supermarket icon if supermarkets are available --> 1878 1879 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 1880 1881 1882 <!-- Museum icon if museums are available --> 1883 1884 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (7)"></i> 1885 1886 1887 <span class="toggle-icon" id="toggle-37" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1888</div> 1889 <ul class="amenities-list" id="amenities-37"> 1890 <!-- Amenities will be dynamically loaded here --> 1891 <li class="loading">Loading amenities...</li> 1892 </ul> 1893 </li> 1894 1895 <li class="station-item"> 1896 <div class="station-header" onclick="toggleAmenities('79')"> 1897 <!-- Display circles for each metro line --> 1898 1899 1900 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1901 1902 1903 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1904 1905 <strong>EAST FALLS CHURCH METRO STATION</strong> 1906 1907 <!-- Hotel icon if hotels are available --> 1908 1909 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 1910 1911 1912 <!-- Coffee shop icon if coffee shops are available --> 1913 1914 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 1915 1916 1917 <!-- Restaurant icon if restaurants are available --> 1918 1919 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 1920 1921 1922 <!-- Nightlife icon if bars are available --> 1923 1924 1925 <!-- Pharmacy icon if pharmacies are available --> 1926 1927 1928 <!-- Supermarket icon if supermarkets are available --> 1929 1930 1931 <!-- Museum icon if museums are available --> 1932 1933 1934 <span class="toggle-icon" id="toggle-79" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1935</div> 1936 <ul class="amenities-list" id="amenities-79"> 1937 <!-- Amenities will be dynamically loaded here --> 1938 <li class="loading">Loading amenities...</li> 1939 </ul> 1940 </li> 1941 1942 <li class="station-item"> 1943 <div class="station-header" onclick="toggleAmenities('8')"> 1944 <!-- Display circles for each metro line --> 1945 1946 1947 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 1948 1949 1950 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 1951 1952 1953 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 1954 1955 <strong>EASTERN MARKET METRO STATION</strong> 1956 1957 <!-- Hotel icon if hotels are available --> 1958 1959 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 1960 1961 1962 <!-- Coffee shop icon if coffee shops are available --> 1963 1964 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (10)"></i> 1965 1966 1967 <!-- Restaurant icon if restaurants are available --> 1968 1969 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (36)"></i> 1970 1971 1972 <!-- Nightlife icon if bars are available --> 1973 1974 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i> 1975 1976 1977 <!-- Pharmacy icon if pharmacies are available --> 1978 1979 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 1980 1981 1982 <!-- Supermarket icon if supermarkets are available --> 1983 1984 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 1985 1986 1987 <!-- Museum icon if museums are available --> 1988 1989 1990 <span class="toggle-icon" id="toggle-8" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 1991</div> 1992 <ul class="amenities-list" id="amenities-8"> 1993 <!-- Amenities will be dynamically loaded here --> 1994 <li class="loading">Loading amenities...</li> 1995 </ul> 1996 </li> 1997 1998 <li class="station-item"> 1999 <div class="station-header" onclick="toggleAmenities('85')"> 2000 <!-- Display circles for each metro line --> 2001 2002
2003 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 2004 2005 <strong>EISENHOWER AVE METRO STATION</strong> 2006 2007 <!-- Hotel icon if hotels are available --> 2008 2009 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i> 2010 2011 2012 <!-- Coffee shop icon if coffee shops are available --> 2013 2014 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i> 2015 2016 2017 <!-- Restaurant icon if restaurants are available --> 2018 2019 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (15)"></i> 2020 2021 2022 <!-- Nightlife icon if bars are available --> 2023 2024 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 2025 2026 2027 <!-- Pharmacy icon if pharmacies are available --> 2028 2029 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2030 2031 2032 <!-- Supermarket icon if supermarkets are available --> 2033 2034 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 2035 2036 2037 <!-- Museum icon if museums are available --> 2038 2039 2040 <span class="toggle-icon" id="toggle-85" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2041</div> 2042 <ul class="amenities-list" id="amenities-85"> 2043 <!-- Amenities will be dynamically loaded here --> 2044 <li class="loading">Loading amenities...</li> 2045 </ul> 2046 </li> 2047 2048 <li class="station-item"> 2049 <div class="station-header" onclick="toggleAmenities('38')"> 2050 <!-- Display circles for each metro line --> 2051 2052 2053 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2054 2055 <strong>FARRAGUT NORTH METRO STATION</strong> 2056 2057 <!-- Hotel icon if hotels are available --> 2058 2059 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (11)"></i> 2060 2061 2062 <!-- Coffee shop icon if coffee shops are available --> 2063 2064 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (11)"></i> 2065 2066 2067 <!-- Restaurant icon if restaurants are available --> 2068 2069 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i> 2070 2071 2072 <!-- Nightlife icon if bars are available --> 2073 2074 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (19)"></i> 2075 2076 2077 <!-- Pharmacy icon if pharmacies are available --> 2078 2079 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 2080 2081 2082 <!-- Supermarket icon if supermarkets are available --> 2083 2084 2085 <!-- Museum icon if museums are available --> 2086 2087 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 2088 2089 2090 <span class="toggle-icon" id="toggle-38" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2091</div> 2092 <ul class="amenities-list" id="amenities-38"> 2093 <!-- Amenities will be dynamically loaded here --> 2094 <li class="loading">Loading amenities...</li> 2095 </ul> 2096 </li> 2097 2098 <li class="station-item"> 2099 <div class="station-header" onclick="toggleAmenities('16')"> 2100 <!-- Display circles for each metro line --> 2101 2102 2103 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 2104 2105 2106 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 2107 2108 2109 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 2110 2111 <strong>FARRAGUT WEST METRO STATION</strong> 2112 2113 <!-- Hotel icon if hotels are available --> 2114 2115 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i> 2116 2117 2118 <!-- Coffee shop icon if coffee shops are available --> 2119 2120 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 2121 2122 2123 <!-- Restaurant icon if restaurants are available --> 2124 2125 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (25)"></i> 2126 2127 2128 <!-- Nightlife icon if bars are available --> 2129 2130 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 2131 2132 2133 <!-- Pharmacy icon if pharmacies are available --> 2134 2135 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2136 2137 2138 <!-- Supermarket icon if supermarkets are available --> 2139 2140 2141 <!-- Museum icon if museums are available --> 2142 2143 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (4)"></i> 2144 2145 2146 <span class="toggle-icon" id="toggle-16" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2147</div> 2148 <ul class="amenities-list" id="amenities-16"> 2149 <!-- Amenities will be dynamically loaded here --> 2150 <li class="loading">Loading amenities...</li> 2151 </ul> 2152 </li> 2153 2154 <li class="station-item"> 2155 <div class="station-header" onclick="toggleAmenities('34')"> 2156 <!-- Display circles for each metro line --> 2157 2158
2159 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 2160 2161 2162 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 2163 2164 2165 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 2166 2167 <strong>FEDERAL CENTER METRO STATION</strong> 2168 2169 <!-- Hotel icon if hotels are available --> 2170 2171 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 2172 2173 2174 <!-- Coffee shop icon if coffee shops are available --> 2175 2176 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 2177 2178 2179 <!-- Restaurant icon if restaurants are available --> 2180 2181 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 2182 2183 2184 <!-- Nightlife icon if bars are available --> 2185 2186 2187 <!-- Pharmacy icon if pharmacies are available --> 2188 2189 2190 <!-- Supermarket icon if supermarkets are available --> 2191 2192 2193 <!-- Museum icon if museums are available --> 2194 2195 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 2196 2197 2198 <span class="toggle-icon" id="toggle-34" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2199</div> 2200 <ul class="amenities-list" id="amenities-34"> 2201 <!-- Amenities will be dynamically loaded here --> 2202 <li class="loading">Loading amenities...</li> 2203 </ul> 2204 </li> 2205 2206 <li class="station-item"> 2207 <div class="station-header" onclick="toggleAmenities('13')"> 2208 <!-- Display circles for each metro line --> 2209 2210 2211 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 2212 2213 2214 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 2215 2216 2217 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 2218 2219 <strong>FEDERAL TRIANGLE METRO STATION</strong> 2220 2221 <!-- Hotel icon if hotels are available --> 2222 2223 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 2224 2225 2226 <!-- Coffee shop icon if coffee shops are available --> 2227 2228 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 2229 2230 2231 <!-- Restaurant icon if restaurants are available --> 2232 2233 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (9)"></i> 2234 2235 2236 <!-- Nightlife icon if bars are available --> 2237 2238 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i> 2239 2240 2241 <!-- Pharmacy icon if pharmacies are available --> 2242 2243 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2244 2245 2246 <!-- Supermarket icon if supermarkets are available --> 2247 2248 2249 <!-- Museum icon if museums are available --> 2250 2251 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (4)"></i> 2252 2253 2254 <span class="toggle-icon" id="toggle-13" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2255</div> 2256 <ul class="amenities-list" id="amenities-13"> 2257 <!-- Amenities will be dynamically loaded here --> 2258 <li class="loading">Loading amenities...</li> 2259 </ul> 2260 </li> 2261 2262 <li class="station-item"> 2263 <div class="station-header" onclick="toggleAmenities('39')"> 2264 <!-- Display circles for each metro line --> 2265 2266 2267 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 2268 2269 2270 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 2271 2272 2273 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 2274 2275 <strong>FOGGY BOTTOM METRO STATION</strong> 2276 2277 <!-- Hotel icon if hotels are available --> 2278 2279 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (19)"></i> 2280 2281 2282 <!-- Coffee shop icon if coffee shops are available --> 2283 2284 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (25)"></i> 2285 2286 2287 <!-- Restaurant icon if restaurants are available --> 2288 2289 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (34)"></i> 2290 2291 2292 <!-- Nightlife icon if bars are available --> 2293 2294 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i> 2295 2296 2297 <!-- Pharmacy icon if pharmacies are available --> 2298 2299 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (4)"></i> 2300 2301 2302 <!-- Supermarket icon if supermarkets are available --> 2303 2304 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 2305 2306 2307 <!-- Museum icon if museums are available --> 2308 2309 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 2310 2311 2312 <span class="toggle-icon" id="toggle-39" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2313</div> 2314 <ul class="amenities-list" id="amenities-39"> 2315 <!-- Amenities will be dynamically loaded here --> 2316 <li class="loading">Loading amenities...</li> 2317 </ul> 2318 </li> 2319 2320 <li class="station-item"> 2321 <div class="station-header" onclick="toggleAmenities('65')"> 2322 <!-- Display circles for each metro line --> 2323 2324
2325 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2326 2327 <strong>FOREST GLEN METRO STATION</strong> 2328 2329 <!-- Hotel icon if hotels are available --> 2330 2331 2332 <!-- Coffee shop icon if coffee shops are available --> 2333 2334 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 2335 2336 2337 <!-- Restaurant icon if restaurants are available --> 2338 2339 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (8)"></i> 2340 2341 2342 <!-- Nightlife icon if bars are available --> 2343 2344 2345 <!-- Pharmacy icon if pharmacies are available --> 2346 2347 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2348 2349 2350 <!-- Supermarket icon if supermarkets are available --> 2351 2352 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 2353 2354 2355 <!-- Museum icon if museums are available --> 2356 2357 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 2358 2359 2360 <span class="toggle-icon" id="toggle-65" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2361</div> 2362 <ul class="amenities-list" id="amenities-65"> 2363 <!-- Amenities will be dynamically loaded here --> 2364 <li class="loading">Loading amenities...</li> 2365 </ul> 2366 </li> 2367 2368 <li class="station-item"> 2369 <div class="station-header" onclick="toggleAmenities('23')"> 2370 <!-- Display circles for each metro line --> 2371 2372 2373 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 2374 2375 2376 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2377 2378 <strong>FORT TOTTEN METRO STATION</strong> 2379 2380 <!-- Hotel icon if hotels are available --> 2381 2382 2383 <!-- Coffee shop icon if coffee shops are available --> 2384 2385 2386 <!-- Restaurant icon if restaurants are available --> 2387 2388 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 2389 2390 2391 <!-- Nightlife icon if bars are available --> 2392 2393 2394 <!-- Pharmacy icon if pharmacies are available --> 2395 2396 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2397 2398 2399 <!-- Supermarket icon if supermarkets are available --> 2400 2401 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 2402 2403 2404 <!-- Museum icon if museums are available --> 2405 2406 2407 <span class="toggle-icon" id="toggle-23" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2408</div> 2409 <ul class="amenities-list" id="amenities-23"> 2410 <!-- Amenities will be dynamically loaded here --> 2411 <li class="loading">Loading amenities...</li> 2412 </ul> 2413 </li> 2414 2415 <li class="station-item"> 2416 <div class="station-header" onclick="toggleAmenities('107')"> 2417 <!-- Display circles for each metro line --> 2418 2419 2420 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 2421 2422 <strong>FRANCONIA SPRINGFIELD VRE</strong> 2423 2424 <!-- Hotel icon if hotels are available --> 2425 2426 2427 <!-- Coffee shop icon if coffee shops are available --> 2428 2429 2430 <!-- Restaurant icon if restaurants are available --> 2431 2432 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 2433 2434 2435 <!-- Nightlife icon if bars are available --> 2436 2437 2438 <!-- Pharmacy icon if pharmacies are available --> 2439 2440 2441 <!-- Supermarket icon if supermarkets are available --> 2442 2443 2444 <!-- Museum icon if museums are available --> 2445 2446 2447 <span class="toggle-icon" id="toggle-107" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2448</div> 2449 <ul class="amenities-list" id="amenities-107"> 2450 <!-- Amenities will be dynamically loaded here --> 2451 <li class="loading">Loading amenities...</li> 2452 </ul> 2453 </li> 2454 2455 <li class="station-item"> 2456 <div class="station-header" onclick="toggleAmenities('130')"> 2457 <!-- Display circles for each metro line --> 2458 2459
2460 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 2461 2462 <strong>FREDERICK MARC</strong> 2463 2464 <!-- Hotel icon if hotels are available --> 2465 2466 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i> 2467 2468 2469 <!-- Coffee shop icon if coffee shops are available --> 2470 2471 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (10)"></i> 2472 2473 2474 <!-- Restaurant icon if restaurants are available --> 2475 2476 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (36)"></i> 2477 2478 2479 <!-- Nightlife icon if bars are available --> 2480 2481 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 2482 2483 2484 <!-- Pharmacy icon if pharmacies are available --> 2485 2486 2487 <!-- Supermarket icon if supermarkets are available --> 2488 2489 2490 <!-- Museum icon if museums are available --> 2491 2492 2493 <span class="toggle-icon" id="toggle-130" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2494</div> 2495 <ul class="amenities-list" id="amenities-130"> 2496 <!-- Amenities will be dynamically loaded here --> 2497 <li class="loading">Loading amenities...</li> 2498 </ul> 2499 </li> 2500 2501 <li class="station-item"> 2502 <div class="station-header" onclick="toggleAmenities('113')"> 2503 <!-- Display circles for each metro line --> 2504 2505 2506 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 2507 2508 <strong>FREDERICKSBURG VRE</strong> 2509 2510 <!-- Hotel icon if hotels are available --> 2511 2512 2513 <!-- Coffee shop icon if coffee shops are available --> 2514 2515 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (11)"></i> 2516 2517 2518 <!-- Restaurant icon if restaurants are available --> 2519 2520 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i> 2521 2522 2523 <!-- Nightlife icon if bars are available --> 2524 2525 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (12)"></i> 2526 2527 2528 <!-- Pharmacy icon if pharmacies are available --> 2529 2530 2531 <!-- Supermarket icon if supermarkets are available --> 2532 2533 2534 <!-- Museum icon if museums are available --> 2535 2536 2537 <span class="toggle-icon" id="toggle-113" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2538</div> 2539 <ul class="amenities-list" id="amenities-113"> 2540 <!-- Amenities will be dynamically loaded here --> 2541 <li class="loading">Loading amenities...</li> 2542 </ul> 2543 </li> 2544 2545 <li class="station-item"> 2546 <div class="station-header" onclick="toggleAmenities('57')"> 2547 <!-- Display circles for each metro line --> 2548 2549 2550 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2551 2552 <strong>FRIENDSHIP HEIGHTS METRO STATION</strong> 2553 2554 <!-- Hotel icon if hotels are available --> 2555 2556 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 2557 2558 2559 <!-- Coffee shop icon if coffee shops are available --> 2560 2561 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 2562 2563 2564 <!-- Restaurant icon if restaurants are available --> 2565 2566 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (23)"></i> 2567 2568 2569 <!-- Nightlife icon if bars are available --> 2570 2571 2572 <!-- Pharmacy icon if pharmacies are available --> 2573 2574 2575 <!-- Supermarket icon if supermarkets are available --> 2576 2577 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (3)"></i> 2578 2579 2580 <!-- Museum icon if museums are available --> 2581 2582 2583 <span class="toggle-icon" id="toggle-57" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2584</div> 2585 <ul class="amenities-list" id="amenities-57"> 2586 <!-- Amenities will be dynamically loaded here --> 2587 <li class="loading">Loading amenities...</li> 2588 </ul> 2589 </li> 2590 2591 <li class="station-item"> 2592 <div class="station-header" onclick="toggleAmenities('131')"> 2593 <!-- Display circles for each metro line --> 2594 2595
2596 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 2597 2598 <strong>GAITHERSBURG MARC</strong> 2599 2600 <!-- Hotel icon if hotels are available --> 2601 2602 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 2603 2604 2605 <!-- Coffee shop icon if coffee shops are available --> 2606 2607 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 2608 2609 2610 <!-- Restaurant icon if restaurants are available --> 2611 2612 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i> 2613 2614 2615 <!-- Nightlife icon if bars are available --> 2616 2617 2618 <!-- Pharmacy icon if pharmacies are available --> 2619 2620 2621 <!-- Supermarket icon if supermarkets are available --> 2622 2623 2624 <!-- Museum icon if museums are available --> 2625 2626 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (3)"></i> 2627 2628 2629 <span class="toggle-icon" id="toggle-131" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2630</div> 2631 <ul class="amenities-list" id="amenities-131"> 2632 <!-- Amenities will be dynamically loaded here --> 2633 <li class="loading">Loading amenities...</li> 2634 </ul> 2635 </li> 2636 2637 <li class="station-item"> 2638 <div class="station-header" onclick="toggleAmenities('5')"> 2639 <!-- Display circles for each metro line --> 2640 2641 2642 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2643 2644 2645 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 2646 2647 2648 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 2649 2650 <strong>GALLERY PLACE CHINATOWN METRO STATION</strong> 2651 2652 <!-- Hotel icon if hotels are available --> 2653 2654 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (7)"></i> 2655 2656 2657 <!-- Coffee shop icon if coffee shops are available --> 2658 2659 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 2660 2661 2662 <!-- Restaurant icon if restaurants are available --> 2663 2664 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (21)"></i> 2665 2666 2667 <!-- Nightlife icon if bars are available --> 2668 2669 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (11)"></i> 2670 2671 2672 <!-- Pharmacy icon if pharmacies are available --> 2673 2674 2675 <!-- Supermarket icon if supermarkets are available --> 2676 2677 2678 <!-- Museum icon if museums are available --> 2679 2680 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (3)"></i> 2681 2682 2683 <span class="toggle-icon" id="toggle-5" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2684</div> 2685 <ul class="amenities-list" id="amenities-5"> 2686 <!-- Amenities will be dynamically loaded here --> 2687 <li class="loading">Loading amenities...</li> 2688 </ul> 2689 </li> 2690 2691 <li class="station-item"> 2692 <div class="station-header" onclick="toggleAmenities('132')"> 2693 <!-- Display circles for each metro line --> 2694 2695 2696 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 2697 2698 <strong>GARRETT PARK MARC</strong> 2699 2700 <!-- Hotel icon if hotels are available --> 2701 2702 2703 <!-- Coffee shop icon if coffee shops are available --> 2704 2705 2706 <!-- Restaurant icon if restaurants are available --> 2707 2708 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 2709 2710 2711 <!-- Nightlife icon if bars are available --> 2712 2713 2714 <!-- Pharmacy icon if pharmacies are available --> 2715 2716 2717 <!-- Supermarket icon if supermarkets are available --> 2718 2719 2720 <!-- Museum icon if museums are available --> 2721 2722 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 2723 2724 2725 <span class="toggle-icon" id="toggle-132" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2726</div> 2727 <ul class="amenities-list" id="amenities-132"> 2728 <!-- Amenities will be dynamically loaded here --> 2729 <li class="loading">Loading amenities...</li> 2730 </ul> 2731 </li> 2732 2733 <li class="station-item"> 2734 <div class="station-header" onclick="toggleAmenities('22')"> 2735 <!-- Display circles for each metro line --> 2736 2737
2738 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 2739 2740 <strong>GEORGIA AVE PETWORTH METRO STATION</strong> 2741 2742 <!-- Hotel icon if hotels are available --> 2743 2744 2745 <!-- Coffee shop icon if coffee shops are available --> 2746 2747 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i> 2748 2749 2750 <!-- Restaurant icon if restaurants are available --> 2751 2752 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i> 2753 2754 2755 <!-- Nightlife icon if bars are available --> 2756 2757 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (13)"></i> 2758 2759 2760 <!-- Pharmacy icon if pharmacies are available --> 2761 2762 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2763 2764 2765 <!-- Supermarket icon if supermarkets are available --> 2766 2767 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 2768 2769 2770 <!-- Museum icon if museums are available --> 2771 2772 2773 <span class="toggle-icon" id="toggle-22" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2774</div> 2775 <ul class="amenities-list" id="amenities-22"> 2776 <!-- Amenities will be dynamically loaded here --> 2777 <li class="loading">Loading amenities...</li> 2778 </ul> 2779 </li> 2780 2781 <li class="station-item"> 2782 <div class="station-header" onclick="toggleAmenities('133')"> 2783 <!-- Display circles for each metro line --> 2784 2785 2786 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 2787 2788 <strong>GERMANTOWN MARC</strong> 2789 2790 <!-- Hotel icon if hotels are available --> 2791 2792 2793 <!-- Coffee shop icon if coffee shops are available --> 2794 2795 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 2796 2797 2798 <!-- Restaurant icon if restaurants are available --> 2799 2800 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i> 2801 2802 2803 <!-- Nightlife icon if bars are available --> 2804 2805 2806 <!-- Pharmacy icon if pharmacies are available --> 2807 2808 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2809 2810 2811 <!-- Supermarket icon if supermarkets are available --> 2812 2813 2814 <!-- Museum icon if museums are available --> 2815 2816 2817 <span class="toggle-icon" id="toggle-133" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2818</div> 2819 <ul class="amenities-list" id="amenities-133"> 2820 <!-- Amenities will be dynamically loaded here --> 2821 <li class="loading">Loading amenities...</li> 2822 </ul> 2823 </li> 2824 2825 <li class="station-item"> 2826 <div class="station-header" onclick="toggleAmenities('64')"> 2827 <!-- Display circles for each metro line --> 2828 2829 2830 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2831 2832 <strong>GLENMONT METRO STATION</strong> 2833 2834 <!-- Hotel icon if hotels are available --> 2835 2836 2837 <!-- Coffee shop icon if coffee shops are available --> 2838 2839 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 2840 2841 2842 <!-- Restaurant icon if restaurants are available --> 2843 2844 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (7)"></i> 2845 2846 2847 <!-- Nightlife icon if bars are available --> 2848 2849 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 2850 2851 2852 <!-- Pharmacy icon if pharmacies are available --> 2853 2854 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 2855 2856 2857 <!-- Supermarket icon if supermarkets are available --> 2858 2859 2860 <!-- Museum icon if museums are available --> 2861 2862 2863 <span class="toggle-icon" id="toggle-64" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2864</div> 2865 <ul class="amenities-list" id="amenities-64"> 2866 <!-- Amenities will be dynamically loaded here --> 2867 <li class="loading">Loading amenities...</li> 2868 </ul> 2869 </li> 2870 2871 <li class="station-item"> 2872 <div class="station-header" onclick="toggleAmenities('134')"> 2873 <!-- Display circles for each metro line --> 2874 2875
2876 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 2877 2878 <strong>GREENBELT MARC</strong> 2879 2880 <!-- Hotel icon if hotels are available --> 2881 2882 2883 <!-- Coffee shop icon if coffee shops are available --> 2884 2885 2886 <!-- Restaurant icon if restaurants are available --> 2887 2888 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 2889 2890 2891 <!-- Nightlife icon if bars are available --> 2892 2893 2894 <!-- Pharmacy icon if pharmacies are available --> 2895 2896 2897 <!-- Supermarket icon if supermarkets are available --> 2898 2899 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 2900 2901 2902 <!-- Museum icon if museums are available --> 2903 2904 2905 <span class="toggle-icon" id="toggle-134" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2906</div> 2907 <ul class="amenities-list" id="amenities-134"> 2908 <!-- Amenities will be dynamically loaded here --> 2909 <li class="loading">Loading amenities...</li> 2910 </ul> 2911 </li> 2912 2913 <li class="station-item"> 2914 <div class="station-header" onclick="toggleAmenities('95')"> 2915 <!-- Display circles for each metro line --> 2916 2917 2918 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 2919 2920 <strong>GREENSBORO METRO STATION</strong> 2921 2922 <!-- Hotel icon if hotels are available --> 2923 2924 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 2925 2926 2927 <!-- Coffee shop icon if coffee shops are available --> 2928 2929 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 2930 2931 2932 <!-- Restaurant icon if restaurants are available --> 2933 2934 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (28)"></i> 2935 2936 2937 <!-- Nightlife icon if bars are available --> 2938 2939 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i> 2940 2941 2942 <!-- Pharmacy icon if pharmacies are available --> 2943 2944 2945 <!-- Supermarket icon if supermarkets are available --> 2946 2947 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 2948 2949 2950 <!-- Museum icon if museums are available --> 2951 2952 2953 <span class="toggle-icon" id="toggle-95" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2954</div> 2955 <ul class="amenities-list" id="amenities-95"> 2956 <!-- Amenities will be dynamically loaded here --> 2957 <li class="loading">Loading amenities...</li> 2958 </ul> 2959 </li> 2960 2961 <li class="station-item"> 2962 <div class="station-header" onclick="toggleAmenities('59')"> 2963 <!-- Display circles for each metro line --> 2964 2965 2966 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 2967 2968 <strong>GROSVENOR METRO STATION</strong> 2969 2970 <!-- Hotel icon if hotels are available --> 2971 2972 2973 <!-- Coffee shop icon if coffee shops are available --> 2974 2975 2976 <!-- Restaurant icon if restaurants are available --> 2977 2978 2979 <!-- Nightlife icon if bars are available --> 2980 2981 2982 <!-- Pharmacy icon if pharmacies are available --> 2983 2984 2985 <!-- Supermarket icon if supermarkets are available --> 2986 2987 2988 <!-- Museum icon if museums are available --> 2989 2990 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 2991 2992 2993 <span class="toggle-icon" id="toggle-59" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 2994</div> 2995 <ul class="amenities-list" id="amenities-59"> 2996 <!-- Amenities will be dynamically loaded here --> 2997 <li class="loading">Loading amenities...</li> 2998 </ul> 2999 </li> 3000 3001 <li class="station-item"> 3002 <div class="station-header" onclick="toggleAmenities('91')"> 3003 <!-- Display circles for each metro line --> 3004 3005
3006 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 3007 3008 <strong>HERNDON METRO STATION</strong> 3009 3010 <!-- Hotel icon if hotels are available --> 3011 3012 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 3013 3014 3015 <!-- Coffee shop icon if coffee shops are available --> 3016 3017 3018 <!-- Restaurant icon if restaurants are available --> 3019 3020 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (3)"></i> 3021 3022 3023 <!-- Nightlife icon if bars are available --> 3024 3025 3026 <!-- Pharmacy icon if pharmacies are available --> 3027 3028 3029 <!-- Supermarket icon if supermarkets are available --> 3030 3031 3032 <!-- Museum icon if museums are available --> 3033 3034 3035 <span class="toggle-icon" id="toggle-91" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3036</div> 3037 <ul class="amenities-list" id="amenities-91"> 3038 <!-- Amenities will be dynamically loaded here --> 3039 <li class="loading">Loading amenities...</li> 3040 </ul> 3041 </li> 3042 3043 <li class="station-item"> 3044 <div class="station-header" onclick="toggleAmenities('82')"> 3045 <!-- Display circles for each metro line --> 3046 3047 3048 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 3049 3050 <strong>HUNTINGTON METRO STATION</strong> 3051 3052 <!-- Hotel icon if hotels are available --> 3053 3054 3055 <!-- Coffee shop icon if coffee shops are available --> 3056 3057 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 3058 3059 3060 <!-- Restaurant icon if restaurants are available --> 3061 3062 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (8)"></i> 3063 3064 3065 <!-- Nightlife icon if bars are available --> 3066 3067 3068 <!-- Pharmacy icon if pharmacies are available --> 3069 3070 3071 <!-- Supermarket icon if supermarkets are available --> 3072 3073 3074 <!-- Museum icon if museums are available --> 3075 3076 3077 <span class="toggle-icon" id="toggle-82" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3078</div> 3079 <ul class="amenities-list" id="amenities-82"> 3080 <!-- Amenities will be dynamically loaded here --> 3081 <li class="loading">Loading amenities...</li> 3082 </ul> 3083 </li> 3084 3085 <li class="station-item"> 3086 <div class="station-header" onclick="toggleAmenities('50')"> 3087 <!-- Display circles for each metro line --> 3088 3089 3090 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 3091 3092 <strong>HYATTSVILLE CROSSING METRO STATION</strong> 3093 3094 <!-- Hotel icon if hotels are available --> 3095 3096 3097 <!-- Coffee shop icon if coffee shops are available --> 3098 3099 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 3100 3101 3102 <!-- Restaurant icon if restaurants are available --> 3103 3104 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (22)"></i> 3105 3106 3107 <!-- Nightlife icon if bars are available --> 3108 3109 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 3110 3111 3112 <!-- Pharmacy icon if pharmacies are available --> 3113 3114 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 3115 3116 3117 <!-- Supermarket icon if supermarkets are available --> 3118 3119 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 3120 3121 3122 <!-- Museum icon if museums are available --> 3123 3124 3125 <span class="toggle-icon" id="toggle-50" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3126</div> 3127 <ul class="amenities-list" id="amenities-50"> 3128 <!-- Amenities will be dynamically loaded here --> 3129 <li class="loading">Loading amenities...</li> 3130 </ul> 3131 </li> 3132 3133 <li class="station-item"> 3134 <div class="station-header" onclick="toggleAmenities('90')"> 3135 <!-- Display circles for each metro line --> 3136 3137
3138 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 3139 3140 <strong>INNOVATION CENTER METRO STATION</strong> 3141 3142 <!-- Hotel icon if hotels are available --> 3143 3144 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i> 3145 3146 3147 <!-- Coffee shop icon if coffee shops are available --> 3148 3149 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 3150 3151 3152 <!-- Restaurant icon if restaurants are available --> 3153 3154 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 3155 3156 3157 <!-- Nightlife icon if bars are available --> 3158 3159 3160 <!-- Pharmacy icon if pharmacies are available --> 3161 3162 3163 <!-- Supermarket icon if supermarkets are available --> 3164 3165 3166 <!-- Museum icon if museums are available --> 3167 3168 3169 <span class="toggle-icon" id="toggle-90" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3170</div> 3171 <ul class="amenities-list" id="amenities-90"> 3172 <!-- Amenities will be dynamically loaded here --> 3173 <li class="loading">Loading amenities...</li> 3174 </ul> 3175 </li> 3176 3177 <li class="station-item"> 3178 <div class="station-header" onclick="toggleAmenities('137')"> 3179 <!-- Display circles for each metro line --> 3180 3181 3182 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 3183 3184 <strong>JESSUP MARC</strong> 3185 3186 <!-- Hotel icon if hotels are available --> 3187 3188 3189 <!-- Coffee shop icon if coffee shops are available --> 3190 3191 3192 <!-- Restaurant icon if restaurants are available --> 3193 3194 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 3195 3196 3197 <!-- Nightlife icon if bars are available --> 3198 3199 3200 <!-- Pharmacy icon if pharmacies are available --> 3201 3202 3203 <!-- Supermarket icon if supermarkets are available --> 3204 3205 3206 <!-- Museum icon if museums are available --> 3207 3208 3209 <span class="toggle-icon" id="toggle-137" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3210</div> 3211 <ul class="amenities-list" id="amenities-137"> 3212 <!-- Amenities will be dynamically loaded here --> 3213 <li class="loading">Loading amenities...</li> 3214 </ul> 3215 </li> 3216 3217 <li class="station-item"> 3218 <div class="station-header" onclick="toggleAmenities('4')"> 3219 <!-- Display circles for each metro line --> 3220 3221 3222 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 3223 3224 <strong>JUDICIARY SQUARE METRO STATION</strong> 3225 3226 <!-- Hotel icon if hotels are available --> 3227 3228 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 3229 3230 3231 <!-- Coffee shop icon if coffee shops are available --> 3232 3233 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 3234 3235 3236 <!-- Restaurant icon if restaurants are available --> 3237 3238 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (11)"></i> 3239 3240 3241 <!-- Nightlife icon if bars are available --> 3242 3243 3244 <!-- Pharmacy icon if pharmacies are available --> 3245 3246 3247 <!-- Supermarket icon if supermarkets are available --> 3248 3249 3250 <!-- Museum icon if museums are available --> 3251 3252 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 3253 3254 3255 <span class="toggle-icon" id="toggle-4" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3256</div> 3257 <ul class="amenities-list" id="amenities-4"> 3258 <!-- Amenities will be dynamically loaded here --> 3259 <li class="loading">Loading amenities...</li> 3260 </ul> 3261 </li> 3262 3263 <li class="station-item"> 3264 <div class="station-header" onclick="toggleAmenities('138')"> 3265 <!-- Display circles for each metro line --> 3266 3267
3268 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 3269 3270 <strong>KENSINGTON MARC</strong> 3271 3272 <!-- Hotel icon if hotels are available --> 3273 3274 3275 <!-- Coffee shop icon if coffee shops are available --> 3276 3277 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i> 3278 3279 3280 <!-- Restaurant icon if restaurants are available --> 3281 3282 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (15)"></i> 3283 3284 3285 <!-- Nightlife icon if bars are available --> 3286 3287 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i> 3288 3289 3290 <!-- Pharmacy icon if pharmacies are available --> 3291 3292 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 3293 3294 3295 <!-- Supermarket icon if supermarkets are available --> 3296 3297 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 3298 3299 3300 <!-- Museum icon if museums are available --> 3301 3302 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 3303 3304 3305 <span class="toggle-icon" id="toggle-138" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3306</div> 3307 <ul class="amenities-list" id="amenities-138"> 3308 <!-- Amenities will be dynamically loaded here --> 3309 <li class="loading">Loading amenities...</li> 3310 </ul> 3311 </li> 3312 3313 <li class="station-item"> 3314 <div class="station-header" onclick="toggleAmenities('86')"> 3315 <!-- Display circles for each metro line --> 3316 3317 3318 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 3319 3320 3321 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 3322 3323 <strong>KING STREET METRO STATION</strong> 3324 3325 <!-- Hotel icon if hotels are available --> 3326 3327 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (9)"></i> 3328 3329 3330 <!-- Coffee shop icon if coffee shops are available --> 3331 3332 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i> 3333 3334 3335 <!-- Restaurant icon if restaurants are available --> 3336 3337 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (19)"></i> 3338 3339 3340 <!-- Nightlife icon if bars are available --> 3341 3342 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 3343 3344 3345 <!-- Pharmacy icon if pharmacies are available --> 3346 3347 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 3348 3349 3350 <!-- Supermarket icon if supermarkets are available --> 3351 3352 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 3353 3354 3355 <!-- Museum icon if museums are available --> 3356 3357 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (4)"></i> 3358 3359 3360 <span class="toggle-icon" id="toggle-86" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3361</div> 3362 <ul class="amenities-list" id="amenities-86"> 3363 <!-- Amenities will be dynamically loaded here --> 3364 <li class="loading">Loading amenities...</li> 3365 </ul> 3366 </li> 3367 3368 <li class="station-item"> 3369 <div class="station-header" onclick="toggleAmenities('140')"> 3370 <!-- Display circles for each metro line --> 3371 3372 3373 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 3374 3375 <strong>LAUREL MARC</strong> 3376 3377 <!-- Hotel icon if hotels are available --> 3378 3379 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 3380 3381 3382 <!-- Coffee shop icon if coffee shops are available --> 3383 3384 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i> 3385 3386 3387 <!-- Restaurant icon if restaurants are available --> 3388 3389 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (13)"></i> 3390 3391 3392 <!-- Nightlife icon if bars are available --> 3393 3394 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 3395 3396 3397 <!-- Pharmacy icon if pharmacies are available --> 3398 3399 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 3400 3401 3402 <!-- Supermarket icon if supermarkets are available --> 3403 3404 3405 <!-- Museum icon if museums are available --> 3406 3407 3408 <span class="toggle-icon" id="toggle-140" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3409</div> 3410 <ul class="amenities-list" id="amenities-140"> 3411 <!-- Amenities will be dynamically loaded here --> 3412 <li class="loading">Loading amenities...</li> 3413 </ul> 3414 </li> 3415 3416 <li class="station-item"> 3417 <div class="station-header" onclick="toggleAmenities('139')"> 3418 <!-- Display circles for each metro line --> 3419 3420
3421 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 3422 3423 <strong>LAUREL RACETRACK MARC</strong> 3424 3425 <!-- Hotel icon if hotels are available --> 3426 3427 3428 <!-- Coffee shop icon if coffee shops are available --> 3429 3430 3431 <!-- Restaurant icon if restaurants are available --> 3432 3433 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 3434 3435 3436 <!-- Nightlife icon if bars are available --> 3437 3438 3439 <!-- Pharmacy icon if pharmacies are available --> 3440 3441 3442 <!-- Supermarket icon if supermarkets are available --> 3443 3444 3445 <!-- Museum icon if museums are available --> 3446 3447 3448 <span class="toggle-icon" id="toggle-139" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3449</div> 3450 <ul class="amenities-list" id="amenities-139"> 3451 <!-- Amenities will be dynamically loaded here --> 3452 <li class="loading">Loading amenities...</li> 3453 </ul> 3454 </li> 3455 3456 <li class="station-item"> 3457 <div class="station-header" onclick="toggleAmenities('36')"> 3458 <!-- Display circles for each metro line --> 3459 3460 3461 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 3462 3463 3464 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 3465 3466 3467 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 3468 3469 3470 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 3471 3472 3473 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 3474 3475 <strong>L'ENFANT PLAZA METRO STATION</strong> 3476 3477 <!-- Hotel icon if hotels are available --> 3478 3479 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i> 3480 3481 3482 <!-- Coffee shop icon if coffee shops are available --> 3483 3484 3485 <!-- Restaurant icon if restaurants are available --> 3486 3487 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (27)"></i> 3488 3489 3490 <!-- Nightlife icon if bars are available --> 3491 3492 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i> 3493 3494 3495 <!-- Pharmacy icon if pharmacies are available --> 3496 3497 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 3498 3499 3500 <!-- Supermarket icon if supermarkets are available --> 3501 3502 3503 <!-- Museum icon if museums are available --> 3504 3505 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 3506 3507 3508 <span class="toggle-icon" id="toggle-36" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3509</div> 3510 <ul class="amenities-list" id="amenities-36"> 3511 <!-- Amenities will be dynamically loaded here --> 3512 <li class="loading">Loading amenities...</li> 3513 </ul> 3514 </li> 3515 3516 <li class="station-item"> 3517 <div class="station-header" onclick="toggleAmenities('99')"> 3518 <!-- Display circles for each metro line --> 3519 3520 3521 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 3522 3523 <strong>L'ENFANT VRE</strong> 3524 3525 <!-- Hotel icon if hotels are available --> 3526 3527 3528 <!-- Coffee shop icon if coffee shops are available --> 3529 3530 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 3531 3532 3533 <!-- Restaurant icon if restaurants are available --> 3534 3535 3536 <!-- Nightlife icon if bars are available --> 3537 3538 3539 <!-- Pharmacy icon if pharmacies are available --> 3540 3541 3542 <!-- Supermarket icon if supermarkets are available --> 3543 3544 3545 <!-- Museum icon if museums are available --> 3546 3547 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 3548 3549 3550 <span class="toggle-icon" id="toggle-99" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3551</div> 3552 <ul class="amenities-list" id="amenities-99"> 3553 <!-- Amenities will be dynamically loaded here --> 3554 <li class="loading">Loading amenities...</li> 3555 </ul> 3556 </li> 3557 3558 <li class="station-item"> 3559 <div class="station-header" onclick="toggleAmenities('105')"> 3560 <!-- Display circles for each metro line --> 3561 3562
3563 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 3564 3565 <strong>LORTON VRE</strong> 3566 3567 <!-- Hotel icon if hotels are available --> 3568 3569 3570 <!-- Coffee shop icon if coffee shops are available --> 3571 3572 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i> 3573 3574 3575 <!-- Restaurant icon if restaurants are available --> 3576 3577 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 3578 3579 3580 <!-- Nightlife icon if bars are available --> 3581 3582 3583 <!-- Pharmacy icon if pharmacies are available --> 3584 3585 3586 <!-- Supermarket icon if supermarkets are available --> 3587 3588 3589 <!-- Museum icon if museums are available --> 3590 3591 3592 <span class="toggle-icon" id="toggle-105" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3593</div> 3594 <ul class="amenities-list" id="amenities-105"> 3595 <!-- Amenities will be dynamically loaded here --> 3596 <li class="loading">Loading amenities...</li> 3597 </ul> 3598 </li> 3599 3600 <li class="station-item"> 3601 <div class="station-header" onclick="toggleAmenities('101')"> 3602 <!-- Display circles for each metro line --> 3603 3604 3605 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 3606 3607 <strong>MANASSAS PARK VRE</strong> 3608 3609 <!-- Hotel icon if hotels are available --> 3610 3611 3612 <!-- Coffee shop icon if coffee shops are available --> 3613 3614 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 3615 3616 3617 <!-- Restaurant icon if restaurants are available --> 3618 3619 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 3620 3621 3622 <!-- Nightlife icon if bars are available --> 3623 3624 3625 <!-- Pharmacy icon if pharmacies are available --> 3626 3627 3628 <!-- Supermarket icon if supermarkets are available --> 3629 3630 3631 <!-- Museum icon if museums are available --> 3632 3633 3634 <span class="toggle-icon" id="toggle-101" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3635</div> 3636 <ul class="amenities-list" id="amenities-101"> 3637 <!-- Amenities will be dynamically loaded here --> 3638 <li class="loading">Loading amenities...</li> 3639 </ul> 3640 </li> 3641 3642 <li class="station-item"> 3643 <div class="station-header" onclick="toggleAmenities('100')"> 3644 <!-- Display circles for each metro line --> 3645 3646 3647 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 3648 3649 <strong>MANASSAS VRE</strong> 3650 3651 <!-- Hotel icon if hotels are available --> 3652 3653 3654 <!-- Coffee shop icon if coffee shops are available --> 3655 3656 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 3657 3658 3659 <!-- Restaurant icon if restaurants are available --> 3660 3661 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (20)"></i> 3662 3663 3664 <!-- Nightlife icon if bars are available --> 3665 3666 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (7)"></i> 3667 3668 3669 <!-- Pharmacy icon if pharmacies are available --> 3670 3671 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 3672 3673 3674 <!-- Supermarket icon if supermarkets are available --> 3675 3676 3677 <!-- Museum icon if museums are available --> 3678 3679 3680 <span class="toggle-icon" id="toggle-100" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3681</div> 3682 <ul class="amenities-list" id="amenities-100"> 3683 <!-- Amenities will be dynamically loaded here --> 3684 <li class="loading">Loading amenities...</li> 3685 </ul> 3686 </li> 3687 3688 <li class="station-item"> 3689 <div class="station-header" onclick="toggleAmenities('97')"> 3690 <!-- Display circles for each metro line --> 3691 3692
3693 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 3694 3695 <strong>MCLEAN METRO STATION</strong> 3696 3697 <!-- Hotel icon if hotels are available --> 3698 3699 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i> 3700 3701 3702 <!-- Coffee shop icon if coffee shops are available --> 3703 3704 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 3705 3706 3707 <!-- Restaurant icon if restaurants are available --> 3708 3709 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i> 3710 3711 3712 <!-- Nightlife icon if bars are available --> 3713 3714 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 3715 3716 3717 <!-- Pharmacy icon if pharmacies are available --> 3718 3719 3720 <!-- Supermarket icon if supermarkets are available --> 3721 3722 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 3723 3724 3725 <!-- Museum icon if museums are available --> 3726 3727 3728 <span class="toggle-icon" id="toggle-97" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3729</div> 3730 <ul class="amenities-list" id="amenities-97"> 3731 <!-- Amenities will be dynamically loaded here --> 3732 <li class="loading">Loading amenities...</li> 3733 </ul> 3734 </li> 3735 3736 <li class="station-item"> 3737 <div class="station-header" onclick="toggleAmenities('15')"> 3738 <!-- Display circles for each metro line --> 3739 3740 3741 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 3742 3743 3744 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 3745 3746 3747 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 3748 3749 <strong>MCPHERSON SQ METRO STATION</strong> 3750 3751 <!-- Hotel icon if hotels are available --> 3752 3753 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (16)"></i> 3754 3755 3756 <!-- Coffee shop icon if coffee shops are available --> 3757 3758 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i> 3759 3760 3761 <!-- Restaurant icon if restaurants are available --> 3762 3763 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i> 3764 3765 3766 <!-- Nightlife icon if bars are available --> 3767 3768 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (8)"></i> 3769 3770 3771 <!-- Pharmacy icon if pharmacies are available --> 3772 3773 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 3774 3775 3776 <!-- Supermarket icon if supermarkets are available --> 3777 3778 3779 <!-- Museum icon if museums are available --> 3780 3781 3782 <span class="toggle-icon" id="toggle-15" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3783</div> 3784 <ul class="amenities-list" id="amenities-15"> 3785 <!-- Amenities will be dynamically loaded here --> 3786 <li class="loading">Loading amenities...</li> 3787 </ul> 3788 </li> 3789 3790 <li class="station-item"> 3791 <div class="station-header" onclick="toggleAmenities('56')"> 3792 <!-- Display circles for each metro line --> 3793 3794 3795 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 3796 3797 <strong>MEDICAL CENTER METRO STATION</strong> 3798 3799 <!-- Hotel icon if hotels are available --> 3800 3801 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i> 3802 3803 3804 <!-- Coffee shop icon if coffee shops are available --> 3805 3806 3807 <!-- Restaurant icon if restaurants are available --> 3808 3809 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 3810 3811 3812 <!-- Nightlife icon if bars are available --> 3813 3814 3815 <!-- Pharmacy icon if pharmacies are available --> 3816 3817 3818 <!-- Supermarket icon if supermarkets are available --> 3819 3820 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 3821 3822 3823 <!-- Museum icon if museums are available --> 3824 3825 3826 <span class="toggle-icon" id="toggle-56" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3827</div> 3828 <ul class="amenities-list" id="amenities-56"> 3829 <!-- Amenities will be dynamically loaded here --> 3830 <li class="loading">Loading amenities...</li> 3831 </ul> 3832 </li> 3833 3834 <li class="station-item"> 3835 <div class="station-header" onclick="toggleAmenities('3')"> 3836 <!-- Display circles for each metro line --> 3837 3838
3839 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 3840 3841 3842 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 3843 3844 3845 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 3846 3847 3848 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 3849 3850 <strong>METRO CENTER METRO STATION</strong> 3851 3852 <!-- Hotel icon if hotels are available --> 3853 3854 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i> 3855 3856 3857 <!-- Coffee shop icon if coffee shops are available --> 3858 3859 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (9)"></i> 3860 3861 3862 <!-- Restaurant icon if restaurants are available --> 3863 3864 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (24)"></i> 3865 3866 3867 <!-- Nightlife icon if bars are available --> 3868 3869 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (8)"></i> 3870 3871 3872 <!-- Pharmacy icon if pharmacies are available --> 3873 3874 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 3875 3876 3877 <!-- Supermarket icon if supermarkets are available --> 3878 3879 3880 <!-- Museum icon if museums are available --> 3881 3882 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 3883 3884 3885 <span class="toggle-icon" id="toggle-3" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3886</div> 3887 <ul class="amenities-list" id="amenities-3"> 3888 <!-- Amenities will be dynamically loaded here --> 3889 <li class="loading">Loading amenities...</li> 3890 </ul> 3891 </li> 3892 3893 <li class="station-item"> 3894 <div class="station-header" onclick="toggleAmenities('143')"> 3895 <!-- Display circles for each metro line --> 3896 3897 3898 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 3899 3900 <strong>METROPOLITAN GROVE MARC</strong> 3901 3902 <!-- Hotel icon if hotels are available --> 3903 3904 3905 <!-- Coffee shop icon if coffee shops are available --> 3906 3907 3908 <!-- Restaurant icon if restaurants are available --> 3909 3910 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 3911 3912 3913 <!-- Nightlife icon if bars are available --> 3914 3915 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 3916 3917 3918 <!-- Pharmacy icon if pharmacies are available --> 3919 3920 3921 <!-- Supermarket icon if supermarkets are available --> 3922 3923 3924 <!-- Museum icon if museums are available --> 3925 3926 3927 <span class="toggle-icon" id="toggle-143" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3928</div> 3929 <ul class="amenities-list" id="amenities-143"> 3930 <!-- Amenities will be dynamically loaded here --> 3931 <li class="loading">Loading amenities...</li> 3932 </ul> 3933 </li> 3934 3935 <li class="station-item"> 3936 <div class="station-header" onclick="toggleAmenities('30')"> 3937 <!-- Display circles for each metro line --> 3938 3939 3940 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 3941 3942 <strong>MINNESOTA AVE METRO STATION</strong> 3943 3944 <!-- Hotel icon if hotels are available --> 3945 3946 3947 <!-- Coffee shop icon if coffee shops are available --> 3948 3949 3950 <!-- Restaurant icon if restaurants are available --> 3951 3952 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 3953 3954 3955 <!-- Nightlife icon if bars are available --> 3956 3957 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 3958 3959 3960 <!-- Pharmacy icon if pharmacies are available --> 3961 3962 3963 <!-- Supermarket icon if supermarkets are available --> 3964 3965 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 3966 3967 3968 <!-- Museum icon if museums are available --> 3969 3970 3971 <span class="toggle-icon" id="toggle-30" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 3972</div> 3973 <ul class="amenities-list" id="amenities-30"> 3974 <!-- Amenities will be dynamically loaded here --> 3975 <li class="loading">Loading amenities...</li> 3976 </ul> 3977 </li> 3978 3979 <li class="station-item"> 3980 <div class="station-header" onclick="toggleAmenities('144')"> 3981 <!-- Display circles for each metro line --> 3982 3983
3984 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 3985 3986 <strong>MONOCACY MARC</strong> 3987 3988 <!-- Hotel icon if hotels are available --> 3989 3990 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 3991 3992 3993 <!-- Coffee shop icon if coffee shops are available --> 3994 3995 3996 <!-- Restaurant icon if restaurants are available --> 3997 3998 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i> 3999 4000 4001 <!-- Nightlife icon if bars are available --> 4002 4003 4004 <!-- Pharmacy icon if pharmacies are available --> 4005 4006 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4007 4008 4009 <!-- Supermarket icon if supermarkets are available --> 4010 4011 4012 <!-- Museum icon if museums are available --> 4013 4014 4015 <span class="toggle-icon" id="toggle-144" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4016</div> 4017 <ul class="amenities-list" id="amenities-144"> 4018 <!-- Amenities will be dynamically loaded here --> 4019 <li class="loading">Loading amenities...</li> 4020 </ul> 4021 </li> 4022 4023 <li class="station-item"> 4024 <div class="station-header" onclick="toggleAmenities('51')"> 4025 <!-- Display circles for each metro line --> 4026 4027 4028 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 4029 4030 4031 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 4032 4033 <strong>MORGAN BOULEVARD METRO STATION</strong> 4034 4035 <!-- Hotel icon if hotels are available --> 4036 4037 4038 <!-- Coffee shop icon if coffee shops are available --> 4039 4040 4041 <!-- Restaurant icon if restaurants are available --> 4042 4043 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 4044 4045 4046 <!-- Nightlife icon if bars are available --> 4047 4048 4049 <!-- Pharmacy icon if pharmacies are available --> 4050 4051 4052 <!-- Supermarket icon if supermarkets are available --> 4053 4054 4055 <!-- Museum icon if museums are available --> 4056 4057 4058 <span class="toggle-icon" id="toggle-51" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4059</div> 4060 <ul class="amenities-list" id="amenities-51"> 4061 <!-- Amenities will be dynamically loaded here --> 4062 <li class="loading">Loading amenities...</li> 4063 </ul> 4064 </li> 4065 4066 <li class="station-item"> 4067 <div class="station-header" onclick="toggleAmenities('1')"> 4068 <!-- Display circles for each metro line --> 4069 4070 4071 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 4072 4073 4074 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 4075 4076 <strong>MT VERNON SQ/7TH ST-CONVENTION CENTER METRO STATION</strong> 4077 4078 <!-- Hotel icon if hotels are available --> 4079 4080 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (14)"></i> 4081 4082 4083 <!-- Coffee shop icon if coffee shops are available --> 4084 4085 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (12)"></i> 4086 4087 4088 <!-- Restaurant icon if restaurants are available --> 4089 4090 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (47)"></i> 4091 4092 4093 <!-- Nightlife icon if bars are available --> 4094 4095 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (10)"></i> 4096 4097 4098 <!-- Pharmacy icon if pharmacies are available --> 4099 4100 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i> 4101 4102 4103 <!-- Supermarket icon if supermarkets are available --> 4104 4105 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4106 4107 4108 <!-- Museum icon if museums are available --> 4109 4110 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 4111 4112 4113 <span class="toggle-icon" id="toggle-1" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4114</div> 4115 <ul class="amenities-list" id="amenities-1"> 4116 <!-- Amenities will be dynamically loaded here --> 4117 <li class="loading">Loading amenities...</li> 4118 </ul> 4119 </li> 4120 4121 <li class="station-item"> 4122 <div class="station-header" onclick="toggleAmenities('145')"> 4123 <!-- Display circles for each metro line --> 4124 4125
4126 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 4127 4128 <strong>MUIRKIRK MARC</strong> 4129 4130 <!-- Hotel icon if hotels are available --> 4131 4132 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 4133 4134 4135 <!-- Coffee shop icon if coffee shops are available --> 4136 4137 4138 <!-- Restaurant icon if restaurants are available --> 4139 4140 4141 <!-- Nightlife icon if bars are available --> 4142 4143 4144 <!-- Pharmacy icon if pharmacies are available --> 4145 4146 4147 <!-- Supermarket icon if supermarkets are available --> 4148 4149 4150 <!-- Museum icon if museums are available --> 4151 4152 4153 <span class="toggle-icon" id="toggle-145" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4154</div> 4155 <ul class="amenities-list" id="amenities-145"> 4156 <!-- Amenities will be dynamically loaded here --> 4157 <li class="loading">Loading amenities...</li> 4158 </ul> 4159 </li> 4160 4161 <li class="station-item"> 4162 <div class="station-header" onclick="toggleAmenities('9')"> 4163 <!-- Display circles for each metro line --> 4164 4165 4166 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 4167 4168 <strong>NAVY YARD METRO STATION</strong> 4169 4170 <!-- Hotel icon if hotels are available --> 4171 4172 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (8)"></i> 4173 4174 4175 <!-- Coffee shop icon if coffee shops are available --> 4176 4177 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i> 4178 4179 4180 <!-- Restaurant icon if restaurants are available --> 4181 4182 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (38)"></i> 4183 4184 4185 <!-- Nightlife icon if bars are available --> 4186 4187 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (11)"></i> 4188 4189 4190 <!-- Pharmacy icon if pharmacies are available --> 4191 4192 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4193 4194 4195 <!-- Supermarket icon if supermarkets are available --> 4196 4197 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 4198 4199 4200 <!-- Museum icon if museums are available --> 4201 4202 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 4203 4204 4205 <span class="toggle-icon" id="toggle-9" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4206</div> 4207 <ul class="amenities-list" id="amenities-9"> 4208 <!-- Amenities will be dynamically loaded here --> 4209 <li class="loading">Loading amenities...</li> 4210 </ul> 4211 </li> 4212 4213 <li class="station-item"> 4214 <div class="station-header" onclick="toggleAmenities('45')"> 4215 <!-- Display circles for each metro line --> 4216 4217 4218 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 4219 4220 <strong>NAYLOR ROAD METRO STATION</strong> 4221 4222 <!-- Hotel icon if hotels are available --> 4223 4224 4225 <!-- Coffee shop icon if coffee shops are available --> 4226 4227 4228 <!-- Restaurant icon if restaurants are available --> 4229 4230 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i> 4231 4232 4233 <!-- Nightlife icon if bars are available --> 4234 4235 4236 <!-- Pharmacy icon if pharmacies are available --> 4237 4238 4239 <!-- Supermarket icon if supermarkets are available --> 4240 4241 4242 <!-- Museum icon if museums are available --> 4243 4244 4245 <span class="toggle-icon" id="toggle-45" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4246</div> 4247 <ul class="amenities-list" id="amenities-45"> 4248 <!-- Amenities will be dynamically loaded here --> 4249 <li class="loading">Loading amenities...</li> 4250 </ul> 4251 </li> 4252 4253 <li class="station-item"> 4254 <div class="station-header" onclick="toggleAmenities('146')"> 4255 <!-- Display circles for each metro line --> 4256 4257
4258 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 4259 4260 <strong>NEW CARROLLTON MARC</strong> 4261 4262 <!-- Hotel icon if hotels are available --> 4263 4264 4265 <!-- Coffee shop icon if coffee shops are available --> 4266 4267 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 4268 4269 4270 <!-- Restaurant icon if restaurants are available --> 4271 4272 4273 <!-- Nightlife icon if bars are available --> 4274 4275 4276 <!-- Pharmacy icon if pharmacies are available --> 4277 4278 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4279 4280 4281 <!-- Supermarket icon if supermarkets are available --> 4282 4283 4284 <!-- Museum icon if museums are available --> 4285 4286 4287 <span class="toggle-icon" id="toggle-146" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4288</div> 4289 <ul class="amenities-list" id="amenities-146"> 4290 <!-- Amenities will be dynamically loaded here --> 4291 <li class="loading">Loading amenities...</li> 4292 </ul> 4293 </li> 4294 4295 <li class="station-item"> 4296 <div class="station-header" onclick="toggleAmenities('54')"> 4297 <!-- Display circles for each metro line --> 4298 4299 4300 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 4301 4302 <strong>NEW CARROLLTON METRO STATION</strong> 4303 4304 <!-- Hotel icon if hotels are available --> 4305 4306 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 4307 4308 4309 <!-- Coffee shop icon if coffee shops are available --> 4310 4311 4312 <!-- Restaurant icon if restaurants are available --> 4313 4314 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 4315 4316 4317 <!-- Nightlife icon if bars are available --> 4318 4319 4320 <!-- Pharmacy icon if pharmacies are available --> 4321 4322 4323 <!-- Supermarket icon if supermarkets are available --> 4324 4325 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4326 4327 4328 <!-- Museum icon if museums are available --> 4329 4330 4331 <span class="toggle-icon" id="toggle-54" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4332</div> 4333 <ul class="amenities-list" id="amenities-54"> 4334 <!-- Amenities will be dynamically loaded here --> 4335 <li class="loading">Loading amenities...</li> 4336 </ul> 4337 </li> 4338 4339 <li class="station-item"> 4340 <div class="station-header" onclick="toggleAmenities('6')"> 4341 <!-- Display circles for each metro line --> 4342 4343 4344 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 4345 4346 <strong>NOMA-GALLAUDET U METRO STATION</strong> 4347 4348 <!-- Hotel icon if hotels are available --> 4349 4350 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (12)"></i> 4351 4352 4353 <!-- Coffee shop icon if coffee shops are available --> 4354 4355 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i> 4356 4357 4358 <!-- Restaurant icon if restaurants are available --> 4359 4360 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (43)"></i> 4361 4362 4363 <!-- Nightlife icon if bars are available --> 4364 4365 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (13)"></i> 4366 4367 4368 <!-- Pharmacy icon if pharmacies are available --> 4369 4370 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4371 4372 4373 <!-- Supermarket icon if supermarkets are available --> 4374 4375 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 4376 4377 4378 <!-- Museum icon if museums are available --> 4379 4380 4381 <span class="toggle-icon" id="toggle-6" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4382</div> 4383 <ul class="amenities-list" id="amenities-6"> 4384 <!-- Amenities will be dynamically loaded here --> 4385 <li class="loading">Loading amenities...</li> 4386 </ul> 4387 </li> 4388 4389 <li class="station-item"> 4390 <div class="station-header" onclick="toggleAmenities('61')"> 4391 <!-- Display circles for each metro line --> 4392 4393
4394 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 4395 4396 <strong>NORTH BETHESDA METRO STATION</strong> 4397 4398 <!-- Hotel icon if hotels are available --> 4399 4400 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 4401 4402 4403 <!-- Coffee shop icon if coffee shops are available --> 4404 4405 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i> 4406 4407 4408 <!-- Restaurant icon if restaurants are available --> 4409 4410 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (45)"></i> 4411 4412 4413 <!-- Nightlife icon if bars are available --> 4414 4415 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 4416 4417 4418 <!-- Pharmacy icon if pharmacies are available --> 4419 4420 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4421 4422 4423 <!-- Supermarket icon if supermarkets are available --> 4424 4425 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (6)"></i> 4426 4427 4428 <!-- Museum icon if museums are available --> 4429 4430 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 4431 4432 4433 <span class="toggle-icon" id="toggle-61" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4434</div> 4435 <ul class="amenities-list" id="amenities-61"> 4436 <!-- Amenities will be dynamically loaded here --> 4437 <li class="loading">Loading amenities...</li> 4438 </ul> 4439 </li> 4440 4441 <li class="station-item"> 4442 <div class="station-header" onclick="toggleAmenities('147')"> 4443 <!-- Display circles for each metro line --> 4444 4445 4446 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 4447 4448 <strong>ODENTON MARC</strong> 4449 4450 <!-- Hotel icon if hotels are available --> 4451 4452 4453 <!-- Coffee shop icon if coffee shops are available --> 4454 4455 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 4456 4457 4458 <!-- Restaurant icon if restaurants are available --> 4459 4460 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (6)"></i> 4461 4462 4463 <!-- Nightlife icon if bars are available --> 4464 4465 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 4466 4467 4468 <!-- Pharmacy icon if pharmacies are available --> 4469 4470 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4471 4472 4473 <!-- Supermarket icon if supermarkets are available --> 4474 4475 4476 <!-- Museum icon if museums are available --> 4477 4478 4479 <span class="toggle-icon" id="toggle-147" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4480</div> 4481 <ul class="amenities-list" id="amenities-147"> 4482 <!-- Amenities will be dynamically loaded here --> 4483 <li class="loading">Loading amenities...</li> 4484 </ul> 4485 </li> 4486 4487 <li class="station-item"> 4488 <div class="station-header" onclick="toggleAmenities('76')"> 4489 <!-- Display circles for each metro line --> 4490 4491 4492 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 4493 4494 4495 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 4496 4497 <strong>PENTAGON CITY METRO STATION</strong> 4498 4499 <!-- Hotel icon if hotels are available --> 4500 4501 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 4502 4503 4504 <!-- Coffee shop icon if coffee shops are available --> 4505 4506 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (8)"></i> 4507 4508 4509 <!-- Restaurant icon if restaurants are available --> 4510 4511 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (31)"></i> 4512 4513 4514 <!-- Nightlife icon if bars are available --> 4515 4516 4517 <!-- Pharmacy icon if pharmacies are available --> 4518 4519 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i> 4520 4521 4522 <!-- Supermarket icon if supermarkets are available --> 4523 4524 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (3)"></i> 4525 4526 4527 <!-- Museum icon if museums are available --> 4528 4529 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 4530 4531 4532 <span class="toggle-icon" id="toggle-76" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4533</div> 4534 <ul class="amenities-list" id="amenities-76"> 4535 <!-- Amenities will be dynamically loaded here --> 4536 <li class="loading">Loading amenities...</li> 4537 </ul> 4538 </li> 4539 4540 <li class="station-item"> 4541 <div class="station-header" onclick="toggleAmenities('73')"> 4542 <!-- Display circles for each metro line --> 4543 4544
4545 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 4546 4547 4548 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 4549 4550 <strong>PENTAGON METRO STATION</strong> 4551 4552 <!-- Hotel icon if hotels are available --> 4553 4554 4555 <!-- Coffee shop icon if coffee shops are available --> 4556 4557 4558 <!-- Restaurant icon if restaurants are available --> 4559 4560 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 4561 4562 4563 <!-- Nightlife icon if bars are available --> 4564 4565 4566 <!-- Pharmacy icon if pharmacies are available --> 4567 4568 4569 <!-- Supermarket icon if supermarkets are available --> 4570 4571 4572 <!-- Museum icon if museums are available --> 4573 4574 4575 <span class="toggle-icon" id="toggle-73" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4576</div> 4577 <ul class="amenities-list" id="amenities-73"> 4578 <!-- Amenities will be dynamically loaded here --> 4579 <li class="loading">Loading amenities...</li> 4580 </ul> 4581 </li> 4582 4583 <li class="station-item"> 4584 <div class="station-header" onclick="toggleAmenities('11')"> 4585 <!-- Display circles for each metro line --> 4586 4587 4588 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 4589 4590 4591 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 4592 4593 4594 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 4595 4596 <strong>POTOMAC AVE METRO STATION</strong> 4597 4598 <!-- Hotel icon if hotels are available --> 4599 4600 4601 <!-- Coffee shop icon if coffee shops are available --> 4602 4603 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 4604 4605 4606 <!-- Restaurant icon if restaurants are available --> 4607 4608 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (13)"></i> 4609 4610 4611 <!-- Nightlife icon if bars are available --> 4612 4613 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 4614 4615 4616 <!-- Pharmacy icon if pharmacies are available --> 4617 4618 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4619 4620 4621 <!-- Supermarket icon if supermarkets are available --> 4622 4623 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4624 4625 4626 <!-- Museum icon if museums are available --> 4627 4628 4629 <span class="toggle-icon" id="toggle-11" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4630</div> 4631 <ul class="amenities-list" id="amenities-11"> 4632 <!-- Amenities will be dynamically loaded here --> 4633 <li class="loading">Loading amenities...</li> 4634 </ul> 4635 </li> 4636 4637 <li class="station-item"> 4638 <div class="station-header" onclick="toggleAmenities('106')"> 4639 <!-- Display circles for each metro line --> 4640 4641 4642 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 4643 4644 <strong>QUANTICO VRE</strong> 4645 4646 <!-- Hotel icon if hotels are available --> 4647 4648 4649 <!-- Coffee shop icon if coffee shops are available --> 4650 4651 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 4652 4653 4654 <!-- Restaurant icon if restaurants are available --> 4655 4656 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (7)"></i> 4657 4658 4659 <!-- Nightlife icon if bars are available --> 4660 4661 4662 <!-- Pharmacy icon if pharmacies are available --> 4663 4664 4665 <!-- Supermarket icon if supermarkets are available --> 4666 4667 4668 <!-- Museum icon if museums are available --> 4669 4670 4671 <span class="toggle-icon" id="toggle-106" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4672</div> 4673 <ul class="amenities-list" id="amenities-106"> 4674 <!-- Amenities will be dynamically loaded here --> 4675 <li class="loading">Loading amenities...</li> 4676 </ul> 4677 </li> 4678 4679 <li class="station-item"> 4680 <div class="station-header" onclick="toggleAmenities('92')"> 4681 <!-- Display circles for each metro line --> 4682 4683
4684 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 4685 4686 <strong>RESTON TOWN CENTER METRO STATION</strong> 4687 4688 <!-- Hotel icon if hotels are available --> 4689 4690 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i> 4691 4692 4693 <!-- Coffee shop icon if coffee shops are available --> 4694 4695 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 4696 4697 4698 <!-- Restaurant icon if restaurants are available --> 4699 4700 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (38)"></i> 4701 4702 4703 <!-- Nightlife icon if bars are available --> 4704 4705 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 4706 4707 4708 <!-- Pharmacy icon if pharmacies are available --> 4709 4710 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4711 4712 4713 <!-- Supermarket icon if supermarkets are available --> 4714 4715 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4716 4717 4718 <!-- Museum icon if museums are available --> 4719 4720 4721 <span class="toggle-icon" id="toggle-92" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4722</div> 4723 <ul class="amenities-list" id="amenities-92"> 4724 <!-- Amenities will be dynamically loaded here --> 4725 <li class="loading">Loading amenities...</li> 4726 </ul> 4727 </li> 4728 4729 <li class="station-item"> 4730 <div class="station-header" onclick="toggleAmenities('27')"> 4731 <!-- Display circles for each metro line --> 4732 4733 4734 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 4735 4736 <strong>RHODE ISLAND AVE METRO STATION</strong> 4737 4738 <!-- Hotel icon if hotels are available --> 4739 4740 4741 <!-- Coffee shop icon if coffee shops are available --> 4742 4743 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 4744 4745 4746 <!-- Restaurant icon if restaurants are available --> 4747 4748 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i> 4749 4750 4751 <!-- Nightlife icon if bars are available --> 4752 4753 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 4754 4755 4756 <!-- Pharmacy icon if pharmacies are available --> 4757 4758 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4759 4760 4761 <!-- Supermarket icon if supermarkets are available --> 4762 4763 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4764 4765 4766 <!-- Museum icon if museums are available --> 4767 4768 4769 <span class="toggle-icon" id="toggle-27" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4770</div> 4771 <ul class="amenities-list" id="amenities-27"> 4772 <!-- Amenities will be dynamically loaded here --> 4773 <li class="loading">Loading amenities...</li> 4774 </ul> 4775 </li> 4776 4777 <li class="station-item"> 4778 <div class="station-header" onclick="toggleAmenities('151')"> 4779 <!-- Display circles for each metro line --> 4780 4781 4782 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 4783 4784 <strong>RIVERDALE MARC</strong> 4785 4786 <!-- Hotel icon if hotels are available --> 4787 4788 4789 <!-- Coffee shop icon if coffee shops are available --> 4790 4791 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 4792 4793 4794 <!-- Restaurant icon if restaurants are available --> 4795 4796 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (12)"></i> 4797 4798 4799 <!-- Nightlife icon if bars are available --> 4800 4801 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 4802 4803 4804 <!-- Pharmacy icon if pharmacies are available --> 4805 4806 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 4807 4808 4809 <!-- Supermarket icon if supermarkets are available --> 4810 4811 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4812 4813 4814 <!-- Museum icon if museums are available --> 4815 4816 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 4817 4818 4819 <span class="toggle-icon" id="toggle-151" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4820</div> 4821 <ul class="amenities-list" id="amenities-151"> 4822 <!-- Amenities will be dynamically loaded here --> 4823 <li class="loading">Loading amenities...</li> 4824 </ul> 4825 </li> 4826 4827 <li class="station-item"> 4828 <div class="station-header" onclick="toggleAmenities('152')"> 4829 <!-- Display circles for each metro line --> 4830 4831
4832 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 4833 4834 <strong>ROCKVILLE MARC</strong> 4835 4836 <!-- Hotel icon if hotels are available --> 4837 4838 4839 <!-- Coffee shop icon if coffee shops are available --> 4840 4841 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 4842 4843 4844 <!-- Restaurant icon if restaurants are available --> 4845 4846 4847 <!-- Nightlife icon if bars are available --> 4848 4849 4850 <!-- Pharmacy icon if pharmacies are available --> 4851 4852 4853 <!-- Supermarket icon if supermarkets are available --> 4854 4855 4856 <!-- Museum icon if museums are available --> 4857 4858 4859 <span class="toggle-icon" id="toggle-152" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4860</div> 4861 <ul class="amenities-list" id="amenities-152"> 4862 <!-- Amenities will be dynamically loaded here --> 4863 <li class="loading">Loading amenities...</li> 4864 </ul> 4865 </li> 4866 4867 <li class="station-item"> 4868 <div class="station-header" onclick="toggleAmenities('58')"> 4869 <!-- Display circles for each metro line --> 4870 4871 4872 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 4873 4874 <strong>ROCKVILLE METRO STATION</strong> 4875 4876 <!-- Hotel icon if hotels are available --> 4877 4878 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 4879 4880 4881 <!-- Coffee shop icon if coffee shops are available --> 4882 4883 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 4884 4885 4886 <!-- Restaurant icon if restaurants are available --> 4887 4888 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (37)"></i> 4889 4890 4891 <!-- Nightlife icon if bars are available --> 4892 4893 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i> 4894 4895 4896 <!-- Pharmacy icon if pharmacies are available --> 4897 4898 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 4899 4900 4901 <!-- Supermarket icon if supermarkets are available --> 4902 4903 4904 <!-- Museum icon if museums are available --> 4905 4906 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (5)"></i> 4907 4908 4909 <span class="toggle-icon" id="toggle-58" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4910</div> 4911 <ul class="amenities-list" id="amenities-58"> 4912 <!-- Amenities will be dynamically loaded here --> 4913 <li class="loading">Loading amenities...</li> 4914 </ul> 4915 </li> 4916 4917 <li class="station-item"> 4918 <div class="station-header" onclick="toggleAmenities('80')"> 4919 <!-- Display circles for each metro line --> 4920 4921 4922 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 4923 4924 4925 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 4926 4927 4928 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 4929 4930 <strong>ROSSLYN METRO STATION</strong> 4931 4932 <!-- Hotel icon if hotels are available --> 4933 4934 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i> 4935 4936 4937 <!-- Coffee shop icon if coffee shops are available --> 4938 4939 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 4940 4941 4942 <!-- Restaurant icon if restaurants are available --> 4943 4944 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i> 4945 4946 4947 <!-- Nightlife icon if bars are available --> 4948 4949 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (4)"></i> 4950 4951 4952 <!-- Pharmacy icon if pharmacies are available --> 4953 4954 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 4955 4956 4957 <!-- Supermarket icon if supermarkets are available --> 4958 4959 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 4960 4961 4962 <!-- Museum icon if museums are available --> 4963 4964 4965 <span class="toggle-icon" id="toggle-80" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 4966</div> 4967 <ul class="amenities-list" id="amenities-80"> 4968 <!-- Amenities will be dynamically loaded here --> 4969 <li class="loading">Loading amenities...</li> 4970 </ul> 4971 </li> 4972 4973 <li class="station-item"> 4974 <div class="station-header" onclick="toggleAmenities('153')"> 4975 <!-- Display circles for each metro line --> 4976 4977
4978 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 4979 4980 <strong>SAVAGE MARC</strong> 4981 4982 <!-- Hotel icon if hotels are available --> 4983 4984 4985 <!-- Coffee shop icon if coffee shops are available --> 4986 4987 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 4988 4989 4990 <!-- Restaurant icon if restaurants are available --> 4991 4992 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 4993 4994 4995 <!-- Nightlife icon if bars are available --> 4996 4997 4998 <!-- Pharmacy icon if pharmacies are available --> 4999 5000 5001 <!-- Supermarket icon if supermarkets are available --> 5002 5003 5004 <!-- Museum icon if museums are available --> 5005 5006 5007 <span class="toggle-icon" id="toggle-153" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5008</div> 5009 <ul class="amenities-list" id="amenities-153"> 5010 <!-- Amenities will be dynamically loaded here --> 5011 <li class="loading">Loading amenities...</li> 5012 </ul> 5013 </li> 5014 5015 <li class="station-item"> 5016 <div class="station-header" onclick="toggleAmenities('154')"> 5017 <!-- Display circles for each metro line --> 5018 5019 5020 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 5021 5022 <strong>SEABROOK MARC</strong> 5023 5024 <!-- Hotel icon if hotels are available --> 5025 5026 5027 <!-- Coffee shop icon if coffee shops are available --> 5028 5029 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 5030 5031 5032 <!-- Restaurant icon if restaurants are available --> 5033 5034 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (5)"></i> 5035 5036 5037 <!-- Nightlife icon if bars are available --> 5038 5039 5040 <!-- Pharmacy icon if pharmacies are available --> 5041 5042 5043 <!-- Supermarket icon if supermarkets are available --> 5044 5045 5046 <!-- Museum icon if museums are available --> 5047 5048 5049 <span class="toggle-icon" id="toggle-154" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5050</div> 5051 <ul class="amenities-list" id="amenities-154"> 5052 <!-- Amenities will be dynamically loaded here --> 5053 <li class="loading">Loading amenities...</li> 5054 </ul> 5055 </li> 5056 5057 <li class="station-item"> 5058 <div class="station-header" onclick="toggleAmenities('62')"> 5059 <!-- Display circles for each metro line --> 5060 5061 5062 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5063 5064 <strong>SHADY GROVE METRO STATION</strong> 5065 5066 <!-- Hotel icon if hotels are available --> 5067 5068 5069 <!-- Coffee shop icon if coffee shops are available --> 5070 5071 5072 <!-- Restaurant icon if restaurants are available --> 5073 5074 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (4)"></i> 5075 5076 5077 <!-- Nightlife icon if bars are available --> 5078 5079 5080 <!-- Pharmacy icon if pharmacies are available --> 5081 5082 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5083 5084 5085 <!-- Supermarket icon if supermarkets are available --> 5086 5087 5088 <!-- Museum icon if museums are available --> 5089 5090 5091 <span class="toggle-icon" id="toggle-62" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5092</div> 5093 <ul class="amenities-list" id="amenities-62"> 5094 <!-- Amenities will be dynamically loaded here --> 5095 <li class="loading">Loading amenities...</li> 5096 </ul> 5097 </li> 5098 5099 <li class="station-item"> 5100 <div class="station-header" onclick="toggleAmenities('2')"> 5101 <!-- Display circles for each metro line --> 5102 5103 5104 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 5105 5106 <strong>SHAW METRO STATION</strong> 5107 5108 <!-- Hotel icon if hotels are available --> 5109 5110 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5111 5112 5113 <!-- Coffee shop icon if coffee shops are available --> 5114 5115 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i> 5116 5117 5118 <!-- Restaurant icon if restaurants are available --> 5119 5120 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (35)"></i> 5121 5122 5123 <!-- Nightlife icon if bars are available --> 5124 5125 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (21)"></i> 5126 5127 5128 <!-- Pharmacy icon if pharmacies are available --> 5129 5130 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5131 5132 5133 <!-- Supermarket icon if supermarkets are available --> 5134 5135 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5136 5137 5138 <!-- Museum icon if museums are available --> 5139 5140 5141 <span class="toggle-icon" id="toggle-2" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5142</div> 5143 <ul class="amenities-list" id="amenities-2"> 5144 <!-- Amenities will be dynamically loaded here --> 5145 <li class="loading">Loading amenities...</li> 5146 </ul> 5147 </li> 5148 5149 <li class="station-item"> 5150 <div class="station-header" onclick="toggleAmenities('66')"> 5151 <!-- Display circles for each metro line --> 5152 5153
5154 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5155 5156 <strong>SILVER SPRING METRO STATION</strong> 5157 5158 <!-- Hotel icon if hotels are available --> 5159 5160 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (5)"></i> 5161 5162 5163 <!-- Coffee shop icon if coffee shops are available --> 5164 5165 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (18)"></i> 5166 5167 5168 <!-- Restaurant icon if restaurants are available --> 5169 5170 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (45)"></i> 5171 5172 5173 <!-- Nightlife icon if bars are available --> 5174 5175 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (9)"></i> 5176 5177 5178 <!-- Pharmacy icon if pharmacies are available --> 5179 5180 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 5181 5182 5183 <!-- Supermarket icon if supermarkets are available --> 5184 5185 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (4)"></i> 5186 5187 5188 <!-- Museum icon if museums are available --> 5189 5190 5191 <span class="toggle-icon" id="toggle-66" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5192</div> 5193 <ul class="amenities-list" id="amenities-66"> 5194 <!-- Amenities will be dynamically loaded here --> 5195 <li class="loading">Loading amenities...</li> 5196 </ul> 5197 </li> 5198 5199 <li class="station-item"> 5200 <div class="station-header" onclick="toggleAmenities('35')"> 5201 <!-- Display circles for each metro line --> 5202 5203 5204 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 5205 5206 5207 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 5208 5209 5210 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 5211 5212 <strong>SMITHSONIAN METRO STATION</strong> 5213 5214 <!-- Hotel icon if hotels are available --> 5215 5216 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5217 5218 5219 <!-- Coffee shop icon if coffee shops are available --> 5220 5221 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 5222 5223 5224 <!-- Restaurant icon if restaurants are available --> 5225 5226 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i> 5227 5228 5229 <!-- Nightlife icon if bars are available --> 5230 5231 5232 <!-- Pharmacy icon if pharmacies are available --> 5233 5234 5235 <!-- Supermarket icon if supermarkets are available --> 5236 5237 5238 <!-- Museum icon if museums are available --> 5239 5240 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (7)"></i> 5241 5242 5243 <span class="toggle-icon" id="toggle-35" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5244</div> 5245 <ul class="amenities-list" id="amenities-35"> 5246 <!-- Amenities will be dynamically loaded here --> 5247 <li class="loading">Loading amenities...</li> 5248 </ul> 5249 </li> 5250 5251 <li class="station-item"> 5252 <div class="station-header" onclick="toggleAmenities('94')"> 5253 <!-- Display circles for each metro line --> 5254 5255 5256 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 5257 5258 <strong>SPRING HILL METRO STATION</strong> 5259 5260 <!-- Hotel icon if hotels are available --> 5261 5262 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (4)"></i> 5263 5264 5265 <!-- Coffee shop icon if coffee shops are available --> 5266 5267 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i> 5268 5269 5270 <!-- Restaurant icon if restaurants are available --> 5271 5272 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (21)"></i> 5273 5274 5275 <!-- Nightlife icon if bars are available --> 5276 5277 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 5278 5279 5280 <!-- Pharmacy icon if pharmacies are available --> 5281 5282 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5283 5284 5285 <!-- Supermarket icon if supermarkets are available --> 5286 5287 5288 <!-- Museum icon if museums are available --> 5289 5290 5291 <span class="toggle-icon" id="toggle-94" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5292</div> 5293 <ul class="amenities-list" id="amenities-94"> 5294 <!-- Amenities will be dynamically loaded here --> 5295 <li class="loading">Loading amenities...</li> 5296 </ul> 5297 </li> 5298 5299 <li class="station-item"> 5300 <div class="station-header" onclick="toggleAmenities('12')"> 5301 <!-- Display circles for each metro line --> 5302 5303
5304 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 5305 5306 5307 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 5308 5309 5310 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 5311 5312 <strong>STADIUM ARMORY METRO STATION</strong> 5313 5314 <!-- Hotel icon if hotels are available --> 5315 5316 5317 <!-- Coffee shop icon if coffee shops are available --> 5318 5319 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 5320 5321 5322 <!-- Restaurant icon if restaurants are available --> 5323 5324 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 5325 5326 5327 <!-- Nightlife icon if bars are available --> 5328 5329 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 5330 5331 5332 <!-- Pharmacy icon if pharmacies are available --> 5333 5334 5335 <!-- Supermarket icon if supermarkets are available --> 5336 5337 5338 <!-- Museum icon if museums are available --> 5339 5340 5341 <span class="toggle-icon" id="toggle-12" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5342</div> 5343 <ul class="amenities-list" id="amenities-12"> 5344 <!-- Amenities will be dynamically loaded here --> 5345 <li class="loading">Loading amenities...</li> 5346 </ul> 5347 </li> 5348 5349 <li class="station-item"> 5350 <div class="station-header" onclick="toggleAmenities('44')"> 5351 <!-- Display circles for each metro line --> 5352 5353 5354 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 5355 5356 <strong>SUITLAND METRO STATION</strong> 5357 5358 <!-- Hotel icon if hotels are available --> 5359 5360 5361 <!-- Coffee shop icon if coffee shops are available --> 5362 5363 5364 <!-- Restaurant icon if restaurants are available --> 5365 5366 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (1)"></i> 5367 5368 5369 <!-- Nightlife icon if bars are available --> 5370 5371 5372 <!-- Pharmacy icon if pharmacies are available --> 5373 5374 5375 <!-- Supermarket icon if supermarkets are available --> 5376 5377 5378 <!-- Museum icon if museums are available --> 5379 5380 5381 <span class="toggle-icon" id="toggle-44" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5382</div> 5383 <ul class="amenities-list" id="amenities-44"> 5384 <!-- Amenities will be dynamically loaded here --> 5385 <li class="loading">Loading amenities...</li> 5386 </ul> 5387 </li> 5388 5389 <li class="station-item"> 5390 <div class="station-header" onclick="toggleAmenities('24')"> 5391 <!-- Display circles for each metro line --> 5392 5393 5394 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5395 5396 <strong>TAKOMA METRO STATION</strong> 5397 5398 <!-- Hotel icon if hotels are available --> 5399 5400 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5401 5402 5403 <!-- Coffee shop icon if coffee shops are available --> 5404 5405 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (7)"></i> 5406 5407 5408 <!-- Restaurant icon if restaurants are available --> 5409 5410 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i> 5411 5412 5413 <!-- Nightlife icon if bars are available --> 5414 5415 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 5416 5417 5418 <!-- Pharmacy icon if pharmacies are available --> 5419 5420 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5421 5422 5423 <!-- Supermarket icon if supermarkets are available --> 5424 5425 5426 <!-- Museum icon if museums are available --> 5427 5428 5429 <span class="toggle-icon" id="toggle-24" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5430</div> 5431 <ul class="amenities-list" id="amenities-24"> 5432 <!-- Amenities will be dynamically loaded here --> 5433 <li class="loading">Loading amenities...</li> 5434 </ul> 5435 </li> 5436 5437 <li class="station-item"> 5438 <div class="station-header" onclick="toggleAmenities('25')"> 5439 <!-- Display circles for each metro line --> 5440 5441
5442 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5443 5444 <strong>TENLEYTOWN METRO STATION</strong> 5445 5446 <!-- Hotel icon if hotels are available --> 5447 5448 5449 <!-- Coffee shop icon if coffee shops are available --> 5450 5451 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i> 5452 5453 5454 <!-- Restaurant icon if restaurants are available --> 5455 5456 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (22)"></i> 5457 5458 5459 <!-- Nightlife icon if bars are available --> 5460 5461 5462 <!-- Pharmacy icon if pharmacies are available --> 5463 5464 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 5465 5466 5467 <!-- Supermarket icon if supermarkets are available --> 5468 5469 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5470 5471 5472 <!-- Museum icon if museums are available --> 5473 5474 5475 <span class="toggle-icon" id="toggle-25" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5476</div> 5477 <ul class="amenities-list" id="amenities-25"> 5478 <!-- Amenities will be dynamically loaded here --> 5479 <li class="loading">Loading amenities...</li> 5480 </ul> 5481 </li> 5482 5483 <li class="station-item"> 5484 <div class="station-header" onclick="toggleAmenities('60')"> 5485 <!-- Display circles for each metro line --> 5486 5487 5488 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5489 5490 <strong>TWINBROOK METRO STATION</strong> 5491 5492 <!-- Hotel icon if hotels are available --> 5493 5494 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 5495 5496 5497 <!-- Coffee shop icon if coffee shops are available --> 5498 5499 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 5500 5501 5502 <!-- Restaurant icon if restaurants are available --> 5503 5504 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i> 5505 5506 5507 <!-- Nightlife icon if bars are available --> 5508 5509 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 5510 5511 5512 <!-- Pharmacy icon if pharmacies are available --> 5513 5514 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 5515 5516 5517 <!-- Supermarket icon if supermarkets are available --> 5518 5519 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 5520 5521 5522 <!-- Museum icon if museums are available --> 5523 5524 5525 <span class="toggle-icon" id="toggle-60" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5526</div> 5527 <ul class="amenities-list" id="amenities-60"> 5528 <!-- Amenities will be dynamically loaded here --> 5529 <li class="loading">Loading amenities...</li> 5530 </ul> 5531 </li> 5532 5533 <li class="station-item"> 5534 <div class="station-header" onclick="toggleAmenities('96')"> 5535 <!-- Display circles for each metro line --> 5536 5537 5538 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 5539 5540 <strong>TYSONS METRO STATION</strong> 5541 5542 <!-- Hotel icon if hotels are available --> 5543 5544 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (7)"></i> 5545 5546 5547 <!-- Coffee shop icon if coffee shops are available --> 5548 5549 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (16)"></i> 5550 5551 5552 <!-- Restaurant icon if restaurants are available --> 5553 5554 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (33)"></i> 5555 5556 5557 <!-- Nightlife icon if bars are available --> 5558 5559 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 5560 5561 5562 <!-- Pharmacy icon if pharmacies are available --> 5563 5564 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5565 5566 5567 <!-- Supermarket icon if supermarkets are available --> 5568 5569 5570 <!-- Museum icon if museums are available --> 5571 5572 5573 <span class="toggle-icon" id="toggle-96" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5574</div> 5575 <ul class="amenities-list" id="amenities-96"> 5576 <!-- Amenities will be dynamically loaded here --> 5577 <li class="loading">Loading amenities...</li> 5578 </ul> 5579 </li> 5580 5581 <li class="station-item"> 5582 <div class="station-header" onclick="toggleAmenities('20')"> 5583 <!-- Display circles for each metro line --> 5584 5585
5586 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 5587 5588 <strong>U STREET METRO STATION</strong> 5589 5590 <!-- Hotel icon if hotels are available --> 5591 5592 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5593 5594 5595 <!-- Coffee shop icon if coffee shops are available --> 5596 5597 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 5598 5599 5600 <!-- Restaurant icon if restaurants are available --> 5601 5602 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (38)"></i> 5603 5604 5605 <!-- Nightlife icon if bars are available --> 5606 5607 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (31)"></i> 5608 5609 5610 <!-- Pharmacy icon if pharmacies are available --> 5611 5612 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (3)"></i> 5613 5614 5615 <!-- Supermarket icon if supermarkets are available --> 5616 5617 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 5618 5619 5620 <!-- Museum icon if museums are available --> 5621 5622 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 5623 5624 5625 <span class="toggle-icon" id="toggle-20" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5626</div> 5627 <ul class="amenities-list" id="amenities-20"> 5628 <!-- Amenities will be dynamically loaded here --> 5629 <li class="loading">Loading amenities...</li> 5630 </ul> 5631 </li> 5632 5633 <li class="station-item"> 5634 <div class="station-header" onclick="toggleAmenities('157')"> 5635 <!-- Display circles for each metro line --> 5636 5637 5638 <span class="line-circle" style="background-color: #8B4513;" title="MARC"></span> 5639 5640 <strong>UNION STATION MARC</strong> 5641 5642 <!-- Hotel icon if hotels are available --> 5643 5644 5645 <!-- Coffee shop icon if coffee shops are available --> 5646 5647 5648 <!-- Restaurant icon if restaurants are available --> 5649 5650 5651 <!-- Nightlife icon if bars are available --> 5652 5653 5654 <!-- Pharmacy icon if pharmacies are available --> 5655 5656 5657 <!-- Supermarket icon if supermarkets are available --> 5658 5659 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5660 5661 5662 <!-- Museum icon if museums are available --> 5663 5664 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 5665 5666 5667 <span class="toggle-icon" id="toggle-157" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5668</div> 5669 <ul class="amenities-list" id="amenities-157"> 5670 <!-- Amenities will be dynamically loaded here --> 5671 <li class="loading">Loading amenities...</li> 5672 </ul> 5673 </li> 5674 5675 <li class="station-item"> 5676 <div class="station-header" onclick="toggleAmenities('7')"> 5677 <!-- Display circles for each metro line --> 5678 5679 5680 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5681 5682 <strong>UNION STATION METRO STATION</strong> 5683 5684 <!-- Hotel icon if hotels are available --> 5685 5686 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (6)"></i> 5687 5688 5689 <!-- Coffee shop icon if coffee shops are available --> 5690 5691 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 5692 5693 5694 <!-- Restaurant icon if restaurants are available --> 5695 5696 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (29)"></i> 5697 5698 5699 <!-- Nightlife icon if bars are available --> 5700 5701 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (5)"></i> 5702 5703 5704 <!-- Pharmacy icon if pharmacies are available --> 5705 5706 5707 <!-- Supermarket icon if supermarkets are available --> 5708 5709 5710 <!-- Museum icon if museums are available --> 5711 5712 5713 <span class="toggle-icon" id="toggle-7" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5714</div> 5715 <ul class="amenities-list" id="amenities-7"> 5716 <!-- Amenities will be dynamically loaded here --> 5717 <li class="loading">Loading amenities...</li> 5718 </ul> 5719 </li> 5720 5721 <li class="station-item"> 5722 <div class="station-header" onclick="toggleAmenities('98')"> 5723 <!-- Display circles for each metro line --> 5724 5725
5726 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 5727 5728 <strong>UNION STATION VRE</strong> 5729 5730 <!-- Hotel icon if hotels are available --> 5731 5732 5733 <!-- Coffee shop icon if coffee shops are available --> 5734 5735 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 5736 5737 5738 <!-- Restaurant icon if restaurants are available --> 5739 5740 5741 <!-- Nightlife icon if bars are available --> 5742 5743 5744 <!-- Pharmacy icon if pharmacies are available --> 5745 5746 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5747 5748 5749 <!-- Supermarket icon if supermarkets are available --> 5750 5751 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5752 5753 5754 <!-- Museum icon if museums are available --> 5755 5756 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 5757 5758 5759 <span class="toggle-icon" id="toggle-98" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5760</div> 5761 <ul class="amenities-list" id="amenities-98"> 5762 <!-- Amenities will be dynamically loaded here --> 5763 <li class="loading">Loading amenities...</li> 5764 </ul> 5765 </li> 5766 5767 <li class="station-item"> 5768 <div class="station-header" onclick="toggleAmenities('83')"> 5769 <!-- Display circles for each metro line --> 5770 5771 5772 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 5773 5774 <strong>VAN DORN METRO STATION</strong> 5775 5776 <!-- Hotel icon if hotels are available --> 5777 5778 5779 <!-- Coffee shop icon if coffee shops are available --> 5780 5781 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 5782 5783 5784 <!-- Restaurant icon if restaurants are available --> 5785 5786 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (14)"></i> 5787 5788 5789 <!-- Nightlife icon if bars are available --> 5790 5791 5792 <!-- Pharmacy icon if pharmacies are available --> 5793 5794 5795 <!-- Supermarket icon if supermarkets are available --> 5796 5797 5798 <!-- Museum icon if museums are available --> 5799 5800 5801 <span class="toggle-icon" id="toggle-83" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5802</div> 5803 <ul class="amenities-list" id="amenities-83"> 5804 <!-- Amenities will be dynamically loaded here --> 5805 <li class="loading">Loading amenities...</li> 5806 </ul> 5807 </li> 5808 5809 <li class="station-item"> 5810 <div class="station-header" onclick="toggleAmenities('18')"> 5811 <!-- Display circles for each metro line --> 5812 5813 5814 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 5815 5816 <strong>VAN NESS-UDC METRO STATION</strong> 5817 5818 <!-- Hotel icon if hotels are available --> 5819 5820 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5821 5822 5823 <!-- Coffee shop icon if coffee shops are available --> 5824 5825 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 5826 5827 5828 <!-- Restaurant icon if restaurants are available --> 5829 5830 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i> 5831 5832 5833 <!-- Nightlife icon if bars are available --> 5834 5835 5836 <!-- Pharmacy icon if pharmacies are available --> 5837 5838 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5839 5840 5841 <!-- Supermarket icon if supermarkets are available --> 5842 5843 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5844 5845 5846 <!-- Museum icon if museums are available --> 5847 5848 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 5849 5850 5851 <span class="toggle-icon" id="toggle-18" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5852</div> 5853 <ul class="amenities-list" id="amenities-18"> 5854 <!-- Amenities will be dynamically loaded here --> 5855 <li class="loading">Loading amenities...</li> 5856 </ul> 5857 </li> 5858 5859 <li class="station-item"> 5860 <div class="station-header" onclick="toggleAmenities('78')"> 5861 <!-- Display circles for each metro line --> 5862 5863
5864 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 5865 5866 5867 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 5868 5869 <strong>VIRGINIA SQUARE METRO STATION</strong> 5870 5871 <!-- Hotel icon if hotels are available --> 5872 5873 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5874 5875 5876 <!-- Coffee shop icon if coffee shops are available --> 5877 5878 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (3)"></i> 5879 5880 5881 <!-- Restaurant icon if restaurants are available --> 5882 5883 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (22)"></i> 5884 5885 5886 <!-- Nightlife icon if bars are available --> 5887 5888 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 5889 5890 5891 <!-- Pharmacy icon if pharmacies are available --> 5892 5893 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5894 5895 5896 <!-- Supermarket icon if supermarkets are available --> 5897 5898 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5899 5900 5901 <!-- Museum icon if museums are available --> 5902 5903 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (1)"></i> 5904 5905 5906 <span class="toggle-icon" id="toggle-78" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5907</div> 5908 <ul class="amenities-list" id="amenities-78"> 5909 <!-- Amenities will be dynamically loaded here --> 5910 <li class="loading">Loading amenities...</li> 5911 </ul> 5912 </li> 5913 5914 <li class="station-item"> 5915 <div class="station-header" onclick="toggleAmenities('89')"> 5916 <!-- Display circles for each metro line --> 5917 5918 5919 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 5920 5921 <strong>WASHINGTON DULLES INTERNATIONAL AIRPORT METRO STATION</strong> 5922 5923 <!-- Hotel icon if hotels are available --> 5924 5925 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 5926 5927 5928 <!-- Coffee shop icon if coffee shops are available --> 5929 5930 5931 <!-- Restaurant icon if restaurants are available --> 5932 5933 5934 <!-- Nightlife icon if bars are available --> 5935 5936 5937 <!-- Pharmacy icon if pharmacies are available --> 5938 5939 5940 <!-- Supermarket icon if supermarkets are available --> 5941 5942 5943 <!-- Museum icon if museums are available --> 5944 5945 5946 <span class="toggle-icon" id="toggle-89" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5947</div> 5948 <ul class="amenities-list" id="amenities-89"> 5949 <!-- Amenities will be dynamically loaded here --> 5950 <li class="loading">Loading amenities...</li> 5951 </ul> 5952 </li> 5953 5954 <li class="station-item"> 5955 <div class="station-header" onclick="toggleAmenities('33')"> 5956 <!-- Display circles for each metro line --> 5957 5958 5959 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 5960 5961 <strong>WATERFRONT METRO STATION</strong> 5962 5963 <!-- Hotel icon if hotels are available --> 5964 5965 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (3)"></i> 5966 5967 5968 <!-- Coffee shop icon if coffee shops are available --> 5969 5970 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (6)"></i> 5971 5972 5973 <!-- Restaurant icon if restaurants are available --> 5974 5975 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (26)"></i> 5976 5977 5978 <!-- Nightlife icon if bars are available --> 5979 5980 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (6)"></i> 5981 5982 5983 <!-- Pharmacy icon if pharmacies are available --> 5984 5985 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 5986 5987 5988 <!-- Supermarket icon if supermarkets are available --> 5989 5990 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 5991 5992 5993 <!-- Museum icon if museums are available --> 5994 5995 5996 <span class="toggle-icon" id="toggle-33" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 5997</div> 5998 <ul class="amenities-list" id="amenities-33"> 5999 <!-- Amenities will be dynamically loaded here --> 6000 <li class="loading">Loading amenities...</li> 6001 </ul> 6002 </li> 6003 6004 <li class="station-item"> 6005 <div class="station-header" onclick="toggleAmenities('69')"> 6006 <!-- Display circles for each metro line --> 6007 6008
6009 <span class="line-circle" style="background-color: #FFA500;" title="ORANGE"></span> 6010 6011 <strong>WEST FALLS CHURCH METRO STATION</strong> 6012 6013 <!-- Hotel icon if hotels are available --> 6014 6015 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (1)"></i> 6016 6017 6018 <!-- Coffee shop icon if coffee shops are available --> 6019 6020 6021 <!-- Restaurant icon if restaurants are available --> 6022 6023 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (10)"></i> 6024 6025 6026 <!-- Nightlife icon if bars are available --> 6027 6028 6029 <!-- Pharmacy icon if pharmacies are available --> 6030 6031 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 6032 6033 6034 <!-- Supermarket icon if supermarkets are available --> 6035 6036 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 6037 6038 6039 <!-- Museum icon if museums are available --> 6040 6041 6042 <span class="toggle-icon" id="toggle-69" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6043</div> 6044 <ul class="amenities-list" id="amenities-69"> 6045 <!-- Amenities will be dynamically loaded here --> 6046 <li class="loading">Loading amenities...</li> 6047 </ul> 6048 </li> 6049 6050 <li class="station-item"> 6051 <div class="station-header" onclick="toggleAmenities('49')"> 6052 <!-- Display circles for each metro line --> 6053 6054 6055 <span class="line-circle" style="background-color: #008000;" title="GREEN"></span> 6056 6057 <strong>WEST HYATTSVILLE METRO STATION</strong> 6058 6059 <!-- Hotel icon if hotels are available --> 6060 6061 6062 <!-- Coffee shop icon if coffee shops are available --> 6063 6064 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 6065 6066 6067 <!-- Restaurant icon if restaurants are available --> 6068 6069 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (9)"></i> 6070 6071 6072 <!-- Nightlife icon if bars are available --> 6073 6074 6075 <!-- Pharmacy icon if pharmacies are available --> 6076 6077 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 6078 6079 6080 <!-- Supermarket icon if supermarkets are available --> 6081 6082 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (1)"></i> 6083 6084 6085 <!-- Museum icon if museums are available --> 6086 6087 6088 <span class="toggle-icon" id="toggle-49" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6089</div> 6090 <ul class="amenities-list" id="amenities-49"> 6091 <!-- Amenities will be dynamically loaded here --> 6092 <li class="loading">Loading amenities...</li> 6093 </ul> 6094 </li> 6095 6096 <li class="station-item"> 6097 <div class="station-header" onclick="toggleAmenities('63')"> 6098 <!-- Display circles for each metro line --> 6099 6100 6101 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 6102 6103 <strong>WHEATON METRO STATION</strong> 6104 6105 <!-- Hotel icon if hotels are available --> 6106 6107 6108 <!-- Coffee shop icon if coffee shops are available --> 6109 6110 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (5)"></i> 6111 6112 6113 <!-- Restaurant icon if restaurants are available --> 6114 6115 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (40)"></i> 6116 6117 6118 <!-- Nightlife icon if bars are available --> 6119 6120 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (3)"></i> 6121 6122 6123 <!-- Pharmacy icon if pharmacies are available --> 6124 6125 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (2)"></i> 6126 6127 6128 <!-- Supermarket icon if supermarkets are available --> 6129 6130 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 6131 6132 6133 <!-- Museum icon if museums are available --> 6134 6135 6136 <span class="toggle-icon" id="toggle-63" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6137</div> 6138 <ul class="amenities-list" id="amenities-63"> 6139 <!-- Amenities will be dynamically loaded here --> 6140 <li class="loading">Loading amenities...</li> 6141 </ul> 6142 </li> 6143 6144 <li class="station-item"> 6145 <div class="station-header" onclick="toggleAmenities('93')"> 6146 <!-- Display circles for each metro line --> 6147 6148
6149 <span class="line-circle" style="background-color: #C0C0C0;" title="SILVER"></span> 6150 6151 <strong>WIEHLE-RESTON EAST METRO STATION</strong> 6152 6153 <!-- Hotel icon if hotels are available --> 6154 6155 6156 <!-- Coffee shop icon if coffee shops are available --> 6157 6158 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (2)"></i> 6159 6160 6161 <!-- Restaurant icon if restaurants are available --> 6162 6163 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (9)"></i> 6164 6165 6166 <!-- Nightlife icon if bars are available --> 6167 6168 6169 <!-- Pharmacy icon if pharmacies are available --> 6170 6171 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 6172 6173 6174 <!-- Supermarket icon if supermarkets are available --> 6175 6176 6177 <!-- Museum icon if museums are available --> 6178 6179 6180 <span class="toggle-icon" id="toggle-93" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6181</div> 6182 <ul class="amenities-list" id="amenities-93"> 6183 <!-- Amenities will be dynamically loaded here --> 6184 <li class="loading">Loading amenities...</li> 6185 </ul> 6186 </li> 6187 6188 <li class="station-item"> 6189 <div class="station-header" onclick="toggleAmenities('110')"> 6190 <!-- Display circles for each metro line --> 6191 6192 6193 <span class="line-circle" style="background-color: #800080;" title="VRE"></span> 6194 6195 <strong>WOODBRIDGE VRE</strong> 6196 6197 <!-- Hotel icon if hotels are available --> 6198 6199 6200 <!-- Coffee shop icon if coffee shops are available --> 6201 6202 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (1)"></i> 6203 6204 6205 <!-- Restaurant icon if restaurants are available --> 6206 6207 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (17)"></i> 6208 6209 6210 <!-- Nightlife icon if bars are available --> 6211 6212 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 6213 6214 6215 <!-- Pharmacy icon if pharmacies are available --> 6216 6217 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 6218 6219 6220 <!-- Supermarket icon if supermarkets are available --> 6221 6222 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 6223 6224 6225 <!-- Museum icon if museums are available --> 6226 6227 6228 <span class="toggle-icon" id="toggle-110" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6229</div> 6230 <ul class="amenities-list" id="amenities-110"> 6231 <!-- Amenities will be dynamically loaded here --> 6232 <li class="loading">Loading amenities...</li> 6233 </ul> 6234 </li> 6235 6236 <li class="station-item"> 6237 <div class="station-header" onclick="toggleAmenities('19')"> 6238 <!-- Display circles for each metro line --> 6239 6240 6241 <span class="line-circle" style="background-color: #FF0000;" title="RED"></span> 6242 6243 <strong>WOODLEY PARK-ZOO METRO STATION</strong> 6244 6245 <!-- Hotel icon if hotels are available --> 6246 6247 <i class="fas fa-bed" style="color: #4a90e2; margin-left: 10px;" title="Hotels nearby (2)"></i> 6248 6249 6250 <!-- Coffee shop icon if coffee shops are available --> 6251 6252 <i class="fas fa-coffee" style="color: #8B4513; margin-left: 10px;" title="Coffee shops nearby (4)"></i> 6253 6254 6255 <!-- Restaurant icon if restaurants are available --> 6256 6257 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (26)"></i> 6258 6259 6260 <!-- Nightlife icon if bars are available --> 6261 6262 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (2)"></i> 6263 6264 6265 <!-- Pharmacy icon if pharmacies are available --> 6266 6267 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 6268 6269 6270 <!-- Supermarket icon if supermarkets are available --> 6271 6272 6273 <!-- Museum icon if museums are available --> 6274 6275 <i class="fas fa-university" style="color: #000000; margin-left: 10px;" title="Museums nearby (2)"></i> 6276 6277 6278 <span class="toggle-icon" id="toggle-19" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6279</div> 6280 <ul class="amenities-list" id="amenities-19"> 6281 <!-- Amenities will be dynamically loaded here --> 6282 <li class="loading">Loading amenities...</li> 6283 </ul> 6284 </li> 6285 6286 <li class="station-item"> 6287 <div class="station-header" onclick="toggleAmenities('160')"> 6288 <!-- Display circles for each metro line --> 6289 6290
6291 <span class="line-circle" style="background-color: #FFFF00;" title="YELLOW"></span> 6292 6293 6294 <span class="line-circle" style="background-color: #0000FF;" title="BLUE"></span> 6295 6296 <strong>POTOMAC YARD METRO STATION</strong> 6297 6298 <!-- Hotel icon if hotels are available --> 6299 6300 6301 <!-- Coffee shop icon if coffee shops are available --> 6302 6303 6304 <!-- Restaurant icon if restaurants are available --> 6305 6306 <i class="fas fa-utensils" style="color: #FF6B6B; margin-left: 10px;" title="Restaurants nearby (2)"></i> 6307 6308 6309 <!-- Nightlife icon if bars are available --> 6310 6311 <i class="fas fa-cocktail" style="color: #9B59B6; margin-left: 10px;" title="Nightlife nearby (1)"></i> 6312 6313 6314 <!-- Pharmacy icon if pharmacies are available --> 6315 6316 <i class="fas fa-pills" style="color: #E74C3C; margin-left: 10px;" title="Pharmacies nearby (1)"></i> 6317 6318 6319 <!-- Supermarket icon if supermarkets are available --> 6320 6321 <i class="fas fa-shopping-cart" style="color: #27AE60; margin-left: 10px;" title="Supermarkets nearby (2)"></i> 6322 6323 6324 <!-- Museum icon if museums are available --> 6325 6326 6327 <span class="toggle-icon" id="toggle-160" style="margin-left: auto; font-size: 18px; font-weight: bold;">+</span> 6328</div> 6329 <ul class="amenities-list" id="amenities-160"> 6330 <!-- Amenities will be dynamically loaded here --> 6331 <li class="loading">Loading amenities...</li> 6332 </ul> 6333 </li> 6334 6335</ul> 6336 6337 <!-- Compact Footer HTML Structure with Flask Paths --> 6338<footer class="about-footer"> 6339 <div class="footer-content"> 6340 <!-- All buttons in one row --> 6341 <div class="footer-buttons"> 6342 <a href="https://apps.apple.com/us/app/metromatch/id6738965637" 6343 class="footer-button" 6344 aria-label="Download MetroMatch on the App Store" 6345 target="_blank" 6346 rel="noopener noreferrer"> 6347 <img src="/static/images/App.svg" alt="Download on the App Store"> 6348 </a> 6349 <a href="https://play.google.com/store/apps/details?id=com.transitdiscoveries.dmvtour&hl=en_US" 6350 class="footer-button" 6351 aria-label="Get MetroMatch on Google Play" 6352 target="_blank" 6353 rel="noopener noreferrer"> 6354 <img src="/static/images/Google.png" alt="Get it on Google Play"> 6355 </a> 6356 <a href="https://www.expedia.com/" 6357 class="footer-button" 6358 aria-label="Book with Expedia" 6359 target="_blank" 6360 rel="noopener noreferrer"> 6361 <img src="/static/images/expedia-icon.png" alt="Expedia"> 6362 </a> 6363 <a href="https://www.booking.com/" 6364 class="footer-button" 6365 aria-label="Book with Booking.com" 6366 target="_blank" 6367 rel="noopener noreferrer"> 6368 <img src="/static/images/booking-icon.png" alt="Booking.com"> 6369 </a> 6370 <a href="https://www.tripadvisor.com/" 6371 class="footer-button" 6372 aria-label="Explore on TripAdvisor" 6373 target="_blank" 6374 rel="noopener noreferrer"> 6375 <img src="/static/images/trip-icon.png" alt="TripAdvisor"> 6376 </a> 6377 <a href="https://dcbyfoot.com/" 6378 class="footer-button" 6379 aria-label="DC by Foot Walking Tours" 6380 target="_blank" 6381 rel="noopener noreferrer"> 6382 <img src="/static/images/dcbyfoot.png" alt="DC by Foot"> 6383 </a> 6384 </div> 6385 6386 <!-- Copyright on next row --> 6387 <div class="footer-info"> 6388 <p>© 2025 Schneider Analytics LLC. All rights reserved.</p> 6389 </div> 6390 </div> 6391</footer> 6392 6393 <!-- JavaScript to Handle Search, Fetching Amenities, and Filtering Transit Routes --> 6394
6394<script> 6395 // Debounce function to limit the rate of function execution 6396 function debounce(func, delay) { 6397 let debounceTimer; 6398 return function() { 6399 const context = this; 6400 const args = arguments; 6401 clearTimeout(debounceTimer); 6402 debounceTimer = setTimeout(() => func.apply(context, args), delay); 6403 } 6404 } 6405 6406 /** 6407 * Retrieves search parameters from localStorage. 6408 * @returns {Object} - An object containing stationQuery and lineQuery. 6409 */ 6410 function getSearchParams() { 6411 const stationQuery = localStorage.getItem('stationQuery') || ''; 6412 const lineQuery = localStorage.getItem('lineQuery') || ''; 6413 console.log('Search Parameters:', { stationQuery, lineQuery }); // Debugging log 6414 return { stationQuery, lineQuery: lineQuery.toUpperCase() }; // Convert lineQuery to uppercase 6415 } 6416 6417 /** 6418 * Stores search parameters in localStorage. 6419 * @param {string} stationQuery - The station name query. 6420 * @param {string} lineQuery - The transit line query. 6421 */ 6422 function setSearchParams(stationQuery, lineQuery) { 6423 console.log('Setting Search Params:', { stationQuery, lineQuery }); // Debugging log 6424 localStorage.setItem('stationQuery', stationQuery); 6425 localStorage.setItem('lineQuery', lineQuery); 6426 } 6427 6428 /** 6429 * Clears search parameters from localStorage. 6430 */ 6431 function clearSearchParams() { 6432 console.log('Clearing search parameters.'); // Debugging log 6433 localStorage.removeItem('stationQuery'); 6434 localStorage.removeItem('lineQuery'); 6435 } 6436 6437 /** 6438 * Initializes search inputs based on localStorage values. 6439 */ 6440 function initializeSearchInputs() { 6441 const { stationQuery, lineQuery } = getSearchParams(); 6442 document.getElementById('station-search').value = stationQuery; 6443 document.getElementById('line-search').value = lineQuery.toLowerCase(); // Display line query in lowercase in UI 6444 } 6445 6446 /** 6447 * Handles changes in search inputs. 6448 */ 6449 function handleSearchChange() { 6450 const stationQuery = document.getElementById('station-search').value.trim(); 6451 const lineQuery = document.getElementById('line-search').value; 6452 6453 console.log('Search changed. Station Query:', stationQuery, 'Line Query:', lineQuery); // Debugging log 6454 6455 setSearchParams(stationQuery, lineQuery); 6456 6457 // Dispatch a custom event to notify other scripts/pages 6458 window.dispatchEvent(new Event('searchUpdated')); 6459 } 6460 6461 /** 6462 * Handles the clear search button click. 6463 */ 6464 function handleClearSearch() { 6465 console.log('Clear search clicked.'); // Debugging log 6466 document.getElementById('station-search').value = ''; 6467 document.getElementById('line-search').value = ''; 6468 clearSearchParams(); 6469 6470 // Dispatch a custom event to notify other scripts/pages 6471 window.dispatchEvent(new Event('searchUpdated')); 6472 } 6473 6474 // Event Listeners for Search Inputs 6475 document.getElementById('station-search').addEventListener('input', debounce(handleSearchChange, 300)); 6476 document.getElementById('line-search').addEventListener('change', handleSearchChange); 6477 document.getElementById('clear-search').addEventListener('click', handleClearSearch); 6478 6479 // Listen for storage events to synchronize search across pages 6480 window.addEventListener('storage', (event) => { 6481 if (event.key === 'stationQuery' || event.key === 'lineQuery') { 6482 initializeSearchInputs(); 6483 console.log('Storage event triggered.'); // Debugging log 6484 // Dispatch a custom event to notify other scripts/pages 6485 window.dispatchEvent(new Event('searchUpdated')); 6486 } 6487 }); 6488 6489 // Initialize search inputs on page load 6490 window.addEventListener('load', () => { 6491 initializeSearchInputs(); 6492 filterStations(); 6493 }); 6494 6495 /** 6496 * Filters the station list based on search parameters. 6497 */ 6498 function filterStations() { 6499 const { stationQuery, lineQuery } = getSearchParams(); 6500 6501 console.log('Filtering stations. Line Query:', lineQuery); // Debugging log 6502 6503 const stationItems = document.querySelectorAll('.station-item'); 6504
6505 stationItems.forEach(item => { 6506 const stationHeader = item.querySelector('.station-header'); 6507 const stationName = stationHeader.querySelector('strong').innerText.toLowerCase(); 6508 const stationLines = Array.from(stationHeader.querySelectorAll('.line-circle')).map(span => span.title.toUpperCase()); 6509 6510 const matchesStation = stationName.includes(stationQuery.toLowerCase()); 6511 const matchesLine = lineQuery === '' || stationLines.includes(lineQuery); 6512 6513 console.log('Checking station:', stationName, 'Matches:', matchesStation, matchesLine); // Debugging log 6514 6515 if (matchesStation && matchesLine) { 6516 item.style.display = 'block'; 6517 item.classList.add('match'); 6518 } else { 6519 item.style.display = 'none'; 6520 item.classList.remove('match'); 6521 } 6522 }); 6523 6524 // If amenities are open for hidden stations, hide them 6525 stationItems.forEach(item => { 6526 if (item.style.display === 'none') { 6527 const amenitiesList = item.querySelector('.amenities-list'); 6528 if (amenitiesList) { 6529 amenitiesList.style.display = 'none'; 6530 } 6531 } 6532 }); 6533 } 6534 6535 // Listen for custom 'searchUpdated' event to filter stations 6536 window.addEventListener('searchUpdated', () => { 6537 console.log('searchUpdated event triggered.'); // Debugging log 6538 filterStations(); 6539 }); 6540 6541 /** 6542 * Toggles the display of a category within a station's amenities. 6543 * @param {string} stationId - The unique ID of the station. 6544 * @param {string} category - The category to toggle. 6545 */ 6546 function toggleCategory(stationId, category) { 6547 const categoryContent = document.getElementById(`${category}-content-${stationId}`); 6548 const categoryHeader = document.getElementById(`${category}-header-${stationId}`); 6549 6550 if (categoryContent && categoryHeader) { 6551 const isVisible = categoryContent.style.display === 'block'; 6552 categoryContent.style.display = isVisible ? 'none' : 'block'; 6553 6554 // Toggle the expanded class for icon rotation 6555 if (isVisible) { 6556 categoryHeader.classList.remove('expanded'); 6557 } else { 6558 categoryHeader.classList.add('expanded'); 6559 } 6560 } 6561 } 6562 6563 /** 6564 * Sorts an array of amenities alphabetically by name. 6565 * @param {Array} amenities - Array of amenity objects. 6566 * @param {string} nameField - The field name to sort by. 6567 * @returns {Array} - Sorted array. 6568 */ 6569 function sortAmenities(amenities, nameField) { 6570 return amenities.sort((a, b) => { 6571 const nameA = a[nameField] ? a[nameField].toLowerCase() : ''; 6572 const nameB = b[nameField] ? b[nameField].toLowerCase() : ''; 6573 return nameA.localeCompare(nameB); 6574 }); 6575 } 6576 6577 /** 6578 * Creates HTML for a category section. 6579 * @param {string} stationId - The unique ID of the station. 6580 * @param {string} categoryId - The category identifier. 6581 * @param {string} categoryName - The display name of the category. 6582 * @param {string} icon - FontAwesome icon class. 6583 * @param {Array} items - Array of items for this category. 6584 * @param {Function} itemRenderer - Function to render individual items. 6585 * @returns {string} - HTML string for the category. 6586 */ 6587 function createCategoryHTML(stationId, categoryId, categoryName, icon, items, itemRenderer) { 6588 if (items.length === 0) { 6589 return ''; // Don't show empty categories 6590 } 6591 6592 const categoryHeaderId = `${categoryId}-header-${stationId}`; 6593 const categoryContentId = `${categoryId}-content-${stationId}`; 6594 6595 let html = ` 6596 <li> 6597 <div class="category-header" id="${categoryHeaderId}" onclick="toggleCategory('${stationId}', '${categoryId}')">
6598 <span> 6599 <i class="${icon}" style="color: black; margin-right: 8px;"></i> 6600 ${categoryName} 6601 <span class="category-count">${items.length}</span> 6602 </span> 6603 <span class="toggle-icon">â¶</span> 6604 </div> 6605 <div class="category-content" id="${categoryContentId}"> 6606 <ul> 6607 `; 6608 6609 items.forEach(item => { 6610 html += itemRenderer(item); 6611 }); 6612 6613 html += ` 6614 </ul> 6615 </div> 6616 </li> 6617 `; 6618 6619 return html; 6620 } 6621 6622 /** 6623 * Safely fetch data from an API endpoint with better error handling. 6624 * @param {string} url - The API endpoint URL. 6625 * @returns {Promise<Array>} - Returns array of data or empty array on error. 6626 */ 6627 async function safeFetch(url) { 6628 try { 6629 console.log(`Fetching from: ${url}`); 6630 const response = await fetch(url); 6631 6632 if (!response.ok) { 6633 console.warn(`API responded with status ${response.status} for ${url}`); 6634 return []; 6635 } 6636 6637 const data = await response.json(); 6638 console.log(`Successfully fetched ${data.length} items from ${url}`); 6639 return Array.isArray(data) ? data : []; 6640 } catch (error) { 6641 console.error(`Error fetching from ${url}:`, error); 6642 return []; 6643 } 6644 } 6645 6646 /** 6647 * Toggles the display of amenities for a given station. 6648 * @param {string} stationId - The unique ID of the station. 6649 */ 6650async function toggleAmenities(stationId) { 6651 const amenitiesList = document.getElementById('amenities-' + stationId); 6652 if (amenitiesList.style.display === 'none' || amenitiesList.style.display === '') { 6653 amenitiesList.style.display = 'block'; 6654 const toggleIcon = document.getElementById('toggle-' + stationId); 6655 if (toggleIcon) { 6656 toggleIcon.textContent = '-'; 6657 } 6658 // Check if amenities are already loaded to prevent redundant fetches 6659 if (!amenitiesList.dataset.loaded) { 6660 try { 6661 // Display loading message 6662 amenitiesList.innerHTML = '<li class="loading">Loading amenities...</li>'; 6663 6664 console.log('Fetching amenities for station:', stationId); 6665 6666 // Fetch all amenities using the safer method 6667 const [hotels, coffeeShops, bars, pharmacies, restaurants, supermarkets, museums] = await Promise.all([ 6668 safeFetch(`/api/stations/${stationId}/hotels`), 6669 safeFetch(`/api/stations/${stationId}/coffee`), 6670 safeFetch(`/api/stations/${stationId}/bars`), 6671 safeFetch(`/api/stations/${stationId}/pharmacies`), 6672 safeFetch(`/api/stations/${stationId}/restaurants`), 6673 safeFetch(`/api/stations/${stationId}/supermarkets`), 6674 safeFetch(`/api/stations/${stationId}/museums`) 6675 ]); 6676 6677 console.log('Fetched data counts:', { 6678 hotels: hotels.length, 6679 coffeeShops: coffeeShops.length, 6680 bars: bars.length, 6681 pharmacies: pharmacies.length, 6682 restaurants: restaurants.length, 6683 supermarkets: supermarkets.length, 6684 museums: museums.length 6685 }); 6686 6687 // Sort all amenities alphabetically 6688 const sortedHotels = sortAmenities(hotels, 'hotel_name'); 6689 const sortedCoffeeShops = sortAmenities(coffeeShops, 'coffee_name'); 6690 const sortedBars = sortAmenities(bars, 'bar_name'); 6691 const sortedPharmacies = sortAmenities(pharmacies, 'pharmacy_name'); 6692 const sortedRestaurants = sortAmenities(restaurants, 'restaurant_name'); 6693 const sortedSupermarkets = sortAmenities(supermarkets, 'supermarket_name');
6694 const sortedMuseums = sortAmenities(museums, 'museum_name'); 6695 6696 // Combine breakfast restaurants and coffee shops into one "Breakfast" category 6697 const breakfastRestaurants = sortedRestaurants.filter(r => 6698 r.restaurant_cuisine_type && 6699 (r.restaurant_cuisine_type.toLowerCase().includes('breakfast') || 6700 r.restaurant_cuisine_type.toLowerCase().includes('brunch') || 6701 r.restaurant_cuisine_type.toLowerCase().includes('cafe') || 6702 r.restaurant_cuisine_type.toLowerCase().includes('bakery')) 6703 ); 6704 6705 // Combine coffee shops with breakfast restaurants for a unified "Breakfast" category 6706 const allBreakfastItems = [ 6707 ...breakfastRestaurants.map(r => ({ 6708 name: r.restaurant_name, 6709 website: r.restaurant_website, 6710 distance: r.restaurant_distance_miles, 6711 type: 'restaurant', 6712 cuisine: r.restaurant_cuisine_type, 6713 price: r.restaurant_price 6714 })), 6715 ...sortedCoffeeShops.map(c => ({ 6716 name: c.coffee_name, 6717 website: c.coffee_website, 6718 distance: c.coffee_distance_miles, 6719 type: 'coffee' 6720 })) 6721 ].sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())); 6722 6723 const lunchDinnerRestaurants = sortedRestaurants.filter(r => 6724 !breakfastRestaurants.includes(r) 6725 ); 6726 6727 // Clear the amenities list 6728 amenitiesList.innerHTML = ''; 6729 6730 // Create HTML for each category 6731 let categoriesHTML = ''; 6732 6733 // Hotels 6734 categoriesHTML += createCategoryHTML( 6735 stationId, 'hotels', 'Hotels', 'fas fa-bed', sortedHotels, 6736 hotel => ` 6737 <li> 6738 <i class="fas fa-bed" style="color: black;"></i> 6739 <a href="${hotel.hotel_website}" target="_blank">${hotel.hotel_name}</a> 6740 - ${hotel.hotel_distance_miles} miles 6741 </li> 6742 ` 6743 ); 6744 6745 // Unified Breakfast category (includes both breakfast restaurants and coffee shops) 6746 categoriesHTML += createCategoryHTML( 6747 stationId, 'breakfast', 'Breakfast', 'fas fa-coffee', allBreakfastItems, 6748 item => { 6749 if (item.type === 'restaurant') { 6750 return ` 6751 <li> 6752 <i class="fas fa-utensils" style="color: black;"></i> 6753 <a href="${item.website}" target="_blank">${item.name}</a> 6754 - ${item.distance} miles 6755 <br> 6756 <span style="margin-left: 24px;">Cuisine: ${item.cuisine}</span> 6757 <br> 6758 <span style="margin-left: 24px;">Price: ${item.price}</span> 6759 </li> 6760 `; 6761 } else { 6762 return ` 6763 <li> 6764 <i class="fas fa-coffee" style="color: black;"></i> 6765 <a href="${item.website}" target="_blank">${item.name}</a> 6766 - ${item.distance} miles 6767 </li> 6768 `; 6769 } 6770 } 6771 ); 6772 6773 // Lunch/Dinner 6774 categoriesHTML += createCategoryHTML( 6775 stationId, 'lunch-dinner', 'Lunch/Dinner', 'fas fa-utensils', lunchDinnerRestaurants, 6776 restaurant => ` 6777 <li> 6778 <i class="fas fa-utensils" style="color: black;"></i> 6779 <a href="${restaurant.restaurant_website}" target="_blank">${restaurant.restaurant_name}</a> 6780 - ${restaurant.restaurant_distance_miles} miles 6781 <br>
6782 <span style="margin-left: 24px;">Cuisine: ${restaurant.restaurant_cuisine_type}</span> 6783 <br> 6784 <span style="margin-left: 24px;">Price: ${restaurant.restaurant_price}</span> 6785 </li> 6786 ` 6787 ); 6788 6789 // Nightlife (Bars) 6790 categoriesHTML += createCategoryHTML( 6791 stationId, 'nightlife', 'Nightlife', 'fas fa-cocktail', sortedBars, 6792 bar => ` 6793 <li> 6794 <i class="fas fa-cocktail" style="color: black;"></i> 6795 <a href="${bar.bar_website}" target="_blank">${bar.bar_name}</a> 6796 - ${bar.bar_distance_miles} miles 6797 </li> 6798 ` 6799 ); 6800 6801 // Pharmacies 6802 categoriesHTML += createCategoryHTML( 6803 stationId, 'pharmacies', 'Pharmacies', 'fas fa-pills', sortedPharmacies, 6804 pharmacy => ` 6805 <li> 6806 <i class="fas fa-pills" style="color: black;"></i> 6807 <a href="${pharmacy.pharmacy_website}" target="_blank">${pharmacy.pharmacy_name}</a> 6808 - ${pharmacy.pharmacy_distance_miles} miles 6809 </li> 6810 ` 6811 ); 6812 6813 // Supermarkets 6814 categoriesHTML += createCategoryHTML( 6815 stationId, 'supermarkets', 'Supermarkets', 'fas fa-shopping-cart', sortedSupermarkets, 6816 supermarket => ` 6817 <li> 6818 <i class="fas fa-shopping-cart" style="color: black;"></i> 6819 <a href="${supermarket.supermarket_website}" target="_blank">${supermarket.supermarket_name}</a> 6820 - ${supermarket.supermarket_distance_miles} miles 6821 </li> 6822 ` 6823 ); 6824 6825// Museums 6826categoriesHTML += createCategoryHTML( 6827 stationId, 'museums', 'Museums', 'fas fa-university', sortedMuseums, 6828 museum => ` 6829 <li> 6830 <i class="fas fa-university" style="color: black;"></i> 6831 <a href="${museum.museum_website}" target="_blank">${museum.museum_name}</a> 6832 - ${museum.museum_distance_miles} miles 6833 </li> 6834 ` 6835); 6836 6837 // If no amenities found at all 6838 if (categoriesHTML === '') { 6839 amenitiesList.innerHTML = '<li>No amenities found nearby.</li>'; 6840 } else { 6841 amenitiesList.innerHTML = categoriesHTML; 6842 } 6843 6844 // Mark as loaded to prevent future fetches 6845 amenitiesList.dataset.loaded = 'true'; 6846 6847 console.log('Successfully loaded amenities for station:', stationId); 6848 6849 } catch (error) { 6850 console.error('Error in toggleAmenities:', error); 6851 amenitiesList.innerHTML = '<li class="error">Error loading amenities. Please try again later.</li>'; 6852 } 6853 } 6854 } else { 6855 amenitiesList.style.display = 'none'; 6856 const toggleIcon = document.getElementById('toggle-' + stationId); 6857 if (toggleIcon) { 6858 toggleIcon.textContent = '+'; 6859 } 6860 } 6861} 6862 </script>
6862 6863 6864 <!-- JavaScript to Toggle the Mobile Menu --> 6865
6865<script> 6866 function toggleMenu() { 6867 const menu = document.getElementById("mobileMenu"); 6868 menu.classList.toggle("mobile-menu-active"); 6869 } 6870 </script>
6870 6871 6872</body> 6873</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.