{"id":625,"date":"2025-12-15T12:02:13","date_gmt":"2025-12-15T09:02:13","guid":{"rendered":"https:\/\/mapsfun.com\/?p=625"},"modified":"2025-12-15T12:02:14","modified_gmt":"2025-12-15T09:02:14","slug":"how-to-plot-multiple-locations-on-google-maps-2025-easy-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=625","title":{"rendered":"How to Plot Multiple Locations on Google Maps (2025 Easy Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Google Map Plotting Multiple Locations: The Complete 2024 Guide<\/h2>\n\n\n\n<p><strong>Visualize multiple locations effortlessly on Google Maps<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-118-1024x576.png\" alt=\"\" class=\"wp-image-626\" style=\"width:782px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-118-1024x576.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-118-300x169.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-118-768x432.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-118-1536x864.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-118.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Need to display multiple business locations, event venues, or custom points on Google Maps? This comprehensive guide covers all methods from simple to advanced, with complete code examples and professional tips.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>&nbsp;\ud83d\ude80 Quick Start: Choose Your Method<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"232\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-121.png\" alt=\"\" class=\"wp-image-630\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-121.png 784w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-121-300x89.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-121-768x227.png 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>&nbsp;\ud83d\udccd Method 1: Google My Maps (Easiest Solution)<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Step-by-Step Visual Guide<\/p>\n\n\n\n<p>Google My Maps provides a user-friendly interface for creating custom maps<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Access Google My Maps<\/strong><\/li>\n\n\n\n<li>\u00a0&#8211; Visit [Google My Maps](<a href=\"https:\/\/www.google.com\/maps\/d\/\">https:\/\/www.google.com\/maps\/d\/<\/a>)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"393\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-122-1024x393.png\" alt=\"\" class=\"wp-image-632\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-122-1024x393.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-122-300x115.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-122-768x295.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-122-1536x589.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-122.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&#8211; Click &#8220;Create a New Map&#8221;<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Sign in with your Google account<\/li>\n\n\n\n<li><strong>2. Add Multiple Locations<\/strong><\/li>\n\n\n\n<li><strong>Option A: Search and Add<\/strong><\/li>\n\n\n\n<li>&#8211; Use the search bar at the top<\/li>\n\n\n\n<li>&#8211; Type addresses or place names<\/li>\n\n\n\n<li>&#8211; Click &#8220;Add to map&#8221; for each location<\/li>\n\n\n\n<li><strong>Option B: Import from Spreadsheet<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>csv<\/strong><\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">Name<\/span>,<span class=\"hljs-selector-tag\">Address<\/span>,<span class=\"hljs-selector-tag\">Latitude<\/span>,<span class=\"hljs-selector-tag\">Longitude<\/span>,<span class=\"hljs-selector-tag\">Category<\/span>,<span class=\"hljs-selector-tag\">Description<\/span>\n\n<span class=\"hljs-selector-tag\">Main<\/span> <span class=\"hljs-selector-tag\">Store<\/span>,123 <span class=\"hljs-selector-tag\">Oak<\/span> <span class=\"hljs-selector-tag\">St<\/span>,40<span class=\"hljs-selector-class\">.7128<\/span>,<span class=\"hljs-selector-tag\">-74<\/span><span class=\"hljs-selector-class\">.0060<\/span>,<span class=\"hljs-selector-tag\">Retail<\/span>,<span class=\"hljs-selector-tag\">Flagship<\/span> <span class=\"hljs-selector-tag\">location<\/span>\n\n<span class=\"hljs-selector-tag\">Downtown<\/span> <span class=\"hljs-selector-tag\">Office<\/span>,456 <span class=\"hljs-selector-tag\">Main<\/span> <span class=\"hljs-selector-tag\">St<\/span>,40<span class=\"hljs-selector-class\">.7614<\/span>,<span class=\"hljs-selector-tag\">-73<\/span><span class=\"hljs-selector-class\">.9776<\/span>,<span class=\"hljs-selector-tag\">Office<\/span>,<span class=\"hljs-selector-tag\">Headquarters<\/span>\n\n<span class=\"hljs-selector-tag\">Warehouse<\/span>,789 <span class=\"hljs-selector-tag\">Industrial<\/span> <span class=\"hljs-selector-tag\">Way<\/span>,40<span class=\"hljs-selector-class\">.6782<\/span>,<span class=\"hljs-selector-tag\">-73<\/span><span class=\"hljs-selector-class\">.9442<\/span>,<span class=\"hljs-selector-tag\">Warehouse<\/span>,<span class=\"hljs-selector-tag\">Storage<\/span>\n\n<span class=\"hljs-selector-tag\">Event<\/span> <span class=\"hljs-selector-tag\">Venue<\/span>,321 <span class=\"hljs-selector-tag\">Park<\/span> <span class=\"hljs-selector-tag\">Ave<\/span>,40<span class=\"hljs-selector-class\">.7505<\/span>,<span class=\"hljs-selector-tag\">-73<\/span><span class=\"hljs-selector-class\">.9934<\/span>,<span class=\"hljs-selector-tag\">Event<\/span>,<span class=\"hljs-selector-tag\">Conference<\/span> <span class=\"hljs-selector-tag\">center<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li>Option C: Manual Marker Placement<\/li>\n\n\n\n<li>&#8211; Click the marker icon \ud83d\udccd<\/li>\n\n\n\n<li>&#8211; Click exact spot on map<\/li>\n\n\n\n<li>&#8211; Add location details<\/li>\n\n\n\n<li><strong>3. Customize Your Map<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Customize markers with different colors and icons for each category<\/li>\n\n\n\n<li><strong>&#8211; Color Coding:<\/strong> Click marker \u2192 &#8220;Style&#8221; \u2192 Choose color<\/li>\n\n\n\n<li><strong>&#8211; Custom Icons:<\/strong> Use different symbols for categories<\/li>\n\n\n\n<li><strong>&#8211; Layers:<\/strong> Organize locations into separate layers<\/li>\n\n\n\n<li><strong>&#8211; Rich Descriptions<\/strong>: Add photos, contact info, hours<\/li>\n\n\n\n<li><strong>4. Share and Embed<\/strong><\/li>\n\n\n\n<li>Embed Code for Website:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>html<\/strong><\/li>\n<\/ul>\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-tag\">&lt;<span class=\"hljs-name\">iframe<\/span>\u00a0\n\n\u00a0\u00a0<span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/d\/embed?mid=YOUR_MAP_ID&amp;z=12\"<\/span>\n\n\u00a0\u00a0<span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"800\"<\/span>\u00a0\n\n\u00a0\u00a0<span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"600\"<\/span>\n\n\u00a0\u00a0<span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border: 1px solid #ddd; border-radius: 10px;\"<\/span>\n\n\u00a0\u00a0<span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><\/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 class=\"has-text-align-center\"><strong>&nbsp;\ud83d\udcbb Method 2: Google Maps Platform (Developer Solution)<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Complete Implementation Guide<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step 1: API Setup<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Enable in Google Cloud Console:<\/span>\n<span class=\"hljs-comment\">\/\/ - Maps JavaScript API<\/span>\n<span class=\"hljs-comment\">\/\/ - Geocoding API<\/span>\n<span class=\"hljs-comment\">\/\/ - Places API (optional)<\/span>\n\n<span class=\"hljs-comment\">\/\/ Secure your API key with restrictions<\/span>\n<span class=\"hljs-keyword\">const<\/span> API_CONFIG = {\n  <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'your_restricted_api_key'<\/span>,\n  <span class=\"hljs-attr\">allowed_domains<\/span>: &#91;<span class=\"hljs-string\">'yourdomain.com'<\/span>],\n  <span class=\"hljs-attr\">enabled_apis<\/span>: &#91;<span class=\"hljs-string\">'Maps JavaScript API'<\/span>, <span class=\"hljs-string\">'Geocoding API'<\/span>]\n};<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><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<ul class=\"wp-block-list\">\n<li><strong>Step 2: Full HTML\/JavaScript Implementation<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" 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>&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\">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\">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\">style<\/span>&gt;<\/span><span class=\"css\">\n        * {\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Segoe UI'<\/span>, system-ui, sans-serif;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, #<span class=\"hljs-number\">667<\/span>eea <span class=\"hljs-number\">0%<\/span>, #<span class=\"hljs-number\">764<\/span>ba2 <span class=\"hljs-number\">100%<\/span>);\n            <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.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\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">60px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.15<\/span>);\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n        }\n        \n        <span class=\"hljs-selector-class\">.header<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, #<span class=\"hljs-number\">2<\/span>c3e50, #<span class=\"hljs-number\">34495<\/span>e);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n        }\n        \n        <span class=\"hljs-selector-class\">.header<\/span> <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">2.8rem<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header<\/span> <span class=\"hljs-selector-tag\">p<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.3rem<\/span>;\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.9<\/span>;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.6<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.dashboard<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: grid;\n            <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">350px<\/span> <span class=\"hljs-number\">1<\/span>fr;\n            <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">700px<\/span>;\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">1024px<\/span>) {\n            <span class=\"hljs-selector-class\">.dashboard<\/span> {\n                <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr;\n            }\n        }\n        \n        <span class=\"hljs-selector-class\">.sidebar<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n        }\n        \n        <span class=\"hljs-selector-class\">.search-section<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.search-box<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/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\">16px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.search-box<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span> {\n            <span class=\"hljs-attribute\">outline<\/span>: none;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#3498db<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">3px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">52<\/span>, <span class=\"hljs-number\">152<\/span>, <span class=\"hljs-number\">219<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.filters-section<\/span> {\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.section-title<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/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\">#2c3e50<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-buttons<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: grid;\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\">12px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">text-align<\/span>: left;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.filter-btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#3498db<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">5px<\/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\">#3498db<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#3498db<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.locations-list<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e9ecef<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#3498db<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span><span class=\"hljs-selector-class\">.active<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#3498db<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, #<span class=\"hljs-number\">3498<\/span>db, #<span class=\"hljs-number\">2980<\/span>b9);\n            <span class=\"hljs-attribute\">color<\/span>: white;\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\">margin-bottom<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-address<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9rem<\/span>;\n            <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0.8<\/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\">4px<\/span> <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ecf0f1<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.8rem<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span><span class=\"hljs-selector-class\">.active<\/span> <span class=\"hljs-selector-class\">.location-category<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">255<\/span>,<span class=\"hljs-number\">0.2<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.map-container<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: relative;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-controls<\/span> {\n            <span class=\"hljs-attribute\">position<\/span>: absolute;\n            <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">right<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1000<\/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\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.control-btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/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\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.control-btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(-<span class=\"hljs-number\">2px<\/span>);\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">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.15<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.stats-bar<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#2c3e50<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span> <span class=\"hljs-number\">30px<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n        }\n        \n        <span class=\"hljs-selector-class\">.stats-info<\/span> {\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.export-buttons<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.export-btn<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: transparent;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid white;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.export-btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#2c3e50<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/* Custom info window styles *\/<\/span>\n        <span class=\"hljs-selector-class\">.custom-info-window<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">overflow<\/span>: hidden;\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\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\ud83d\udccd Multiple Locations Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Visualize and manage all your business locations in one interactive map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"dashboard\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"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\">\"search-section\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"search-box\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"\ud83d\udd0d Search locations...\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"searchBox\"<\/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\">\"filters-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\">\"section-title\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83d\udcca Filter by Category<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-buttons\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn active\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"all\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83d\udccd<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> All Locations\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"retail\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83c\udfea<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Retail Stores\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"office\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83c\udfe2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Offices\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"warehouse\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83c\udfed<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Warehouses\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"service\"<\/span>&gt;<\/span>\n                            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83d\udd27<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Service Centers\n                        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"locations-list\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"locationsList\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-comment\">&lt;!-- Locations will be populated dynamically --&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-controls\"<\/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\">\"control-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"zoomToAllBtn\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\ud83d\udd0d<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Zoom to All\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"control-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"toggleClusteringBtn\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\u26a1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Toggle Clustering\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"control-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"addLocationBtn\"<\/span>&gt;<\/span>\n                        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>\u2795<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span> Add Location\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"stats-bar\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"stats-info\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"statsInfo\"<\/span>&gt;<\/span>\n                Loading your locations...\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"export-buttons\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"export-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"exportCSVBtn\"<\/span>&gt;<\/span>Export CSV<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\">\"export-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"shareMapBtn\"<\/span>&gt;<\/span>Share Map<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\">\"export-btn\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"printMapBtn\"<\/span>&gt;<\/span>Print Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Google Maps API --&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&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;!-- Marker Clusterer --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/unpkg.com\/@googlemaps\/markerclusterer\/dist\/index.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-comment\">\/\/ Sample business locations data<\/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 Flagship Store\"<\/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\">address<\/span>: <span class=\"hljs-string\">\"123 Main Street, New York, NY 10001\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4567\"<\/span>,\n                <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"downtown@business.com\"<\/span>,\n                <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"retail\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: {\n                    <span class=\"hljs-attr\">weekdays<\/span>: <span class=\"hljs-string\">\"9:00 AM - 9:00 PM\"<\/span>,\n                    <span class=\"hljs-attr\">weekends<\/span>: <span class=\"hljs-string\">\"10:00 AM - 6:00 PM\"<\/span>\n                },\n                <span class=\"hljs-attr\">services<\/span>: &#91;<span class=\"hljs-string\">\"Retail Sales\"<\/span>, <span class=\"hljs-string\">\"Product Demos\"<\/span>, <span class=\"hljs-string\">\"Customer Support\"<\/span>],\n                <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Wheelchair Access\"<\/span>, <span class=\"hljs-string\">\"Parking\"<\/span>, <span class=\"hljs-string\">\"Free WiFi\"<\/span>, <span class=\"hljs-string\">\"Gift Cards\"<\/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\">\"Corporate Headquarters\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7614<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9776<\/span> },\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Park Avenue, New York, NY 10065\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4568\"<\/span>,\n                <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"hq@business.com\"<\/span>,\n                <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"office\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: {\n                    <span class=\"hljs-attr\">weekdays<\/span>: <span class=\"hljs-string\">\"8:30 AM - 5:30 PM\"<\/span>,\n                    <span class=\"hljs-attr\">weekends<\/span>: <span class=\"hljs-string\">\"Closed\"<\/span>\n                },\n                <span class=\"hljs-attr\">services<\/span>: &#91;<span class=\"hljs-string\">\"Administration\"<\/span>, <span class=\"hljs-string\">\"B2B Sales\"<\/span>, <span class=\"hljs-string\">\"Management\"<\/span>, <span class=\"hljs-string\">\"HR\"<\/span>],\n                <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Meeting Rooms\"<\/span>, <span class=\"hljs-string\">\"Conference Facilities\"<\/span>, <span class=\"hljs-string\">\"Security\"<\/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\">\"Brooklyn Distribution Center\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.6782<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9442<\/span> },\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"789 Industrial Road, Brooklyn, NY 11201\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4569\"<\/span>,\n                <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"brooklyn@business.com\"<\/span>,\n                <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"warehouse\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: {\n                    <span class=\"hljs-attr\">weekdays<\/span>: <span class=\"hljs-string\">\"7:00 AM - 5:00 PM\"<\/span>,\n                    <span class=\"hljs-attr\">weekends<\/span>: <span class=\"hljs-string\">\"Closed\"<\/span>\n                },\n                <span class=\"hljs-attr\">services<\/span>: &#91;<span class=\"hljs-string\">\"Bulk Orders\"<\/span>, <span class=\"hljs-string\">\"Wholesale\"<\/span>, <span class=\"hljs-string\">\"Distribution\"<\/span>, <span class=\"hljs-string\">\"Storage\"<\/span>],\n                <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Loading Dock\"<\/span>, <span class=\"hljs-string\">\"Climate Control\"<\/span>, <span class=\"hljs-string\">\"Security System\"<\/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\">\"Midtown Service Center\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7549<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9840<\/span> },\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"321 5th Avenue, New York, NY 10018\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4570\"<\/span>,\n                <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"midtown@business.com\"<\/span>,\n                <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"service\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: {\n                    <span class=\"hljs-attr\">weekdays<\/span>: <span class=\"hljs-string\">\"8:00 AM - 6:00 PM\"<\/span>,\n                    <span class=\"hljs-attr\">weekends<\/span>: <span class=\"hljs-string\">\"9:00 AM - 5:00 PM\"<\/span>\n                },\n                <span class=\"hljs-attr\">services<\/span>: &#91;<span class=\"hljs-string\">\"Repairs\"<\/span>, <span class=\"hljs-string\">\"Maintenance\"<\/span>, <span class=\"hljs-string\">\"Technical Support\"<\/span>, <span class=\"hljs-string\">\"Parts\"<\/span>],\n                <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Service Bay\"<\/span>, <span class=\"hljs-string\">\"Diagnostic Equipment\"<\/span>, <span class=\"hljs-string\">\"Warranty Services\"<\/span>]\n            },\n            {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">5<\/span>,\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Queens Retail Outlet\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7282<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.7942<\/span> },\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"654 Queens Boulevard, Queens, NY 11377\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4571\"<\/span>,\n                <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"queens@business.com\"<\/span>,\n                <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"retail\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: {\n                    <span class=\"hljs-attr\">weekdays<\/span>: <span class=\"hljs-string\">\"10:00 AM - 8:00 PM\"<\/span>,\n                    <span class=\"hljs-attr\">weekends<\/span>: <span class=\"hljs-string\">\"10:00 AM - 8:00 PM\"<\/span>\n                },\n                <span class=\"hljs-attr\">services<\/span>: &#91;<span class=\"hljs-string\">\"Retail Sales\"<\/span>, <span class=\"hljs-string\">\"Special Orders\"<\/span>, <span class=\"hljs-string\">\"Gift Cards\"<\/span>],\n                <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Extended Hours\"<\/span>, <span class=\"hljs-string\">\"Family Friendly\"<\/span>, <span class=\"hljs-string\">\"Parking\"<\/span>]\n            },\n            {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">6<\/span>,\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Upper East Side Office\"<\/span>,\n                <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7738<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9565<\/span> },\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"987 Madison Avenue, New York, NY 10075\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(555) 123-4572\"<\/span>,\n                <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"ues@business.com\"<\/span>,\n                <span class=\"hljs-attr\">category<\/span>: <span class=\"hljs-string\">\"office\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: {\n                    <span class=\"hljs-attr\">weekdays<\/span>: <span class=\"hljs-string\">\"9:00 AM - 6:00 PM\"<\/span>,\n                    <span class=\"hljs-attr\">weekends<\/span>: <span class=\"hljs-string\">\"Closed\"<\/span>\n                },\n                <span class=\"hljs-attr\">services<\/span>: &#91;<span class=\"hljs-string\">\"Client Meetings\"<\/span>, <span class=\"hljs-string\">\"Consulting\"<\/span>, <span class=\"hljs-string\">\"Sales\"<\/span>],\n                <span class=\"hljs-attr\">features<\/span>: &#91;<span class=\"hljs-string\">\"Executive Suites\"<\/span>, <span class=\"hljs-string\">\"Client Lounge\"<\/span>, <span class=\"hljs-string\">\"Concierge\"<\/span>]\n            }\n        ];\n\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> infoWindow;\n        <span class=\"hljs-keyword\">let<\/span> markerCluster;\n        <span class=\"hljs-keyword\">let<\/span> isClusteringEnabled = <span class=\"hljs-literal\">true<\/span>;\n        <span class=\"hljs-keyword\">let<\/span> currentFilter = <span class=\"hljs-string\">'all'<\/span>;\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 with custom styling<\/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\">11<\/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> },\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"all\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"geometry\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#f5f5f5\"<\/span>}]\n                    },\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"water\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"geometry\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#c5e6ff\"<\/span>}]\n                    },\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"poi\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"off\"<\/span>}]\n                    }\n                ],\n                <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">fullscreenControl<\/span>: <span class=\"hljs-literal\">true<\/span>\n            });\n\n            infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n            \n            <span class=\"hljs-comment\">\/\/ Initialize marker clusterer<\/span>\n            markerCluster = <span class=\"hljs-keyword\">new<\/span> markerClusterer.MarkerClusterer({\n                map,\n                <span class=\"hljs-attr\">markers<\/span>: &#91;],\n                <span class=\"hljs-attr\">renderer<\/span>: {\n                    <span class=\"hljs-attr\">render<\/span>: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ count, position }<\/span>) =&gt;<\/span> <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                        <span class=\"hljs-attr\">label<\/span>: { <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-built_in\">String<\/span>(count), <span class=\"hljs-attr\">color<\/span>: <span class=\"hljs-string\">\"white\"<\/span>, <span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">\"12px\"<\/span>, <span class=\"hljs-attr\">fontWeight<\/span>: <span class=\"hljs-string\">\"bold\"<\/span> },\n                        position,\n                        <span class=\"hljs-attr\">icon<\/span>: {\n                            <span class=\"hljs-attr\">path<\/span>: google.maps.SymbolPath.CIRCLE,\n                            <span class=\"hljs-attr\">scale<\/span>: <span class=\"hljs-number\">30<\/span>,\n                            <span class=\"hljs-attr\">fillColor<\/span>: <span class=\"hljs-string\">\"#e74c3c\"<\/span>,\n                            <span class=\"hljs-attr\">fillOpacity<\/span>: <span class=\"hljs-number\">0.9<\/span>,\n                            <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">3<\/span>,\n                            <span class=\"hljs-attr\">strokeColor<\/span>: <span class=\"hljs-string\">\"#ffffff\"<\/span>\n                        },\n                        <span class=\"hljs-attr\">zIndex<\/span>: <span class=\"hljs-built_in\">Number<\/span>(google.maps.Marker.MAX_ZINDEX) + count\n                    })\n                }\n            });\n\n            <span class=\"hljs-comment\">\/\/ Create initial markers<\/span>\n            createMarkers(businessLocations);\n            populateLocationsList(businessLocations);\n            \n            <span class=\"hljs-comment\">\/\/ Set up event listeners<\/span>\n            setupEventListeners();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createMarkers<\/span>(<span class=\"hljs-params\">locations<\/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            markerCluster.clearMarkers();\n\n            <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n\n            locations.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>: isClusteringEnabled ? <span class=\"hljs-literal\">null<\/span> : map,\n                    <span class=\"hljs-attr\">title<\/span>: location.name,\n                    <span class=\"hljs-attr\">icon<\/span>: getCustomMarkerIcon(location.category),\n                    <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP\n                });\n\n                bounds.extend(location.position);\n\n                <span class=\"hljs-comment\">\/\/ Add click listener for info window<\/span>\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    showLocationInfo(marker, location);\n                    highlightLocationItem(location.id);\n                });\n\n                markers.push(marker);\n                \n                <span class=\"hljs-comment\">\/\/ Add to cluster if clustering enabled<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (isClusteringEnabled) {\n                    markerCluster.addMarker(marker);\n                }\n            });\n\n            <span class=\"hljs-comment\">\/\/ Fit map to show all markers if there are any<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (locations.length &gt; <span class=\"hljs-number\">0<\/span>) {\n                map.fitBounds(bounds);\n                \n                <span class=\"hljs-comment\">\/\/ Don't zoom in too far if there's only one point<\/span>\n                <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">1<\/span> &amp;&amp; map.getZoom() &gt; <span class=\"hljs-number\">15<\/span>) {\n                    map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                }\n            }\n\n            <span class=\"hljs-comment\">\/\/ Update statistics<\/span>\n            updateStats(locations.length);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">getCustomMarkerIcon<\/span>(<span class=\"hljs-params\">category<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> baseSize = <span class=\"hljs-keyword\">new<\/span> google.maps.Size(<span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">40<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> icons = {\n                <span class=\"hljs-attr\">retail<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/blue-dot.png'<\/span>,\n                    <span class=\"hljs-attr\">scaledSize<\/span>: baseSize\n                },\n                <span class=\"hljs-attr\">office<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/green-dot.png'<\/span>,\n                    <span class=\"hljs-attr\">scaledSize<\/span>: baseSize\n                },\n                <span class=\"hljs-attr\">warehouse<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/red-dot.png'<\/span>,\n                    <span class=\"hljs-attr\">scaledSize<\/span>: baseSize\n                },\n                <span class=\"hljs-attr\">service<\/span>: {\n                    <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">'https:\/\/maps.google.com\/mapfiles\/ms\/icons\/orange-dot.png'<\/span>,\n                    <span class=\"hljs-attr\">scaledSize<\/span>: baseSize\n                }\n            };\n            <span class=\"hljs-keyword\">return<\/span> icons&#91;category] || icons.retail;\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showLocationInfo<\/span>(<span class=\"hljs-params\">marker, location<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> servicesList = location.services.map(<span class=\"hljs-function\"><span class=\"hljs-params\">service<\/span> =&gt;<\/span> \n                <span class=\"hljs-string\">`&lt;li&gt;<span class=\"hljs-subst\">${service}<\/span>&lt;\/li&gt;`<\/span>\n            ).join(<span class=\"hljs-string\">''<\/span>);\n\n            <span class=\"hljs-keyword\">const<\/span> featuresList = location.features.map(<span class=\"hljs-function\"><span class=\"hljs-params\">feature<\/span> =&gt;<\/span> \n                <span class=\"hljs-string\">`&lt;span style=\"display: inline-block; background: #ecf0f1; padding: 4px 8px; margin: 2px; border-radius: 12px; font-size: 11px;\"&gt;<span class=\"hljs-subst\">${feature}<\/span>&lt;\/span&gt;`<\/span>\n            ).join(<span class=\"hljs-string\">''<\/span>);\n\n            <span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-string\">`\n                &lt;div style=\"padding: 25px; max-width: 400px; font-family: 'Segoe UI', sans-serif;\"&gt;\n                    &lt;h3 style=\"margin: 0 0 15px 0; color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px;\"&gt;\n                        <span class=\"hljs-subst\">${location.name}<\/span>\n                    &lt;\/h3&gt;\n                    \n                    &lt;div style=\"margin-bottom: 12px;\"&gt;\n                        &lt;strong style=\"color: #333;\"&gt;\ud83d\udccd Address:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"color: #666; line-height: 1.4;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 12px;\"&gt;\n                        &lt;strong style=\"color: #333;\"&gt;\ud83d\udcde Contact:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"color: #666;\"&gt;<span class=\"hljs-subst\">${location.phone}<\/span>&lt;\/span&gt;&lt;br&gt;\n                        &lt;span style=\"color: #666;\"&gt;<span class=\"hljs-subst\">${location.email}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 12px;\"&gt;\n                        &lt;strong style=\"color: #333;\"&gt;\ud83d\udd52 Hours:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"color: #666;\"&gt;Weekdays: <span class=\"hljs-subst\">${location.hours.weekdays}<\/span>&lt;\/span&gt;&lt;br&gt;\n                        &lt;span style=\"color: #666;\"&gt;Weekends: <span class=\"hljs-subst\">${location.hours.weekends}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 12px;\"&gt;\n                        &lt;strong style=\"color: #333;\"&gt;\ud83d\udee0\ufe0f Services:&lt;\/strong&gt;\n                        &lt;ul style=\"margin: 5px 0; padding-left: 20px; color: #666;\"&gt;\n                            <span class=\"hljs-subst\">${servicesList}<\/span>\n                        &lt;\/ul&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 15px;\"&gt;\n                        &lt;strong style=\"color: #333;\"&gt;\u2b50 Features:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;div style=\"display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;\"&gt;\n                            <span class=\"hljs-subst\">${featuresList}<\/span>\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"text-align: center;\"&gt;\n                        &lt;button onclick=\"navigateToLocation(<span class=\"hljs-subst\">${location.position.lat}<\/span>, <span class=\"hljs-subst\">${location.position.lng}<\/span>)\" \n                                style=\"background: #3498db; color: white; border: none; padding: 12px 25px; \n                                       border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;\n                                       transition: background 0.3s; margin-right: 10px;\"&gt;\n                            \ud83d\ude97 Get Directions\n                        &lt;\/button&gt;\n                        &lt;button onclick=\"callLocation('<span class=\"hljs-subst\">${location.phone}<\/span>')\" \n                                style=\"background: #27ae60; color: white; border: none; padding: 12px 25px; \n                                       border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px;\n                                       transition: background 0.3s;\"&gt;\n                            \ud83d\udcde Call Now\n                        &lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n            \n            infoWindow.setContent(content);\n            infoWindow.open(map, marker);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">populateLocationsList<\/span>(<span class=\"hljs-params\">locations<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> locationsList = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationsList'<\/span>);\n            locationsList.innerHTML = <span class=\"hljs-string\">''<\/span>;\n\n            <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">0<\/span>) {\n                locationsList.innerHTML = <span class=\"hljs-string\">`\n                    &lt;div style=\"text-align: center; padding: 40px 20px; color: #7f8c8d;\"&gt;\n                        &lt;div style=\"font-size: 3rem; margin-bottom: 15px;\"&gt;\ud83d\udccd&lt;\/div&gt;\n                        &lt;div&gt;No locations found&lt;\/div&gt;\n                        &lt;div style=\"font-size: 0.9rem; margin-top: 5px;\"&gt;Try changing your filters&lt;\/div&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n\n            locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> locationItem = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'div'<\/span>);\n                locationItem.className = <span class=\"hljs-string\">'location-item'<\/span>;\n                locationItem.dataset.id = location.id;\n                \n                locationItem.innerHTML = <span class=\"hljs-string\">`\n                    &lt;div class=\"location-name\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"location-address\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/div&gt;\n                    &lt;div class=\"location-category\"&gt;<span class=\"hljs-subst\">${location.category.toUpperCase()}<\/span>&lt;\/div&gt;\n                `<\/span>;\n                \n                locationItem.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    <span class=\"hljs-keyword\">const<\/span> marker = markers.find(<span class=\"hljs-function\"><span class=\"hljs-params\">m<\/span> =&gt;<\/span> m.title === location.name);\n                    <span class=\"hljs-keyword\">if<\/span> (marker) {\n                        map.panTo(marker.getPosition());\n                        map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                        showLocationInfo(marker, location);\n                        highlightLocationItem(location.id);\n                    }\n                });\n                \n                locationsList.appendChild(locationItem);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">highlightLocationItem<\/span>(<span class=\"hljs-params\">locationId<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Remove active class from all items<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.location-item'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">item<\/span> =&gt;<\/span> {\n                item.classList.remove(<span class=\"hljs-string\">'active'<\/span>);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Add active class to clicked item<\/span>\n            <span class=\"hljs-keyword\">const<\/span> activeItem = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">`.location-item&#91;data-id=\"<span class=\"hljs-subst\">${locationId}<\/span>\"]`<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (activeItem) {\n                activeItem.classList.add(<span class=\"hljs-string\">'active'<\/span>);\n                \n                <span class=\"hljs-comment\">\/\/ Scroll into view if needed<\/span>\n                activeItem.scrollIntoView({ <span class=\"hljs-attr\">behavior<\/span>: <span class=\"hljs-string\">'smooth'<\/span>, <span class=\"hljs-attr\">block<\/span>: <span class=\"hljs-string\">'nearest'<\/span> });\n            }\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-keyword\">const<\/span> filterButtons = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.filter-btn'<\/span>);\n            filterButtons.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">button<\/span> =&gt;<\/span> {\n                button.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    <span class=\"hljs-comment\">\/\/ Update active button<\/span>\n                    filterButtons.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">btn<\/span> =&gt;<\/span> btn.classList.remove(<span class=\"hljs-string\">'active'<\/span>));\n                    button.classList.add(<span class=\"hljs-string\">'active'<\/span>);\n                    \n                    <span class=\"hljs-comment\">\/\/ Filter locations<\/span>\n                    currentFilter = button.dataset.category;\n                    filterLocations(currentFilter);\n                });\n            });\n\n            <span class=\"hljs-comment\">\/\/ Search functionality<\/span>\n            <span class=\"hljs-keyword\">const<\/span> searchBox = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'searchBox'<\/span>);\n            searchBox.addEventListener(<span class=\"hljs-string\">'input'<\/span>, (e) =&gt; {\n                <span class=\"hljs-keyword\">const<\/span> searchTerm = e.target.value.toLowerCase();\n                filterLocationsBySearch(searchTerm);\n            });\n\n            <span class=\"hljs-comment\">\/\/ Control buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'zoomToAllBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, fitMapToAllLocations);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'toggleClusteringBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, toggleClustering);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'addLocationBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, showAddLocationModal);\n\n            <span class=\"hljs-comment\">\/\/ Export buttons<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'exportCSVBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, exportToCSV);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'shareMapBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, shareMap);\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'printMapBtn'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, printMap);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">filterLocations<\/span>(<span class=\"hljs-params\">category<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">let<\/span> filteredLocations;\n            \n            <span class=\"hljs-keyword\">if<\/span> (category === <span class=\"hljs-string\">'all'<\/span>) {\n                filteredLocations = businessLocations;\n            } <span class=\"hljs-keyword\">else<\/span> {\n                filteredLocations = businessLocations.filter(\n                    <span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> location.category === category\n                );\n            }\n            \n            createMarkers(filteredLocations);\n            populateLocationsList(filteredLocations);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">filterLocationsBySearch<\/span>(<span class=\"hljs-params\">searchTerm<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (!searchTerm) {\n                filterLocations(currentFilter);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">const<\/span> filteredLocations = businessLocations.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span>\n                location.name.toLowerCase().includes(searchTerm) ||\n                location.address.toLowerCase().includes(searchTerm) ||\n                location.services.some(<span class=\"hljs-function\"><span class=\"hljs-params\">service<\/span> =&gt;<\/span> \n                    service.toLowerCase().includes(searchTerm)\n                ) ||\n                location.category.toLowerCase().includes(searchTerm)\n            );\n            \n            createMarkers(filteredLocations);\n            populateLocationsList(filteredLocations);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">fitMapToAllLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            businessLocations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                bounds.extend(location.position);\n            });\n            \n            <span class=\"hljs-keyword\">if<\/span> (!bounds.isEmpty()) {\n                map.fitBounds(bounds);\n            }\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">toggleClustering<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            isClusteringEnabled = !isClusteringEnabled;\n            \n            <span class=\"hljs-keyword\">if<\/span> (isClusteringEnabled) {\n                markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> {\n                    marker.setMap(<span class=\"hljs-literal\">null<\/span>);\n                    markerCluster.addMarker(marker);\n                });\n            } <span class=\"hljs-keyword\">else<\/span> {\n                markerCluster.clearMarkers();\n                markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> {\n                    marker.setMap(map);\n                });\n            }\n            \n            updateStats(markers.length);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showAddLocationModal<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Simple modal for adding new locations<\/span>\n            <span class=\"hljs-keyword\">const<\/span> name = prompt(<span class=\"hljs-string\">'Enter location name:'<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (!name) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> address = prompt(<span class=\"hljs-string\">'Enter address or coordinates (lat,lng):'<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (!address) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Simple geocoding (in real app, use Google Geocoding API)<\/span>\n            alert(<span class=\"hljs-string\">'In a real application, this would geocode the address and add the location to your map.'<\/span>);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">exportToCSV<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> headers = &#91;<span class=\"hljs-string\">'Name'<\/span>, <span class=\"hljs-string\">'Address'<\/span>, <span class=\"hljs-string\">'Latitude'<\/span>, <span class=\"hljs-string\">'Longitude'<\/span>, <span class=\"hljs-string\">'Category'<\/span>, <span class=\"hljs-string\">'Phone'<\/span>, <span class=\"hljs-string\">'Email'<\/span>];\n            <span class=\"hljs-keyword\">const<\/span> csvContent = &#91;\n                headers.join(<span class=\"hljs-string\">','<\/span>),\n                ...businessLocations.map(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> &#91;\n                    <span class=\"hljs-string\">`\"<span class=\"hljs-subst\">${loc.name}<\/span>\"`<\/span>,\n                    <span class=\"hljs-string\">`\"<span class=\"hljs-subst\">${loc.address}<\/span>\"`<\/span>,\n                    loc.position.lat,\n                    loc.position.lng,\n                    loc.category,\n                    loc.phone,\n                    loc.email\n                ].join(<span class=\"hljs-string\">','<\/span>))\n            ].join(<span class=\"hljs-string\">'\\n'<\/span>);\n            \n            <span class=\"hljs-keyword\">const<\/span> blob = <span class=\"hljs-keyword\">new<\/span> Blob(&#91;csvContent], { <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'text\/csv'<\/span> });\n            <span class=\"hljs-keyword\">const<\/span> link = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'a'<\/span>);\n            link.href = URL.createObjectURL(blob);\n            link.download = <span class=\"hljs-string\">'business-locations.csv'<\/span>;\n            link.click();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">shareMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> mapData = {\n                <span class=\"hljs-attr\">center<\/span>: map.getCenter().toJSON(),\n                <span class=\"hljs-attr\">zoom<\/span>: map.getZoom(),\n                <span class=\"hljs-attr\">locations<\/span>: businessLocations.length\n            };\n            \n            <span class=\"hljs-keyword\">const<\/span> shareUrl = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">window<\/span>.location.origin}<\/span><span class=\"hljs-subst\">${<span class=\"hljs-built_in\">window<\/span>.location.pathname}<\/span>?map=<span class=\"hljs-subst\">${btoa(<span class=\"hljs-built_in\">JSON<\/span>.stringify(mapData))}<\/span>`<\/span>;\n            \n            navigator.clipboard.writeText(shareUrl).then(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n                alert(<span class=\"hljs-string\">'Map link copied to clipboard! Share this URL with your team.'<\/span>);\n            });\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">printMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-built_in\">window<\/span>.print();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateStats<\/span>(<span class=\"hljs-params\">locationCount<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> statsElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'statsInfo'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> categoryCounts = {};\n            \n            businessLocations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> {\n                categoryCounts&#91;loc.category] = (categoryCounts&#91;loc.category] || <span class=\"hljs-number\">0<\/span>) + <span class=\"hljs-number\">1<\/span>;\n            });\n            \n            <span class=\"hljs-keyword\">const<\/span> statsText = &#91;\n                <span class=\"hljs-string\">`<span class=\"hljs-subst\">${locationCount}<\/span> locations total`<\/span>,\n                <span class=\"hljs-string\">`Retail: <span class=\"hljs-subst\">${categoryCounts.retail || <span class=\"hljs-number\">0<\/span>}<\/span>`<\/span>,\n                <span class=\"hljs-string\">`Offices: <span class=\"hljs-subst\">${categoryCounts.office || <span class=\"hljs-number\">0<\/span>}<\/span>`<\/span>,\n                <span class=\"hljs-string\">`Warehouses: <span class=\"hljs-subst\">${categoryCounts.warehouse || <span class=\"hljs-number\">0<\/span>}<\/span>`<\/span>,\n                <span class=\"hljs-string\">`Service: <span class=\"hljs-subst\">${categoryCounts.service || <span class=\"hljs-number\">0<\/span>}<\/span>`<\/span>,\n                <span class=\"hljs-string\">`Clustering: <span class=\"hljs-subst\">${isClusteringEnabled ? <span class=\"hljs-string\">'ON'<\/span> : <span class=\"hljs-string\">'OFF'<\/span>}<\/span>`<\/span>\n            ].join(<span class=\"hljs-string\">' \u2022 '<\/span>);\n            \n            statsElement.textContent = statsText;\n        }\n\n        <span class=\"hljs-comment\">\/\/ Global functions for info window buttons<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.navigateToLocation = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">lat, lng<\/span>) <\/span>{\n            <span class=\"hljs-built_in\">window<\/span>.open(<span class=\"hljs-string\">`https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=<span class=\"hljs-subst\">${lat}<\/span>,<span class=\"hljs-subst\">${lng}<\/span>`<\/span>, <span class=\"hljs-string\">'_blank'<\/span>);\n        };\n\n        <span class=\"hljs-built_in\">window<\/span>.callLocation = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">phoneNumber<\/span>) <\/span>{\n            <span class=\"hljs-built_in\">window<\/span>.open(<span class=\"hljs-string\">`tel:<span class=\"hljs-subst\">${phoneNumber}<\/span>`<\/span>);\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-4\"><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 business locations map with filtering and clustering<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-120-1024x590.png\" alt=\"\" class=\"wp-image-628\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-120-1024x590.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-120-300x173.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-120-768x442.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-120.png 1170w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>\ud83d\ude80 Advanced Features<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Real-time Data Integration<\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Live location updates<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">connectToLiveData<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> eventSource = <span class=\"hljs-keyword\">new<\/span> EventSource(<span class=\"hljs-string\">'\/api\/locations\/stream'<\/span>);\n    \n    eventSource.onmessage = <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> newLocation = <span class=\"hljs-built_in\">JSON<\/span>.parse(event.data);\n        addLocationToMap(newLocation);\n    };\n}\n\n<span class=\"hljs-comment\">\/\/ Batch processing for large datasets<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">processLargeDataset<\/span>(<span class=\"hljs-params\">locations<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> batchSize = <span class=\"hljs-number\">100<\/span>;\n    \n    <span class=\"hljs-keyword\">for<\/span> (<span class=\"hljs-keyword\">let<\/span> i = <span class=\"hljs-number\">0<\/span>; i &lt; locations.length; i += batchSize) {\n        <span class=\"hljs-keyword\">const<\/span> batch = locations.slice(i, i + batchSize);\n        <span class=\"hljs-keyword\">await<\/span> addLocationsBatch(batch);\n        \n        <span class=\"hljs-comment\">\/\/ Prevent UI freezing<\/span>\n        <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">resolve<\/span> =&gt;<\/span> setTimeout(resolve, <span class=\"hljs-number\">100<\/span>));\n    }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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 class=\"has-text-align-center\">&nbsp;Performance Optimization<\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Efficient marker management<\/span>\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MarkerManager<\/span> <\/span>{\n    <span class=\"hljs-keyword\">constructor<\/span>(map) {\n        <span class=\"hljs-keyword\">this<\/span>.map = map;\n        <span class=\"hljs-keyword\">this<\/span>.markers = <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Map<\/span>();\n        <span class=\"hljs-keyword\">this<\/span>.clusterer = <span class=\"hljs-keyword\">new<\/span> markerClusterer.MarkerClusterer({map});\n    }\n    \n    addMarker(location) {\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\">title<\/span>: location.name\n        });\n        \n        <span class=\"hljs-keyword\">this<\/span>.markers.set(location.id, marker);\n        <span class=\"hljs-keyword\">this<\/span>.clusterer.addMarker(marker);\n    }\n    \n    removeMarker(locationId) {\n        <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">this<\/span>.markers.get(locationId);\n        <span class=\"hljs-keyword\">if<\/span> (marker) {\n            <span class=\"hljs-keyword\">this<\/span>.clusterer.removeMarker(marker);\n            <span class=\"hljs-keyword\">this<\/span>.markers.delete(locationId);\n        }\n    }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><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 class=\"has-text-align-center\"><strong>&nbsp;\ud83d\udee0\ufe0f Common Challenges &amp; Solutions<\/strong><\/p>\n\n\n\n<p><strong>&nbsp;Problem:<\/strong> Address Geocoding Accuracy<\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ Enhanced geocoding with validation<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">preciseGeocode<\/span>(<span class=\"hljs-params\">address<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n    \n    <span class=\"hljs-keyword\">try<\/span> {\n        <span class=\"hljs-keyword\">const<\/span> results = <span class=\"hljs-keyword\">await<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\n            geocoder.geocode({ address }, (results, status) =&gt; {\n                status === <span class=\"hljs-string\">'OK'<\/span> ? resolve(results) : reject(status);\n            });\n        });\n        \n        <span class=\"hljs-comment\">\/\/ Prefer high-accuracy results<\/span>\n        <span class=\"hljs-keyword\">const<\/span> preciseResult = results.find(<span class=\"hljs-function\"><span class=\"hljs-params\">result<\/span> =&gt;<\/span> \n            result.geometry.location_type === <span class=\"hljs-string\">'ROOFTOP'<\/span>\n        ) || results&#91;<span class=\"hljs-number\">0<\/span>];\n        \n        <span class=\"hljs-keyword\">return<\/span> {\n            <span class=\"hljs-attr\">position<\/span>: preciseResult.geometry.location,\n            <span class=\"hljs-attr\">formattedAddress<\/span>: preciseResult.formatted_address,\n            <span class=\"hljs-attr\">accuracy<\/span>: preciseResult.geometry.location_type\n        };\n    } <span class=\"hljs-keyword\">catch<\/span> (error) {\n        <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">'Geocoding failed:'<\/span>, error);\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">null<\/span>;\n    }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><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>&nbsp;Problem:<\/strong> Large Dataset Performance<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Implement marker clustering for 100+ locations<\/li>\n\n\n\n<li>&#8211; Use data sampling for very large datasets<\/li>\n\n\n\n<li>&#8211; Implement virtual scrolling for location lists<\/li>\n\n\n\n<li>&#8211; Use Web Workers for heavy computations<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>&nbsp;\ud83c\udfaf The Professional Solution: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>&nbsp;<\/strong><\/p>\n\n\n<p><iframe src=\"https:\/\/panel.mapsfun.com\/embed-map?code=668ecbcced7931f89205d1e881bb82aa&#038;lang=uk&#038;tpl=photo\" width=\"100%\" height=\"600\" style=\"border:0\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe><\/p>\n\n\n\n<p>While the technical approach provides flexibility, it comes with significant challenges:<\/p>\n\n\n\n<p><strong>Development Pain Points:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; \u23f0 Weeks of development time<\/li>\n\n\n\n<li>&#8211; \ud83d\udcbb Advanced programming skills required<\/li>\n\n\n\n<li>&#8211; \ud83d\udc1b Browser compatibility issues<\/li>\n\n\n\n<li>&#8211; \ud83d\udd27 Ongoing maintenance and updates<\/li>\n\n\n\n<li>&#8211; \ud83d\udcb0 Unpredictable API costs<\/li>\n\n\n\n<li>&#8211; \ud83d\udcf1 Mobile optimization challenges<\/li>\n<\/ul>\n\n\n\n<p><strong><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> Advantages:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; \u2705 3-minute setup &#8211; No coding required<\/li>\n\n\n\n<li>&#8211; \u2705 Drag-and-drop interface<\/li>\n\n\n\n<li>&#8211; \u2705 Automatic mobile optimization<\/li>\n\n\n\n<li>&#8211; \u2705 No API management or billing<\/li>\n\n\n\n<li>&#8211; \u2705 Professional templates included<\/li>\n\n\n\n<li>&#8211; \u2705 Real-time collaboration<\/li>\n\n\n\n<li>&#8211; \u2705 Bulk import from spreadsheets<\/li>\n\n\n\n<li>&#8211; \u2705 Advanced analytics built-in<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Google Map Plotting Multiple Locations: The Complete 2024 Guide Visualize multiple locations effortlessly on Google Maps Need to display multiple business locations, event venues, or custom points on Google Maps? This comprehensive guide covers all methods from simple to advanced, with complete code examples and professional tips. &nbsp;\ud83d\ude80 Quick Start: Choose Your Method &nbsp;\ud83d\udccd Method [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61,1],"tags":[],"class_list":["post-625","post","type-post","status-publish","format-standard","hentry","category-google-map-plotting-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/625","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=625"}],"version-history":[{"count":3,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":633,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/625\/revisions\/633"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}