{"id":591,"date":"2025-12-15T11:43:50","date_gmt":"2025-12-15T08:43:50","guid":{"rendered":"https:\/\/mapsfun.com\/?p=591"},"modified":"2025-12-15T11:43:50","modified_gmt":"2025-12-15T08:43:50","slug":"how-to-create-google-maps-with-several-locations","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=591","title":{"rendered":"How to Create Google Maps with Several Locations"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Google Maps With Several Locations: How to Create a Professional Multi-Point Map for Your Website<\/h2>\n\n\n\n<p>Need to display multiple business locations, event venues, or project sites on Google Maps? While embedding a single location is straightforward, creating a custom map with several locations requires technical implementation. This guide will walk you through building an interactive, filterable multi-location map using the Google Maps Platform.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method: Building a Filterable Multi-Location Map with Custom Controls<\/strong><\/p>\n\n\n\n<p>This solution creates a professional business location finder with category filters\u2014ideal for companies with multiple store types or service areas.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: API Setup &amp; Data Structure<\/p>\n\n\n\n<p>First, you need to enable the Google Maps JavaScript API in Google Cloud Console and create an API key with proper restrictions. This requires a Google Cloud account with billing enabled.<\/p>\n\n\n\n<p>Now, structure your location data with categories for filtering:<\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ locations.js - Save this as a separate file<\/span>\n<span class=\"hljs-keyword\">const<\/span> businessLocations = &#91;\n    {\n        <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,\n        <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Downtown Caf\u00e9\"<\/span>,\n        <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"123 Main St, New York, NY\"<\/span>,\n        <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span> },\n        <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"cafe\"<\/span>,\n        <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"7AM-8PM\"<\/span>,\n        <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4567\"<\/span>,\n        <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"WiFi\"<\/span>, <span class=\"hljs-string\">\"Outdoor Seating\"<\/span>, <span class=\"hljs-string\">\"Takeout\"<\/span>]\n    },\n    {\n        <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>,\n        <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Uptown Restaurant\"<\/span>,\n        <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Park Ave, New York, NY\"<\/span>,\n        <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7794<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9632<\/span> },\n        <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"restaurant\"<\/span>,\n        <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"11AM-11PM\"<\/span>,\n        <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 987-6543\"<\/span>,\n        <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Fine Dining\"<\/span>, <span class=\"hljs-string\">\"Reservations\"<\/span>, <span class=\"hljs-string\">\"Bar\"<\/span>]\n    },\n    {\n        <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">3<\/span>,\n        <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"West Side Coffee Shop\"<\/span>,\n        <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"789 Broadway, New York, NY\"<\/span>,\n        <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7336<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0000<\/span> },\n        <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"cafe\"<\/span>,\n        <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"6AM-7PM\"<\/span>,\n        <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 456-7890\"<\/span>,\n        <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"WiFi\"<\/span>, <span class=\"hljs-string\">\"Coffee Roasting\"<\/span>, <span class=\"hljs-string\">\"Pastries\"<\/span>]\n    },\n    {\n        <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">4<\/span>,\n        <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Central Bakery\"<\/span>,\n        <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"321 5th Ave, New York, NY\"<\/span>,\n        <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7489<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9850<\/span> },\n        <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"bakery\"<\/span>,\n        <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"8AM-6PM\"<\/span>,\n        <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 234-5678\"<\/span>,\n        <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Fresh Bread\"<\/span>, <span class=\"hljs-string\">\"Catering\"<\/span>, <span class=\"hljs-string\">\"Gluten-Free\"<\/span>]\n    }\n];<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Structured location data with categories, hours, and features for filtering<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-103-1024x640.png\" alt=\"\" class=\"wp-image-592\" style=\"width:736px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-103-1024x640.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-103-300x188.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-103-768x480.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-103-1536x960.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-103.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-104-1024x548.png\" alt=\"\" class=\"wp-image-593\" style=\"width:731px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-104-1024x548.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-104-300x161.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-104-768x411.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-104.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Create the Interactive Map Interface<\/p>\n\n\n\n<p>This HTML file creates a complete location finder with category filters and detailed info windows:<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Business Locations Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        * {\n            <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: -apple-system, BlinkMacSystemFont, <span class=\"hljs-string\">'Segoe UI'<\/span>, Roboto, Oxygen, Ubuntu, sans-serif;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.6<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.container<\/span> {\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1400px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-tag\">header<\/span> {\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">padding-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#eee<\/span>;\n        }\n        \n        <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.subtitle<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#666<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.app-layout<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">992px<\/span>) {\n            <span class=\"hljs-selector-class\">.app-layout<\/span> {\n                <span class=\"hljs-attribute\">flex-direction<\/span>: row;\n            }\n        }\n        \n        <span class=\"hljs-selector-class\">.sidebar<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.05<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">2<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">600px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-section<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">25px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-title<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#444<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-buttons<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span> ease;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-btn<\/span><span class=\"hljs-selector-class\">.active<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.locations-list<\/span> {\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-card<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">4px<\/span> solid <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-number\">0.2s<\/span> ease;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-card<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">5px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-name<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">5px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-category<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e8f0fe<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.8rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.info-window-content<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">250px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.info-title<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">5px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.info-features<\/span> {\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.feature-tag<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f1f3f4<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">2px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.8rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.no-results<\/span> {\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#666<\/span>;\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Find Our Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"subtitle\"<\/span>&gt;<\/span>Browse all our stores and filter by category<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"app-layout\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"sidebar\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-section\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-title\"<\/span>&gt;<\/span>Filter by Category<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-buttons\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"category-filters\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn active\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"all\"<\/span>&gt;<\/span>All Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"cafe\"<\/span>&gt;<\/span>Caf\u00e9s<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"restaurant\"<\/span>&gt;<\/span>Restaurants<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"bakery\"<\/span>&gt;<\/span>Bakeries<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-section\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-title\"<\/span>&gt;<\/span>Features<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-buttons\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"feature-filters\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-feature<\/span>=<span class=\"hljs-string\">\"WiFi\"<\/span>&gt;<\/span>WiFi<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-feature<\/span>=<span class=\"hljs-string\">\"Outdoor Seating\"<\/span>&gt;<\/span>Outdoor<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-feature<\/span>=<span class=\"hljs-string\">\"Takeout\"<\/span>&gt;<\/span>Takeout<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-feature<\/span>=<span class=\"hljs-string\">\"Reservations\"<\/span>&gt;<\/span>Reservations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"locations-list\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"locations-list\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-comment\">&lt;!-- Dynamic content will be loaded here --&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Include Google Maps with your API Key --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;callback=initMap\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-comment\">&lt;!-- Include the locations data --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"locations.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> activeCategory = <span class=\"hljs-string\">'all'<\/span>;\n        <span class=\"hljs-keyword\">let<\/span> activeFeatures = &#91;];\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">12<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span> }, <span class=\"hljs-comment\">\/\/ NYC<\/span>\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">'poi.business'<\/span>,\n                        <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">'off'<\/span> }]\n                    }\n                ]\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Load all locations initially<\/span>\n            loadLocations();\n            setupEventListeners();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Clear existing markers<\/span>\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> marker.setMap(<span class=\"hljs-literal\">null<\/span>));\n            markers = &#91;];\n            \n            <span class=\"hljs-comment\">\/\/ Filter locations based on active filters<\/span>\n            <span class=\"hljs-keyword\">const<\/span> filteredLocations = businessLocations.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                <span class=\"hljs-comment\">\/\/ Category filter<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (activeCategory !== <span class=\"hljs-string\">'all'<\/span> &amp;&amp; location.category !== activeCategory) {\n                    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">false<\/span>;\n                }\n                \n                <span class=\"hljs-comment\">\/\/ Feature filters<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (activeFeatures.length &gt; <span class=\"hljs-number\">0<\/span>) {\n                    <span class=\"hljs-keyword\">const<\/span> hasAllFeatures = activeFeatures.every(<span class=\"hljs-function\"><span class=\"hljs-params\">feature<\/span> =&gt;<\/span> \n                        location.features.includes(feature)\n                    );\n                    <span class=\"hljs-keyword\">if<\/span> (!hasAllFeatures) <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">false<\/span>;\n                }\n                \n                <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">true<\/span>;\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Display in list<\/span>\n            displayLocationList(filteredLocations);\n            \n            <span class=\"hljs-comment\">\/\/ Add markers to map<\/span>\n            filteredLocations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">position<\/span>: location.position,\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: location.name,\n                    <span class=\"hljs-attr\">icon<\/span>: getMarkerIcon(location.category)\n                });\n                \n                <span class=\"hljs-comment\">\/\/ Create info window<\/span>\n                <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                    <span class=\"hljs-attr\">content<\/span>: createInfoWindowContent(location)\n                });\n                \n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    infoWindow.open(map, marker);\n                });\n                \n                <span class=\"hljs-comment\">\/\/ Add click listener to list item<\/span>\n                <span class=\"hljs-keyword\">const<\/span> listItem = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">`&#91;data-location-id=\"<span class=\"hljs-subst\">${location.id}<\/span>\"]`<\/span>);\n                <span class=\"hljs-keyword\">if<\/span> (listItem) {\n                    listItem.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                        map.setZoom(<span class=\"hljs-number\">16<\/span>);\n                        map.setCenter(marker.getPosition());\n                        infoWindow.open(map, marker);\n                    });\n                }\n                \n                markers.push(marker);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Adjust map bounds if markers exist<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (filteredLocations.length &gt; <span class=\"hljs-number\">0<\/span>) {\n                <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n                filteredLocations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                    bounds.extend(location.position);\n                });\n                map.fitBounds(bounds, { <span class=\"hljs-attr\">padding<\/span>: <span class=\"hljs-number\">50<\/span> });\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getMarkerIcon<\/span>(<span class=\"hljs-params\">category<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Custom icons for different categories<\/span>\n            <span class=\"hljs-keyword\">const<\/span> icons = {\n                <span class=\"hljs-attr\">cafe<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/blue-dot.png'<\/span>\n                },\n                <span class=\"hljs-attr\">restaurant<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/red-dot.png'<\/span>\n                },\n                <span class=\"hljs-attr\">bakery<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/green-dot.png'<\/span>\n                }\n            };\n            \n            <span class=\"hljs-keyword\">return<\/span> icons&#91;category] || icons.cafe;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createInfoWindowContent<\/span>(<span class=\"hljs-params\">location<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">`\n                &lt;div class=\"info-window-content\"&gt;\n                    &lt;div class=\"info-title\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/div&gt;\n                    &lt;div&gt;&lt;strong&gt;Address:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.address}<\/span>&lt;\/div&gt;\n                    &lt;div&gt;&lt;strong&gt;Hours:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.hours}<\/span>&lt;\/div&gt;\n                    &lt;div&gt;&lt;strong&gt;Phone:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.phone}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"info-features\"&gt;\n                        <span class=\"hljs-subst\">${location.features.map(feature =&gt; \n                            <span class=\"hljs-string\">`&lt;span class=\"feature-tag\"&gt;<span class=\"hljs-subst\">${feature}<\/span>&lt;\/span&gt;`<\/span>\n                        ).join(<span class=\"hljs-string\">''<\/span>)}<\/span>\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">displayLocationList<\/span>(<span class=\"hljs-params\">locations<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> container = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locations-list'<\/span>);\n            \n            <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">0<\/span>) {\n                container.innerHTML = <span class=\"hljs-string\">'&lt;div class=\"no-results\"&gt;No locations match your filters&lt;\/div&gt;'<\/span>;\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            container.innerHTML = locations.map(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> <span class=\"hljs-string\">`\n                &lt;div class=\"location-card\" data-location-id=\"<span class=\"hljs-subst\">${location.id}<\/span>\"&gt;\n                    &lt;div class=\"location-name\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"location-category\"&gt;<span class=\"hljs-subst\">${location.category.toUpperCase()}<\/span>&lt;\/div&gt;\n                    &lt;div&gt;&lt;strong&gt;Address:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.address}<\/span>&lt;\/div&gt;\n                    &lt;div&gt;&lt;strong&gt;Hours:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.hours}<\/span>&lt;\/div&gt;\n                    &lt;div&gt;&lt;strong&gt;Phone:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.phone}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"info-features\" style=\"margin-top: 8px;\"&gt;\n                        <span class=\"hljs-subst\">${location.features.map(feature =&gt; \n                            <span class=\"hljs-string\">`&lt;span class=\"feature-tag\"&gt;<span class=\"hljs-subst\">${feature}<\/span>&lt;\/span&gt;`<\/span>\n                        ).join(<span class=\"hljs-string\">''<\/span>)}<\/span>\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>).join(<span class=\"hljs-string\">''<\/span>);\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupEventListeners<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Category filter buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'#category-filters .filter-btn'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">btn<\/span> =&gt;<\/span> {\n                btn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'#category-filters .filter-btn'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">b<\/span> =&gt;<\/span> {\n                        b.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n                    });\n                    btn.classList.add(<span class=\"hljs-string\">'active'<\/span>);\n                    activeCategory = btn.dataset.category;\n                    loadLocations();\n                });\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Feature filter buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'#feature-filters .filter-btn'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">btn<\/span> =&gt;<\/span> {\n                btn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    btn.classList.toggle(<span class=\"hljs-string\">'active'<\/span>);\n                    <span class=\"hljs-keyword\">const<\/span> feature = btn.dataset.feature;\n                    \n                    <span class=\"hljs-keyword\">if<\/span> (btn.classList.contains(<span class=\"hljs-string\">'active'<\/span>)) {\n                        activeFeatures.push(feature);\n                    } <span class=\"hljs-keyword\">else<\/span> {\n                        activeFeatures = activeFeatures.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">f<\/span> =&gt;<\/span> f !== feature);\n                    }\n                    \n                    loadLocations();\n                });\n            });\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Professional multi-location finder with category filters, detailed cards, and custom map markers.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-105-1024x768.png\" alt=\"\" class=\"wp-image-594\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-105-1024x768.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-105-300x225.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-105-768x576.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-105.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Challenges You&#8217;ll Face<\/p>\n\n\n\n<p>Despite creating a polished map, you&#8217;ll encounter several ongoing challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 API Management: <\/strong>Google Maps Platform requires constant key monitoring, quota management, and cost control<\/li>\n\n\n\n<li><strong>2.\u00a0 Data Synchronization:<\/strong> Every location change requires code deployment<\/li>\n\n\n\n<li><strong>3.\u00a0 Mobile Responsiveness:<\/strong> Ensuring filters work perfectly on all devices adds complexity<\/li>\n\n\n\n<li><strong>4.\u00a0 Performance Issues:<\/strong> Loading many markers can slow down your website<\/li>\n\n\n\n<li><strong>5.\u00a0 Maintenance Burden:<\/strong> Google regularly updates their APIs, requiring code updates<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Create Multi-Location Maps in Minutes, Not Weeks<\/strong><\/p>\n\n\n\n<p>What if you could have this same professional, filterable multi-location map without any coding, API management, or technical headaches?<\/p>\n\n\n\n<p><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> provides all the functionality of the complex solution above, plus more:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Visual Map Editor: <\/strong>Add and edit locations directly on the map\u2014no code changes needed<\/li>\n\n\n\n<li><strong>2.\u00a0 Smart Filtering:<\/strong> Create category filters with point-and-click interface<\/li>\n\n\n\n<li><strong>3.\u00a0 Automatic Updates: <\/strong>Change hours, phone numbers, or add new locations instantly<\/li>\n\n\n\n<li><strong>4.\u00a0 No API Limits:<\/strong> Handle hundreds of locations without performance issues<\/li>\n\n\n\n<li><strong>5.\u00a0 Built-in Analytics: <\/strong>See how visitors interact with your map<\/li>\n<\/ul>\n\n\n\n<p><strong>Stop spending weeks building and maintaining custom map solutions. Create a better multi-location Google Map in minutes\u2014visit <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> to get started for free.<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"Google Maps With Several Locations: How to Create a Professional Multi-Point Map for Your Website Need to display multiple business locations, event venues, or project sites on Google Maps? While embedding a single location is straightforward, creating a custom map with several locations requires technical implementation. This guide will walk you through building an interactive, [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,1],"tags":[],"class_list":["post-591","post","type-post","status-publish","format-standard","hentry","category-google-maps-with-several-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=591"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/591\/revisions"}],"predecessor-version":[{"id":595,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/591\/revisions\/595"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}