{"id":349,"date":"2025-12-15T11:43:36","date_gmt":"2025-12-15T08:43:36","guid":{"rendered":"https:\/\/mapsfun.com\/?p=349"},"modified":"2025-12-15T11:43:37","modified_gmt":"2025-12-15T08:43:37","slug":"how-to-add-multiple-locations-to-google-maps","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=349","title":{"rendered":"How to Add Multiple Locations to Google Maps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Show Several Locations on Google Maps: Complete 2025 Guide<\/h2>\n\n\n\n<p>Need to display multiple locations on Google Maps for your business, event, or personal use? This ultimate guide covers all methods from simple to professional solutions.<\/p>\n\n\n\n<p>&nbsp;Quick Start: Which Method is Right for You?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"845\" height=\"217\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-99.png\" alt=\"\" class=\"wp-image-350\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-99.png 845w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-99-300x77.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-99-768x197.png 768w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Method 1: Google My Maps (Recommended for Most Users)<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Step-by-Step Visual Guide<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create Your Map<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Visit [Google My Maps](https:\/\/www.google.com\/maps\/d\/)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Click &#8220;Create a New Map&#8221;<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Sign in with Google account<br><\/li>\n<\/ul>\n\n\n\n<p><strong>Click &#8220;Create a New Map&#8221; to begin<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-100-1024x486.png\" alt=\"\" class=\"wp-image-351\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-100-1024x486.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-100-300x142.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-100-768x364.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-100-1536x729.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-100.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-101-1024x517.png\" alt=\"\" class=\"wp-image-352\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-101-1024x517.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-101-300x152.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-101-768x388.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-101-1536x776.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-101.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>2. Add Locations &#8211; Three Easy Ways<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Option A: Search and Add<\/strong><\/li>\n\n\n\n<li>&#8211; Use the search bar: &#8220;Add to map&#8221;<\/li>\n\n\n\n<li>&#8211; Search for 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: Manual Marker Placement<\/strong><\/li>\n\n\n\n<li>&#8211; Click the marker icon in toolbar<\/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>Option C: Bulk Import (CSV)<\/strong><\/li>\n\n\n\n<li>&#8211; Click &#8220;Import&#8221; under first layer<\/li>\n\n\n\n<li>&#8211; Upload CSV file with addresses<\/li>\n\n\n\n<li>&#8211; Map automatically geocodes addresses<\/li>\n<\/ul>\n\n\n\n<p>Sample CSV Format:<\/p>\n\n\n\n<p><strong>csv<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">Name,Address,Description,Category\nCentral Store,123 Main St,Flagship location,Retail\nDowntown Office,456 Oak Ave,Headquarters,Office\nWarehouse,789 Industrial Rd,Storage facility,Warehouse\n<\/code><\/span><\/pre>\n\n\n<p><strong>3. Customize Your Markers<\/strong><\/p>\n\n\n\n<p>Click any marker \u2192 &#8220;Style&#8221; (paint bucket) to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Change marker color by category<\/li>\n\n\n\n<li>&#8211; Add custom icons<\/li>\n\n\n\n<li>&#8211; Adjust marker size<\/li>\n\n\n\n<li>&#8211; Use numbered labels<\/li>\n<\/ul>\n\n\n\n<p><strong>4. Organize with Layers<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Create separate layers for different location types<\/li>\n\n\n\n<li>&#8211; Example: &#8220;Retail Stores&#8221;, &#8220;Service Centers&#8221;, &#8220;Warehouses&#8221;<\/li>\n\n\n\n<li>&#8211; Toggle layers on\/off as needed<\/li>\n<\/ul>\n\n\n\n<p><strong>5. Add Rich Information<\/strong><\/p>\n\n\n\n<p>For each location, include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Business hours<\/li>\n\n\n\n<li>&#8211; Contact information<\/li>\n\n\n\n<li>&#8211; Photos<\/li>\n\n\n\n<li>&#8211; Descriptions<\/li>\n\n\n\n<li>&#8211; Website links<\/li>\n\n\n\n<li>&#8211; Pricing information<\/li>\n<\/ul>\n\n\n\n<p><strong>6. Share Your Map<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Click &#8220;Share&#8221; \u2192 Enable link sharing<\/li>\n\n\n\n<li>&#8211; Set to &#8220;Anyone with link can view&#8221;<\/li>\n\n\n\n<li>&#8211; For websites: Click &#8220;Embed on my site&#8221;<\/li>\n<\/ul>\n\n\n\n<p>Embed Code Example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> \n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/d\/embed?mid=YOUR_MAP_ID&amp;z=10\"<\/span>\n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"800\"<\/span> \n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"600\"<\/span>\n  <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border: 1px solid #ddd; border-radius: 8px;\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Method 2: Quick Manual Sharing<\/strong><\/p>\n\n\n\n<p>&nbsp;For Temporary or Simple Maps<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Open Google Maps (<strong>maps.google.com<\/strong>)<\/li>\n\n\n\n<li>2. Search first location<\/li>\n\n\n\n<li>3. Click &#8220;Save&#8221; \u2192 Choose list or create new<\/li>\n\n\n\n<li>4. Repeat for all locations<\/li>\n\n\n\n<li>5. Go to &#8220;Your Places&#8221; \u2192 &#8220;Saved&#8221;<\/li>\n\n\n\n<li>6. Share list via link or social media<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Method 3: Google Maps Platform (Advanced)<\/strong><\/p>\n\n\n\n<p>&nbsp;For Developers and Custom Applications<\/p>\n\n\n\n<p><strong>Setup Required APIs<\/strong><\/p>\n\n\n\n<p><strong>javascript<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" 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\">\/\/ Get API key and restrict it:<\/span>\n<span class=\"hljs-keyword\">const<\/span> API_KEY = <span class=\"hljs-string\">'your_secured_api_key_here'<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">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>Complete Implementation Code<br>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" 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>Multiple Business Locations<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        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Arial'<\/span>, sans-serif;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f5f5f5<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.container<\/span> {\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1200px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        <span class=\"hljs-selector-tag\">header<\/span> {\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">30px<\/span>;\n        }\n        <span class=\"hljs-selector-tag\">h1<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.map-controls<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\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\">12px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e0e0e0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.category-filters<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">flex-wrap<\/span>: wrap;\n        }\n        <span class=\"hljs-selector-class\">.filter-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\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#e0e0e0<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span> ease;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\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\">#4285F4<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#4285F4<\/span>;\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\">#4285F4<\/span>;\n        }\n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">600px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/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        }\n        <span class=\"hljs-selector-class\">.locations-counter<\/span> {\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#666<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/* Responsive Design *\/<\/span>\n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n            <span class=\"hljs-selector-class\">.container<\/span> {\n                <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            }\n            <span class=\"hljs-selector-id\">#map<\/span> {\n                <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            }\n            <span class=\"hljs-selector-class\">.filter-btn<\/span> {\n                <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">16px<\/span>;\n                <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n            }\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Our Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Find our stores and service centers near you<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-controls\"<\/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\">\"Search locations...\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"searchBox\"<\/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\">\"category-filters\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn active\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"all\"<\/span>&gt;<\/span>All Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"filter-btn\"<\/span> <span class=\"hljs-attr\">data-category<\/span>=<span class=\"hljs-string\">\"retail\"<\/span>&gt;<\/span>Stores<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>Service Centers<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>Warehouses<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\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"locations-counter\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"locationsCounter\"<\/span>&gt;<\/span>Showing 0 locations<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-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-comment\">\/\/ 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            },\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\">\"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\">\"456 5th Avenue, New York, NY 10018\"<\/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\">\"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>]\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>]\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\">\"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\">\"321 Queens Boulevard, Queens, NY 11377\"<\/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\">\"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            },\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\">\"Manhattan Corporate Office\"<\/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\">\"654 Park Avenue, New York, NY 10065\"<\/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\">\"corporate@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: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>]\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\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">12<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span> },\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"administrative\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.text.fill\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#444444\"<\/span>}]\n                    },\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"landscape\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"all\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#f2f2f2\"<\/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\">\"all\"<\/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-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"road\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"all\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"saturation\"<\/span>: <span class=\"hljs-number\">-100<\/span>}, {<span class=\"hljs-string\">\"lightness\"<\/span>: <span class=\"hljs-number\">45<\/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\">\"all\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#d4e6ff\"<\/span>}, {<span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"on\"<\/span>}]\n                    }\n                ]\n            });\n\n            infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n            \n            <span class=\"hljs-comment\">\/\/ Create initial markers<\/span>\n            createMarkers(businessLocations);\n            \n            <span class=\"hljs-comment\">\/\/ Setup 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\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, index<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">position<\/span>: location.position,\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: location.name,\n                    <span class=\"hljs-attr\">icon<\/span>: 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                });\n\n                markers.push(marker);\n            });\n\n            <span class=\"hljs-comment\">\/\/ Fit map to show all markers<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (locations.length &gt; <span class=\"hljs-number\">0<\/span>) {\n                map.fitBounds(bounds);\n            }\n\n            <span class=\"hljs-comment\">\/\/ Update locations counter<\/span>\n            updateLocationsCounter(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\">32<\/span>, <span class=\"hljs-number\">32<\/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\">service<\/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            };\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> content = <span class=\"hljs-string\">`\n                &lt;div style=\"padding: 15px; max-width: 300px; font-family: Arial, sans-serif;\"&gt;\n                    &lt;h3 style=\"margin: 0 0 10px 0; color: #1a73e8; border-bottom: 2px solid #1a73e8; padding-bottom: 5px;\"&gt;\n                        <span class=\"hljs-subst\">${location.name}<\/span>\n                    &lt;\/h3&gt;\n                    \n                    &lt;div style=\"margin-bottom: 10px;\"&gt;\n                        &lt;strong&gt;\ud83d\udccd Address:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"color: #666;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 10px;\"&gt;\n                        &lt;strong&gt;\ud83d\udcde Contact:&lt;\/strong&gt;&lt;br&gt;\n                        Phone: <span class=\"hljs-subst\">${location.phone}<\/span>&lt;br&gt;\n                        Email: <span class=\"hljs-subst\">${location.email}<\/span>\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 10px;\"&gt;\n                        &lt;strong&gt;\ud83d\udd52 Hours:&lt;\/strong&gt;&lt;br&gt;\n                        Weekdays: <span class=\"hljs-subst\">${location.hours.weekdays}<\/span>&lt;br&gt;\n                        Weekends: <span class=\"hljs-subst\">${location.hours.weekends}<\/span>\n                    &lt;\/div&gt;\n                    \n                    &lt;div style=\"margin-bottom: 15px;\"&gt;\n                        &lt;strong&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=\"text-align: center;\"&gt;\n                        &lt;a href=\"https:\/\/maps.google.com\/?q=<span class=\"hljs-subst\">${location.position.lat}<\/span>,<span class=\"hljs-subst\">${location.position.lng}<\/span>\" \n                           target=\"_blank\" \n                           style=\"background: #1a73e8; color: white; padding: 10px 20px; \n                                  text-decoration: none; border-radius: 5px; display: inline-block;\n                                  font-weight: bold; transition: background 0.3s;\"&gt;\n                            Get Directions\n                        &lt;\/a&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\">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                    <span class=\"hljs-keyword\">const<\/span> category = button.dataset.category;\n                    filterLocations(category);\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\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        }\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                <span class=\"hljs-keyword\">const<\/span> activeCategory = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'.filter-btn.active'<\/span>).dataset.category;\n                filterLocations(activeCategory);\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            );\n            \n            createMarkers(filteredLocations);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateLocationsCounter<\/span>(<span class=\"hljs-params\">count<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> counter = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationsCounter'<\/span>);\n            counter.textContent = <span class=\"hljs-string\">`Showing <span class=\"hljs-subst\">${count}<\/span> location<span class=\"hljs-subst\">${count !== <span class=\"hljs-number\">1<\/span> ? <span class=\"hljs-string\">'s'<\/span> : <span class=\"hljs-string\">''<\/span>}<\/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-3\"><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>Interactive map with search and filtering capabilities<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"300\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-102.png\" alt=\"\" class=\"wp-image-589\" style=\"width:646px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-102.png 626w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-102-300x144.png 300w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>Advanced Features<\/strong><\/p>\n\n\n\n<p>\u00a0<strong>Marker Clustering for Many Locations<\/strong><\/p>\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-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=\"actionscript\">\n<span class=\"hljs-comment\">\/\/ Add clustering for better performance<\/span>\n<span class=\"hljs-keyword\">const<\/span> markerCluster = <span class=\"hljs-keyword\">new<\/span> markerClusterer.MarkerClusterer({\n    map,\n    markers,\n    algorithm: <span class=\"hljs-keyword\">new<\/span> markerClusterer.GridAlgorithm({ maxDistance: <span class=\"hljs-number\">50<\/span> })\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/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>\u00a0Real-time Location Updates<\/strong><\/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\">\/\/ Auto-refresh locations from API<\/span>\n<span class=\"hljs-keyword\">async<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">refreshLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> response = <span class=\"hljs-keyword\">await<\/span> fetch(<span class=\"hljs-string\">'\/api\/locations'<\/span>);\n    <span class=\"hljs-keyword\">const<\/span> newLocations = <span class=\"hljs-keyword\">await<\/span> response.json();\n    updateMapMarkers(newLocations);\n}\n<span class=\"hljs-comment\">\/\/ Refresh every 5 minutes<\/span>\nsetInterval(refreshLocations, <span class=\"hljs-number\">300000<\/span>);\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\"><strong>Common Problems &amp; Solutions<\/strong><br><\/p>\n\n\n\n<p><strong>Problem: Addresses Not Geocoding Correctly<\/strong><\/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\">\/\/ Enhanced geocoding with error handling<\/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\">\/\/ Get most precise result<\/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> preciseResult.geometry.location;\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-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><strong>\u00a0Problem: Map Loading Slowly<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Implement lazy loading<\/li>\n\n\n\n<li>&#8211; Use static map for initial view<\/li>\n\n\n\n<li>&#8211; Optimize marker images<\/li>\n\n\n\n<li>&#8211; Enable compression<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0The Professional Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>\u00a0<\/strong><\/p>\n\n\n\n<p>While the technical solutions work, they require significant effort:<\/p>\n\n\n\n<p><strong>Traditional Approach Challenges:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; \ud83d\udd52 Days of development time<\/li>\n\n\n\n<li>&#8211; \ud83d\udcbb Advanced coding skills required<\/li>\n\n\n\n<li>&#8211; \ud83d\udd27 Ongoing maintenance needed<\/li>\n\n\n\n<li>&#8211; \ud83d\udcb0 API costs and billing management<\/li>\n\n\n\n<li>&#8211; \ud83d\udcf1 Mobile compatibility issues<\/li>\n\n\n\n<li>&#8211; \ud83d\udc1b Browser testing and bug fixes<\/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><strong>&#8211; \u2705 5-minute setup <\/strong>&#8211; No technical skills needed<\/li>\n\n\n\n<li><strong>&#8211; \u2705 Drag-and-drop interface<\/strong> &#8211; Visual map builder<\/li>\n\n\n\n<li><strong>&#8211; \u2705 Automatic updates<\/strong> &#8211; Real-time changes<\/li>\n\n\n\n<li><strong>&#8211; \u2705 No API management<\/strong> &#8211; We handle all backend<\/li>\n\n\n\n<li><strong>&#8211; \u2705 Mobile-optimized <\/strong>&#8211; Perfect on all devices<\/li>\n\n\n\n<li><strong>&#8211; \u2705 Professional templates<\/strong> &#8211; Beautiful, brand-ready designs<\/li>\n\n\n\n<li><strong>&#8211; \u2705 Bulk location import<\/strong> &#8211; Add hundreds of locations via spreadsheet<\/li>\n\n\n\n<li><strong>&#8211; \u2705 Advanced features included <\/strong>&#8211; Clustering, filtering, custom styles<\/li>\n<\/ul>\n\n\n\n<p><strong>&#8220;I used to charge clients $2,000+ for custom maps. Now with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> , I deliver better results in 1\/10th the time. It&#8217;s transformed my service offerings.&#8221;<\/strong> &#8211; Michael T., Web Developer<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Ready to Create Your Map?<\/strong><\/p>\n\n\n\n<p>For developers with time and budget: Use the Google Maps Platform approach above.<\/p>\n\n\n\n<p>For everyone else: Get professional results instantly with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/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 class=\"has-text-align-center\"><strong>\u00a0Why Choose <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> ?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; \ud83d\ude80 Go live in minutes, not days<\/li>\n\n\n\n<li>&#8211; \ud83c\udfa8 Professional designs without design skills<\/li>\n\n\n\n<li>&#8211; \ud83d\udcca Advanced features without coding<\/li>\n\n\n\n<li>&#8211; \ud83d\udd27 Zero maintenance required<\/li>\n\n\n\n<li>&#8211; \ud83d\udcb0 Predictable pricing, no surprise bills<\/li>\n<\/ul>\n\n\n\n<p>Create your first multi-location map for free at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> and see why thousands of businesses choose us for their mapping needs.<\/p>\n\n\n\n<p><strong>Stop struggling with complex code &#8211; start mapping your success today!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"How to Show Several Locations on Google Maps: Complete 2025 Guide Need to display multiple locations on Google Maps for your business, event, or personal use? This ultimate guide covers all methods from simple to professional solutions. &nbsp;Quick Start: Which Method is Right for You? \u00a0Method 1: Google My Maps (Recommended for Most Users) &nbsp;Step-by-Step [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52,1],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-google-map-several-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/349","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=349"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":590,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/349\/revisions\/590"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}