{"id":817,"date":"2025-12-19T17:22:27","date_gmt":"2025-12-19T14:22:27","guid":{"rendered":"https:\/\/mapsfun.com\/?p=817"},"modified":"2025-12-19T17:22:27","modified_gmt":"2025-12-19T14:22:27","slug":"how-to-put-multiple-locations-on-a-map-step-by-step-tutorial","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=817","title":{"rendered":"How to Put Multiple Locations on a Map (Step-by-Step Tutorial)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Put Multiple Locations on a Map: The Technical Guide<\/h2>\n\n\n\n<p>Need to visualize multiple addresses on a single map? Whether you&#8217;re showing store locations, event venues, delivery areas, or property listings, displaying multiple points on a map requires specific techniques. Here&#8217;s the working method using Google Maps Platform.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Using Google Maps JavaScript API with Custom Markers<\/strong><\/p>\n\n\n\n<p>This approach gives you complete control but requires programming knowledge and API setup.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Google Cloud Project<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Visit <strong>[Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong><\/li>\n\n\n\n<li>2. Create a new project (e.g., &#8220;Multi-Location Visualizer&#8221;)<\/li>\n\n\n\n<li>3. <strong>Enable billing <\/strong>($200 monthly free credit for most use cases)<\/li>\n\n\n\n<li>4. Enable these essential APIs:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; <strong>Maps JavaScript API<\/strong> (for the interactive map)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211;<strong> Geocoding API<\/strong> (to convert addresses to coordinates)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; <strong>Places API<\/strong> (for search functionality)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"455\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-203-1024x455.png\" alt=\"\" class=\"wp-image-818\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-203-1024x455.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-203-300x133.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-203-768x341.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-203-1536x683.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-203.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Generate and Secure Your API Key<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to <strong>Credentials \u2192 Create Credentials \u2192 API Key<\/strong><\/li>\n\n\n\n<li><strong>2. Immediately restrict <\/strong>to prevent security issues:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Application: <strong>HTTP referrers<\/strong><\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Website restrictions: `*.yourdomain.com\/*`<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; API restrictions: Select only the three APIs you enabled<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"659\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-204.png\" alt=\"\" class=\"wp-image-819\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-204.png 700w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-204-300x282.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Create the Map with Multiple Locations<\/p>\n\n\n\n<p>Create `multiple-locations-map.html` with this complete code:<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Multiple Locations Map Visualization<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-pseudo\">:root<\/span> {\n            <span class=\"hljs-attribute\">--primary-color<\/span>: <span class=\"hljs-number\">#4285f4<\/span>;\n            <span class=\"hljs-attribute\">--secondary-color<\/span>: <span class=\"hljs-number\">#34a853<\/span>;\n            <span class=\"hljs-attribute\">--accent-color<\/span>: <span class=\"hljs-number\">#ea4335<\/span>;\n            <span class=\"hljs-attribute\">--light-bg<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Inter'<\/span>, -apple-system, BlinkMacSystemFont, sans-serif;\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\">background<\/span>: <span class=\"hljs-number\">#f0f2f5<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#202124<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.app-container<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">min-height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-sidebar<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">380px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dadce0<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.05<\/span>);\n            <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.map-header<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, var(--primary-color), <span class=\"hljs-number\">#5c6bc0<\/span>);\n            <span class=\"hljs-attribute\">color<\/span>: white;\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            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">16px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100vh<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-card<\/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\">padding<\/span>: <span class=\"hljs-number\">18px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e8eaed<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span> ease;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.05<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-card<\/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\">15px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">66<\/span>, <span class=\"hljs-number\">133<\/span>, <span class=\"hljs-number\">244<\/span>, <span class=\"hljs-number\">0.15<\/span>);\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-header<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">align-items<\/span>: flex-start;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">12px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-title<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#202124<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-type<\/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\">10px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.store<\/span> { <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e8f0fe<\/span>; <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color); }\n        <span class=\"hljs-selector-class\">.office<\/span> { <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e6f4ea<\/span>; <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--secondary-color); }\n        <span class=\"hljs-selector-class\">.warehouse<\/span> { <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fce8e6<\/span>; <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--accent-color); }\n        \n        <span class=\"hljs-selector-class\">.location-details<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.5<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-actions<\/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\">margin-top<\/span>: <span class=\"hljs-number\">15px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.action-btn<\/span> {\n            <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">13px<\/span>;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">500<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span>;\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n        }\n        \n        <span class=\"hljs-selector-class\">.directions-btn<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n        }\n        \n        <span class=\"hljs-selector-class\">.details-btn<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--light-bg);\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.search-box<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dadce0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#locationSearch<\/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> <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#dadce0<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: border-color <span class=\"hljs-number\">0.2s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-id\">#locationSearch<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span> {\n            <span class=\"hljs-attribute\">outline<\/span>: none;\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <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\">2px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">66<\/span>, <span class=\"hljs-number\">133<\/span>, <span class=\"hljs-number\">244<\/span>, <span class=\"hljs-number\">0.2<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.stats-bar<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">16px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--light-bg);\n            <span class=\"hljs-attribute\">border-top<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e8eaed<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">13px<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#5f6368<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.cluster-marker<\/span> {\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">40px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--primary-color);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">align-items<\/span>: center;\n            <span class=\"hljs-attribute\">justify-content<\/span>: center;\n            <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">3px<\/span> solid white;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">6px<\/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.3<\/span>);\n        }\n        \n        <span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">max-width:<\/span> <span class=\"hljs-number\">768px<\/span>) {\n            <span class=\"hljs-selector-class\">.app-container<\/span> {\n                <span class=\"hljs-attribute\">flex-direction<\/span>: column;\n            }\n            \n            <span class=\"hljs-selector-class\">.map-sidebar<\/span> {\n                <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n                <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">40vh<\/span>;\n            }\n            \n            <span class=\"hljs-selector-id\">#map<\/span> {\n                <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">60vh<\/span>;\n            }\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&amp;display=swap\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"app-container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-comment\">&lt;!-- Sidebar with locations --&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-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\">\"map-header\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: 0 0 8px 0; font-size: 24px;\"<\/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> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin: 0; opacity: 0.9; font-size: 14px;\"<\/span>&gt;<\/span>Visualizing all your 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\">\"search-box\"<\/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\">id<\/span>=<span class=\"hljs-string\">\"locationSearch\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search locations...\"<\/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 loaded here dynamically --&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\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"totalLocations\"<\/span>&gt;<\/span>0 locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"mapBounds\"<\/span>&gt;<\/span>Worldwide<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-comment\">&lt;!-- Main map container --&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-comment\">&lt;!-- Load 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_HERE&amp;libraries=places,geometry\"<\/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\">\/\/ Replace with your actual API key<\/span>\n        <span class=\"hljs-keyword\">const<\/span> API_KEY = <span class=\"hljs-string\">'YOUR_API_KEY_HERE'<\/span>;\n        \n        <span class=\"hljs-comment\">\/\/ Sample location data - in real use, this would come from a database<\/span>\n        <span class=\"hljs-keyword\">const<\/span> locationsData = &#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\">\"New York Headquarters\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"123 Park Ave, New York, NY 10017\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7549<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9840<\/span>,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"office\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(212) 555-1001\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 9AM-6PM\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Main corporate office with customer service\"<\/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\">\"Downtown Retail Store\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"456 Broadway, New York, NY 10013\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7209<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0095<\/span>,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"store\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(212) 555-1002\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Sun: 10AM-9PM\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Flagship retail store with full inventory\"<\/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\">address<\/span>: <span class=\"hljs-string\">\"789 Industrial Way, Brooklyn, NY 11231\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.6759<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0112<\/span>,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"warehouse\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(718) 555-1003\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 7AM-5PM\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Primary warehouse and distribution hub\"<\/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 Service Center\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"101 Queens Blvd, Queens, NY 11375\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7265<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.8523<\/span>,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"office\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(347) 555-1004\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Sat: 8AM-8PM\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Customer service and support center\"<\/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 Flagship Store\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"202 5th Avenue, New York, NY 10010\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7421<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-73.9897<\/span>,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"store\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(212) 555-1005\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Sun: 10AM-10PM\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Largest retail location with premium products\"<\/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\">\"Staten Island Warehouse\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"303 Richmond Terrace, Staten Island, NY 10301\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.6438<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0782<\/span>,\n                <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"warehouse\"<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"(718) 555-1006\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 6AM-4PM\"<\/span>,\n                <span class=\"hljs-attr\">description<\/span>: <span class=\"hljs-string\">\"Secondary storage and fulfillment center\"<\/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> infoWindows = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> bounds;\n        <span class=\"hljs-keyword\">let<\/span> geocoder;\n        \n        <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Create map centered on average location<\/span>\n            <span class=\"hljs-keyword\">const<\/span> centerLat = locationsData.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">sum, loc<\/span>) =&gt;<\/span> sum + loc.lat, <span class=\"hljs-number\">0<\/span>) \/ locationsData.length;\n            <span class=\"hljs-keyword\">const<\/span> centerLng = locationsData.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">sum, loc<\/span>) =&gt;<\/span> sum + loc.lng, <span class=\"hljs-number\">0<\/span>) \/ locationsData.length;\n            \n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'map'<\/span>), {\n                <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: centerLat, <span class=\"hljs-attr\">lng<\/span>: centerLng },\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">11<\/span>,\n                <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">false<\/span>,\n                <span class=\"hljs-attr\">fullscreenControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"poi\"<\/span>,\n                        <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>,\n                        <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n                    },\n                    {\n                        <span class=\"hljs-attr\">featureType<\/span>: <span class=\"hljs-string\">\"transit\"<\/span>,\n                        <span class=\"hljs-attr\">elementType<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>,\n                        <span class=\"hljs-attr\">stylers<\/span>: &#91;{ <span class=\"hljs-attr\">visibility<\/span>: <span class=\"hljs-string\">\"off\"<\/span> }]\n                    }\n                ]\n            });\n            \n            geocoder = <span class=\"hljs-keyword\">new<\/span> google.maps.Geocoder();\n            bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            \n            <span class=\"hljs-comment\">\/\/ Create markers for each location<\/span>\n            createMarkers();\n            \n            <span class=\"hljs-comment\">\/\/ Create location cards in sidebar<\/span>\n            renderLocationCards();\n            \n            <span class=\"hljs-comment\">\/\/ Fit map to show all markers<\/span>\n            map.fitBounds(bounds);\n            \n            <span class=\"hljs-comment\">\/\/ Add search functionality<\/span>\n            setupSearch();\n            \n            <span class=\"hljs-comment\">\/\/ Update stats<\/span>\n            updateStats();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Create markers on the map<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createMarkers<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Clear existing markers<\/span>\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> marker.setMap(<span class=\"hljs-literal\">null<\/span>));\n            markers = &#91;];\n            infoWindows = &#91;];\n            \n            <span class=\"hljs-comment\">\/\/ Define marker colors by type<\/span>\n            <span class=\"hljs-keyword\">const<\/span> typeColors = {\n                <span class=\"hljs-string\">'office'<\/span>: <span class=\"hljs-string\">'#4285f4'<\/span>,\n                <span class=\"hljs-string\">'store'<\/span>: <span class=\"hljs-string\">'#34a853'<\/span>,\n                <span class=\"hljs-string\">'warehouse'<\/span>: <span class=\"hljs-string\">'#ea4335'<\/span>\n            };\n            \n            <span class=\"hljs-comment\">\/\/ Create each marker<\/span>\n            locationsData.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">location, index<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> markerColor = typeColors&#91;location.type] || <span class=\"hljs-string\">'#666666'<\/span>;\n                \n                <span class=\"hljs-comment\">\/\/ Create custom marker<\/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>: { <span class=\"hljs-attr\">lat<\/span>: location.lat, <span class=\"hljs-attr\">lng<\/span>: location.lng },\n                    <span class=\"hljs-attr\">map<\/span>: map,\n                    <span class=\"hljs-attr\">title<\/span>: location.name,\n                    <span class=\"hljs-attr\">animation<\/span>: google.maps.Animation.DROP,\n                    <span class=\"hljs-attr\">icon<\/span>: {\n                        <span class=\"hljs-attr\">path<\/span>: google.maps.SymbolPath.CIRCLE,\n                        <span class=\"hljs-attr\">fillColor<\/span>: markerColor,\n                        <span class=\"hljs-attr\">fillOpacity<\/span>: <span class=\"hljs-number\">1<\/span>,\n                        <span class=\"hljs-attr\">strokeWeight<\/span>: <span class=\"hljs-number\">2<\/span>,\n                        <span class=\"hljs-attr\">strokeColor<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n                        <span class=\"hljs-attr\">scale<\/span>: <span class=\"hljs-number\">12<\/span>\n                    }\n                });\n                \n                <span class=\"hljs-comment\">\/\/ Extend bounds to include this marker<\/span>\n                bounds.extend(marker.getPosition());\n                \n                <span class=\"hljs-comment\">\/\/ Create info window content<\/span>\n                <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                    <span class=\"hljs-attr\">content<\/span>: createInfoWindowContent(location, markerColor)\n                });\n                \n                <span class=\"hljs-comment\">\/\/ Add click listener to marker<\/span>\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    <span class=\"hljs-comment\">\/\/ Close all other info windows<\/span>\n                    infoWindows.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">iw<\/span> =&gt;<\/span> iw.close());\n                    infoWindow.open(map, marker);\n                    \n                    <span class=\"hljs-comment\">\/\/ Center map on this marker<\/span>\n                    map.panTo(marker.getPosition());\n                    map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                    \n                    <span class=\"hljs-comment\">\/\/ Highlight corresponding card<\/span>\n                    highlightLocationCard(location.id);\n                });\n                \n                markers.push(marker);\n                infoWindows.push(infoWindow);\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Create info window HTML content<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">createInfoWindowContent<\/span>(<span class=\"hljs-params\">location, color<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-string\">`\n                &lt;div style=\"min-width: 280px; padding: 5px;\"&gt;\n                    &lt;div style=\"border-left: 4px solid <span class=\"hljs-subst\">${color}<\/span>; padding-left: 12px;\"&gt;\n                        &lt;h3 style=\"margin: 0 0 8px 0; color: #202124;\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/h3&gt;\n                        &lt;div style=\"color: #5f6368; margin-bottom: 12px;\"&gt;\n                            &lt;div style=\"margin-bottom: 4px;\"&gt;\ud83d\udccd <span class=\"hljs-subst\">${location.address}<\/span>&lt;\/div&gt;\n                            &lt;div style=\"margin-bottom: 4px;\"&gt;\ud83d\udcde <span class=\"hljs-subst\">${location.phone}<\/span>&lt;\/div&gt;\n                            &lt;div style=\"margin-bottom: 4px;\"&gt;\u23f0 <span class=\"hljs-subst\">${location.hours}<\/span>&lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;p style=\"margin: 0; color: #5f6368; font-size: 14px;\"&gt;<span class=\"hljs-subst\">${location.description}<\/span>&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"margin-top: 15px; display: flex; gap: 8px;\"&gt;\n                        &lt;a href=\"https:\/\/www.google.com\/maps\/dir\/?api=1&amp;destination=<span class=\"hljs-subst\">${location.lat}<\/span>,<span class=\"hljs-subst\">${location.lng}<\/span>\"\n                           target=\"_blank\"\n                           style=\"flex: 1; padding: 8px 12px; background: <span class=\"hljs-subst\">${color}<\/span>; color: white; text-decoration: none; border-radius: 4px; text-align: center; font-size: 13px; font-weight: 500;\"&gt;\n                           Get Directions\n                        &lt;\/a&gt;\n                        &lt;button onclick=\"zoomToLocation(<span class=\"hljs-subst\">${location.lat}<\/span>, <span class=\"hljs-subst\">${location.lng}<\/span>)\"\n                                style=\"flex: 1; padding: 8px 12px; background: #f1f3f4; border: none; border-radius: 4px; color: #5f6368; cursor: pointer; font-size: 13px; font-weight: 500;\"&gt;\n                            Zoom In\n                        &lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Render location cards in sidebar<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">renderLocationCards<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> container = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationsList'<\/span>);\n            <span class=\"hljs-keyword\">let<\/span> html = <span class=\"hljs-string\">''<\/span>;\n            \n            locationsData.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">location<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> typeColors = {\n                    <span class=\"hljs-string\">'office'<\/span>: <span class=\"hljs-string\">'office'<\/span>,\n                    <span class=\"hljs-string\">'store'<\/span>: <span class=\"hljs-string\">'store'<\/span>,\n                    <span class=\"hljs-string\">'warehouse'<\/span>: <span class=\"hljs-string\">'warehouse'<\/span>\n                };\n                \n                html += <span class=\"hljs-string\">`\n                    &lt;div class=\"location-card\" data-id=\"<span class=\"hljs-subst\">${location.id}<\/span>\" onclick=\"focusOnLocation(<span class=\"hljs-subst\">${location.id}<\/span>)\"&gt;\n                        &lt;div class=\"location-header\"&gt;\n                            &lt;h3 class=\"location-title\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/h3&gt;\n                            &lt;span class=\"location-type <span class=\"hljs-subst\">${typeColors&#91;location.type]}<\/span>\"&gt;\n                                <span class=\"hljs-subst\">${location.type.toUpperCase()}<\/span>\n                            &lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"location-details\"&gt;\n                            &lt;div style=\"margin-bottom: 6px;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/div&gt;\n                            &lt;div style=\"margin-bottom: 6px; font-size: 13px;\"&gt;<span class=\"hljs-subst\">${location.phone}<\/span>&lt;\/div&gt;\n                            &lt;div style=\"font-size: 13px; color: #5f6368;\"&gt;<span class=\"hljs-subst\">${location.hours}<\/span>&lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div class=\"location-actions\"&gt;\n                            &lt;button class=\"action-btn directions-btn\" onclick=\"event.stopPropagation(); openDirections(<span class=\"hljs-subst\">${location.lat}<\/span>, <span class=\"hljs-subst\">${location.lng}<\/span>, '<span class=\"hljs-subst\">${location.address.replace(<span class=\"hljs-regexp\">\/'\/g<\/span>, <span class=\"hljs-string\">\"\\\\'\"<\/span>)}<\/span>')\"&gt;\n                                Directions\n                            &lt;\/button&gt;\n                            &lt;button class=\"action-btn details-btn\" onclick=\"event.stopPropagation(); showDetails(<span class=\"hljs-subst\">${location.id}<\/span>)\"&gt;\n                                Details\n                            &lt;\/button&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n            });\n            \n            container.innerHTML = html;\n            \n            <span class=\"hljs-comment\">\/\/ Update total locations count<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'totalLocations'<\/span>).textContent = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${locationsData.length}<\/span> locations`<\/span>;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Focus on specific location<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">focusOnLocation<\/span>(<span class=\"hljs-params\">locationId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> location = locationsData.find(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> loc.id === locationId);\n            <span class=\"hljs-keyword\">if<\/span> (!location) <span class=\"hljs-keyword\">return<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ Find corresponding marker<\/span>\n            <span class=\"hljs-keyword\">const<\/span> markerIndex = locationsData.findIndex(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> loc.id === locationId);\n            <span class=\"hljs-keyword\">if<\/span> (markerIndex !== <span class=\"hljs-number\">-1<\/span> &amp;&amp; markers&#91;markerIndex]) {\n                <span class=\"hljs-comment\">\/\/ Open info window<\/span>\n                infoWindows.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">iw<\/span> =&gt;<\/span> iw.close());\n                infoWindows&#91;markerIndex].open(map, markers&#91;markerIndex]);\n                \n                <span class=\"hljs-comment\">\/\/ Center and zoom map<\/span>\n                map.panTo({ <span class=\"hljs-attr\">lat<\/span>: location.lat, <span class=\"hljs-attr\">lng<\/span>: location.lng });\n                map.setZoom(<span class=\"hljs-number\">15<\/span>);\n                \n                <span class=\"hljs-comment\">\/\/ Highlight card<\/span>\n                highlightLocationCard(locationId);\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Highlight location card<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">highlightLocationCard<\/span>(<span class=\"hljs-params\">locationId<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Remove highlight from all cards<\/span>\n            <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.location-card'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">card<\/span> =&gt;<\/span> {\n                card.style.boxShadow = <span class=\"hljs-string\">'0 2px 6px rgba(0,0,0,0.05)'<\/span>;\n                card.style.borderColor = <span class=\"hljs-string\">'#e8eaed'<\/span>;\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Highlight selected card<\/span>\n            <span class=\"hljs-keyword\">const<\/span> selectedCard = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">`.location-card&#91;data-id=\"<span class=\"hljs-subst\">${locationId}<\/span>\"]`<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (selectedCard) {\n                selectedCard.style.boxShadow = <span class=\"hljs-string\">'0 6px 15px rgba(66, 133, 244, 0.25)'<\/span>;\n                selectedCard.style.borderColor = <span class=\"hljs-string\">'#4285f4'<\/span>;\n                selectedCard.scrollIntoView({ <span class=\"hljs-attr\">behavior<\/span>: <span class=\"hljs-string\">'smooth'<\/span>, <span class=\"hljs-attr\">block<\/span>: <span class=\"hljs-string\">'center'<\/span> });\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Open directions in Google Maps<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">openDirections<\/span>(<span class=\"hljs-params\">lat, lng, address<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> url = <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>&amp;destination_place_id=<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">encodeURIComponent<\/span>(address)}<\/span>`<\/span>;\n            <span class=\"hljs-built_in\">window<\/span>.open(url, <span class=\"hljs-string\">'_blank'<\/span>);\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Show location details<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showDetails<\/span>(<span class=\"hljs-params\">locationId<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> location = locationsData.find(<span class=\"hljs-function\"><span class=\"hljs-params\">loc<\/span> =&gt;<\/span> loc.id === locationId);\n            <span class=\"hljs-keyword\">if<\/span> (location) {\n                alert(<span class=\"hljs-string\">`Location Details:\\n\\nName: <span class=\"hljs-subst\">${location.name}<\/span>\\nAddress: <span class=\"hljs-subst\">${location.address}<\/span>\\nPhone: <span class=\"hljs-subst\">${location.phone}<\/span>\\nHours: <span class=\"hljs-subst\">${location.hours}<\/span>\\nDescription: <span class=\"hljs-subst\">${location.description}<\/span>`<\/span>);\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Zoom to specific location<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">zoomToLocation<\/span>(<span class=\"hljs-params\">lat, lng<\/span>) <\/span>{\n            map.panTo({ lat, lng });\n            map.setZoom(<span class=\"hljs-number\">16<\/span>);\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Setup search functionality<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">setupSearch<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> searchInput = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationSearch'<\/span>);\n            \n            searchInput.addEventListener(<span class=\"hljs-string\">'input'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n                <span class=\"hljs-keyword\">const<\/span> searchTerm = <span class=\"hljs-keyword\">this<\/span>.value.toLowerCase().trim();\n                \n                <span class=\"hljs-keyword\">if<\/span> (searchTerm.length === <span class=\"hljs-number\">0<\/span>) {\n                    <span class=\"hljs-comment\">\/\/ Show all locations<\/span>\n                    locationsData.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">_, index<\/span>) =&gt;<\/span> {\n                        markers&#91;index].setVisible(<span class=\"hljs-literal\">true<\/span>);\n                    });\n                    \n                    <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'.location-card'<\/span>).forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">card<\/span> =&gt;<\/span> {\n                        card.style.display = <span class=\"hljs-string\">'block'<\/span>;\n                    });\n                    \n                    <span class=\"hljs-keyword\">return<\/span>;\n                }\n                \n                <span class=\"hljs-comment\">\/\/ Filter locations<\/span>\n                locationsData.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">location, index<\/span>) =&gt;<\/span> {\n                    <span class=\"hljs-keyword\">const<\/span> matches = location.name.toLowerCase().includes(searchTerm) ||\n                                   location.address.toLowerCase().includes(searchTerm) ||\n                                   location.type.toLowerCase().includes(searchTerm);\n                    \n                    <span class=\"hljs-comment\">\/\/ Show\/hide marker<\/span>\n                    markers&#91;index].setVisible(matches);\n                    \n                    <span class=\"hljs-comment\">\/\/ Show\/hide card<\/span>\n                    <span class=\"hljs-keyword\">const<\/span> card = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">`.location-card&#91;data-id=\"<span class=\"hljs-subst\">${location.id}<\/span>\"]`<\/span>);\n                    <span class=\"hljs-keyword\">if<\/span> (card) {\n                        card.style.display = matches ? <span class=\"hljs-string\">'block'<\/span> : <span class=\"hljs-string\">'none'<\/span>;\n                    }\n                });\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Update map statistics<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateStats<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> ne = bounds.getNorthEast();\n            <span class=\"hljs-keyword\">const<\/span> sw = bounds.getSouthWest();\n            <span class=\"hljs-keyword\">const<\/span> latDiff = <span class=\"hljs-built_in\">Math<\/span>.abs(ne.lat() - sw.lat());\n            <span class=\"hljs-keyword\">const<\/span> lngDiff = <span class=\"hljs-built_in\">Math<\/span>.abs(ne.lng() - sw.lng());\n            \n            <span class=\"hljs-keyword\">let<\/span> areaDescription;\n            <span class=\"hljs-keyword\">if<\/span> (latDiff &lt; <span class=\"hljs-number\">1<\/span> &amp;&amp; lngDiff &lt; <span class=\"hljs-number\">1<\/span>) {\n                areaDescription = <span class=\"hljs-string\">\"City area\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (latDiff &lt; <span class=\"hljs-number\">5<\/span> &amp;&amp; lngDiff &lt; <span class=\"hljs-number\">5<\/span>) {\n                areaDescription = <span class=\"hljs-string\">\"Metro area\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> (latDiff &lt; <span class=\"hljs-number\">20<\/span> &amp;&amp; lngDiff &lt; <span class=\"hljs-number\">20<\/span>) {\n                areaDescription = <span class=\"hljs-string\">\"Regional view\"<\/span>;\n            } <span class=\"hljs-keyword\">else<\/span> {\n                areaDescription = <span class=\"hljs-string\">\"Wide area\"<\/span>;\n            }\n            \n            <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'mapBounds'<\/span>).textContent = areaDescription;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Initialize the map when page loads<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.onload = initMap;\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\">Step 4: Deploy and Customize<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Replace API Key: <\/strong>Insert your actual Google Maps API key<\/li>\n\n\n\n<li><strong>2. Customize Data:<\/strong> Replace the sample locations with your own data<\/li>\n\n\n\n<li><strong>3. Style Adjustments:<\/strong> Modify CSS colors to match your brand<\/li>\n\n\n\n<li><strong>4. Add Features:<\/strong> Implement clustering for many markers (>100 locations)<\/li>\n\n\n\n<li><strong>5. Embed:<\/strong> Add to your site via iframe or direct integration<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenges of This DIY Approach<\/strong><\/p>\n\n\n\n<p>While technically impressive, this method has significant drawbacks:<\/p>\n\n\n\n<p><strong>1. API Complexity:<\/strong> Managing quotas, billing, and key security<\/p>\n\n\n\n<p><strong>2. Data Management: <\/strong>No built-in database for location storage<\/p>\n\n\n\n<p><strong>3. Scalability Issues: <\/strong>Performance degrades with 100+ markers<\/p>\n\n\n\n<p><strong>4. Maintenance Burden: <\/strong>Constant updates for API changes<\/p>\n\n\n\n<p><strong>5. Mobile Optimization: <\/strong>Requires additional responsive design work<\/p>\n\n\n\n<p><strong>6. No Admin Interface:<\/strong> All changes require code modifications<\/p>\n\n\n\n<p><strong>7. Limited Collaboration:<\/strong> No team editing or permission controls<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional Solution: MapsFun.com<\/strong><\/p>\n\n\n\n<p>Why spend weeks building when you can have a better solution<strong> in minutes?<\/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><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> provides a complete platform for putting multiple locations on maps without any coding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u2705 No API Hassle: <\/strong>We handle all Google Maps integration\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 <strong>Visual Editor:<\/strong> Drag-and-drop interface for adding locations\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Bulk Import: <\/strong>Upload CSV\/Excel files with hundreds of locations\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705 <strong>Smart Geocoding:<\/strong> Automatic address-to-coordinate conversion\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Live Collaboration: <\/strong>Multiple team members can edit simultaneously\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Advanced Features: <\/strong>Heatmaps, territory drawing, route optimization\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Multiple Export Formats:<\/strong> PDF, image, KML, and embed codes\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Responsive Design: <\/strong>Works perfectly on all devices automatically\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p><strong>With <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> , you can:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Upload your location list in any format<\/li>\n\n\n\n<li>2. Customize markers, colors, and info windows visually<\/li>\n\n\n\n<li>3. Add filters and search functionality with clicks<\/li>\n\n\n\n<li>4. Publish instantly with automatic responsive design<\/li>\n\n\n\n<li>5. Update anytime through a simple dashboard<\/li>\n<\/ul>\n\n\n\n<p>Building a custom multi-location map solution requires <strong>significant development time <\/strong>and ongoing technical maintenance. For businesses, marketers, researchers, or anyone who needs to visualize locations quickly and professionally, the DIY approach is unnecessarily complex.<\/p>\n\n\n\n<p><strong>Get professional results instantly. <\/strong>Create beautiful, interactive maps with multiple locations in minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> \u2013 the no-code platform that makes complex mapping simple.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Put Multiple Locations on a Map: The Technical Guide Need to visualize multiple addresses on a single map? Whether you&#8217;re showing store locations, event venues, delivery areas, or property listings, displaying multiple points on a map requires specific techniques. Here&#8217;s the working method using Google Maps Platform. Method 1: Using Google Maps JavaScript [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[110,1],"tags":[],"class_list":["post-817","post","type-post","status-publish","format-standard","hentry","category-put-multiple-locations-on-a-map","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/817","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=817"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/817\/revisions"}],"predecessor-version":[{"id":820,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/817\/revisions\/820"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}