{"id":813,"date":"2025-12-19T15:34:19","date_gmt":"2025-12-19T12:34:19","guid":{"rendered":"https:\/\/mapsfun.com\/?p=813"},"modified":"2025-12-19T15:34:20","modified_gmt":"2025-12-19T12:34:20","slug":"how-to-add-multiple-locations-to-a-map-2025-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=813","title":{"rendered":"How to Add Multiple Locations to a Map (2025 Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map to Add Multiple Locations: A Complete Technical Guide<\/h2>\n\n\n\n<p>Need to build an interactive map where you or your users can add multiple locations? Whether for store locators, event planning, or travel itineraries, creating an &#8220;addable&#8221; map requires technical implementation. Here&#8217;s the working method using Google Maps Platform.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Technical Implementation: Editable Map with JavaScript<\/strong><\/p>\n\n\n\n<p>This solution allows users to click on the map to add locations, which you can then save or display.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Google Cloud Platform Setup<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to <strong>[Google Cloud Console](https:\/\/console.cloud.google.com\/)<\/strong><\/li>\n\n\n\n<li>2. Create a project named &#8220;Interactive Locations Map&#8221;<\/li>\n\n\n\n<li>3.<strong> Enable billing<\/strong> (free $200 monthly credit covers substantial usage)<\/li>\n\n\n\n<li>4. Enable these APIs:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0<strong>&#8211; Maps JavaScript API<\/strong> (for the map display)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0&#8211; Geocoding API <\/strong>(for address lookup)<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Secure Your API Key<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Navigate to <strong>Credentials \u2192 Create Credentials \u2192 API Key<\/strong><\/li>\n\n\n\n<li><strong>2. Restrict immediately <\/strong>for security:<\/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; Websites: `*.yourdomain.com\/*` or `localhost\/*` for testing<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; API: <strong>Maps JavaScript API <\/strong>and <strong>Geocoding API<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"280\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-201.png\" alt=\"\" class=\"wp-image-814\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-201.png 559w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-201-300x150.png 300w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Build the Interactive Map Interface<\/p>\n\n\n\n<p>Create `add-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>Interactive Map - Add Multiple Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        * {\n            <span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n        }\n        \n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: -apple-system, BlinkMacSystemFont, <span class=\"hljs-string\">'Segoe UI'<\/span>, Roboto, Oxygen, Ubuntu, sans-serif;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f5f7fa<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">1.6<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.container<\/span> {\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1200px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n            <span class=\"hljs-attribute\">display<\/span>: grid;\n            <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\">1<\/span>fr <span class=\"hljs-number\">350px<\/span>;\n            <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">25px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.header<\/span> {\n            <span class=\"hljs-attribute\">grid-column<\/span>: <span class=\"hljs-number\">1<\/span> \/ -<span class=\"hljs-number\">1<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(<span class=\"hljs-number\">135deg<\/span>, #<span class=\"hljs-number\">667<\/span>eea <span class=\"hljs-number\">0%<\/span>, #<span class=\"hljs-number\">764<\/span>ba2 <span class=\"hljs-number\">100%<\/span>);\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/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\">102<\/span>, <span class=\"hljs-number\">126<\/span>, <span class=\"hljs-number\">234<\/span>, <span class=\"hljs-number\">0.2<\/span>);\n        }\n        \n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">650px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/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\">25px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0.1<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.sidebar<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">25px<\/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.08<\/span>);\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">650px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.controls<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9ff<\/span>;\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\">8px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">25px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> dashed <span class=\"hljs-number\">#d0d7ff<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.instructions<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#fff9e6<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">4px<\/span> solid <span class=\"hljs-number\">#ffc107<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#667eea<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.3s<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">10px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#5a6fd8<\/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\">4px<\/span> <span class=\"hljs-number\">12px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">102<\/span>, <span class=\"hljs-number\">126<\/span>, <span class=\"hljs-number\">234<\/span>, <span class=\"hljs-number\">0.3<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-clear<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f56565<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.btn-clear<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#e53e3e<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-list<\/span> {\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">20px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9ff<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">12px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#e2e8f0<\/span>;\n            <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.2s<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-item<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n            <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#667eea<\/span>;\n            <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">5px<\/span>);\n        }\n        \n        <span class=\"hljs-selector-class\">.location-title<\/span> {\n            <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">600<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#2d3748<\/span>;\n            <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">5px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.location-address<\/span> {\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#718096<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9em<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.coordinates<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: <span class=\"hljs-string\">'Courier New'<\/span>, monospace;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.85em<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#4a5568<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#edf2f7<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">4px<\/span> <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">8px<\/span>;\n        }\n        \n        <span class=\"hljs-selector-class\">.counter<\/span> {\n            <span class=\"hljs-attribute\">display<\/span>: inline-block;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#667eea<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>;\n            <span class=\"hljs-attribute\">text-align<\/span>: center;\n            <span class=\"hljs-attribute\">line-height<\/span>: <span class=\"hljs-number\">24px<\/span>;\n            <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">0.9em<\/span>;\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"header\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\ud83d\udccd Interactive Location Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Click anywhere on the map to add locations. Customize each marker with details.<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\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"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\">\"instructions\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>How to use:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ol<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-left: 20px; margin-top: 8px;\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Click on the map to place a marker<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Enter location details in the popup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Save to add to your list<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>Export or copy locations when done<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ol<\/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\">\"controls\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom: 15px;\"<\/span>&gt;<\/span>Controls<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\"<\/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\">\"btn\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"exportLocations()\"<\/span>&gt;<\/span>\ud83d\udccb Export 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\">\"btn btn-clear\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"clearAllLocations()\"<\/span>&gt;<\/span>\ud83d\uddd1\ufe0f Clear All<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                \n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 15px;\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: block; margin-bottom: 8px; font-weight: 500;\"<\/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\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"autoGeocode\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> \n                        Auto-find address for clicks\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display: block; margin-bottom: 8px; font-weight: 500;\"<\/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\">\"checkbox\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"clusterMarkers\"<\/span> <span class=\"hljs-attr\">checked<\/span>&gt;<\/span> \n                        Cluster nearby markers\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            \n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"location-list\"<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom: 15px;\"<\/span>&gt;<\/span>\n                    Added Locations \n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"locationCount\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #e2e8f0; padding: 2px 10px; border-radius: 20px; font-size: 0.9em;\"<\/span>&gt;<\/span>0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"locationsContainer\"<\/span>&gt;<\/span>\n                    <span class=\"hljs-comment\">&lt;!-- Location items will be added here dynamically --&gt;<\/span>\n                    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"text-align: center; color: #a0aec0; padding: 30px;\"<\/span>&gt;<\/span>\n                        No locations added yet. Click on the map to start!\n                    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <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=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 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-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> savedLocations = &#91;];\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\">\/\/ Default center (New York)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> defaultCenter = { <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            \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>: defaultCenter,\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">12<\/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\">true<\/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            \n            <span class=\"hljs-comment\">\/\/ Add click listener to map<\/span>\n            map.addListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n                addMarkerAtPosition(event.latLng);\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Load saved locations from localStorage<\/span>\n            loadSavedLocations();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Add a new marker at clicked position<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addMarkerAtPosition<\/span>(<span class=\"hljs-params\">latLng<\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Check if auto-geocode is enabled<\/span>\n            <span class=\"hljs-keyword\">const<\/span> autoGeocode = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'autoGeocode'<\/span>).checked;\n            \n            <span class=\"hljs-comment\">\/\/ Create a temporary marker<\/span>\n            <span class=\"hljs-keyword\">const<\/span> tempMarker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                <span class=\"hljs-attr\">position<\/span>: latLng,\n                <span class=\"hljs-attr\">map<\/span>: map,\n                <span class=\"hljs-attr\">draggable<\/span>: <span class=\"hljs-literal\">true<\/span>,\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>: <span class=\"hljs-string\">'#667eea'<\/span>,\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\">10<\/span>\n                }\n            });\n            \n            <span class=\"hljs-keyword\">let<\/span> address = <span class=\"hljs-string\">\"Getting address...\"<\/span>;\n            \n            <span class=\"hljs-comment\">\/\/ If auto-geocode is enabled, get address<\/span>\n            <span class=\"hljs-keyword\">if<\/span> (autoGeocode) {\n                geocoder.geocode({ <span class=\"hljs-attr\">location<\/span>: latLng }, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">results, status<\/span>) <\/span>{\n                    <span class=\"hljs-keyword\">if<\/span> (status === <span class=\"hljs-string\">'OK'<\/span> &amp;&amp; results&#91;<span class=\"hljs-number\">0<\/span>]) {\n                        address = results&#91;<span class=\"hljs-number\">0<\/span>].formatted_address;\n                        \n                        <span class=\"hljs-comment\">\/\/ Show info window for location details<\/span>\n                        showLocationDialog(latLng, address, tempMarker);\n                    } <span class=\"hljs-keyword\">else<\/span> {\n                        address = <span class=\"hljs-string\">\"Address not found\"<\/span>;\n                        showLocationDialog(latLng, address, tempMarker);\n                    }\n                });\n            } <span class=\"hljs-keyword\">else<\/span> {\n                address = <span class=\"hljs-string\">\"Custom Location\"<\/span>;\n                showLocationDialog(latLng, address, tempMarker);\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Show dialog for location details<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showLocationDialog<\/span>(<span class=\"hljs-params\">latLng, address, marker<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-string\">`\n                &lt;div style=\"padding: 15px; min-width: 280px;\"&gt;\n                    &lt;h3 style=\"margin-top: 0; color: #4a5568;\"&gt;Add Location Details&lt;\/h3&gt;\n                    &lt;div style=\"margin-bottom: 15px;\"&gt;\n                        &lt;strong&gt;Coordinates:&lt;\/strong&gt;&lt;br&gt;\n                        &lt;span style=\"font-family: monospace;\"&gt;<span class=\"hljs-subst\">${latLng.lat().toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>, <span class=\"hljs-subst\">${latLng.lng().toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>&lt;\/span&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"margin-bottom: 15px;\"&gt;\n                        &lt;label style=\"display: block; margin-bottom: 5px; font-weight: 500;\"&gt;Location Name:&lt;\/label&gt;\n                        &lt;input type=\"text\" id=\"locationName\" style=\"width: 100%; padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px;\" \n                               placeholder=\"e.g., Office, Store, Meeting Point\" value=\"<span class=\"hljs-subst\">${address.split(<span class=\"hljs-string\">','<\/span>)&#91;<span class=\"hljs-number\">0<\/span>]}<\/span>\"&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"margin-bottom: 15px;\"&gt;\n                        &lt;label style=\"display: block; margin-bottom: 5px; font-weight: 500;\"&gt;Address:&lt;\/label&gt;\n                        &lt;textarea id=\"locationAddress\" style=\"width: 100%; padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; height: 60px;\"&gt;<span class=\"hljs-subst\">${address}<\/span>&lt;\/textarea&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"margin-bottom: 15px;\"&gt;\n                        &lt;label style=\"display: block; margin-bottom: 5px; font-weight: 500;\"&gt;Notes (optional):&lt;\/label&gt;\n                        &lt;textarea id=\"locationNotes\" style=\"width: 100%; padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; height: 50px;\" \n                                  placeholder=\"Additional information\"&gt;&lt;\/textarea&gt;\n                    &lt;\/div&gt;\n                    &lt;div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px;\"&gt;\n                        &lt;button onclick=\"saveLocation(<span class=\"hljs-subst\">${latLng.lat()}<\/span>, <span class=\"hljs-subst\">${latLng.lng()}<\/span>, '<span class=\"hljs-subst\">${address.replace(<span class=\"hljs-regexp\">\/'\/g<\/span>, <span class=\"hljs-string\">\"\\\\'\"<\/span>)}<\/span>')\" \n                                style=\"background: #48bb78; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer;\"&gt;\n                            \u2705 Save\n                        &lt;\/button&gt;\n                        &lt;button onclick=\"cancelAddLocation()\" \n                                style=\"background: #a0aec0; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer;\"&gt;\n                            \u274c Cancel\n                        &lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            `<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n                <span class=\"hljs-attr\">content<\/span>: content,\n                <span class=\"hljs-attr\">position<\/span>: latLng\n            });\n            \n            infoWindow.open(map);\n            marker.infoWindow = infoWindow;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Save location to the list<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveLocation<\/span>(<span class=\"hljs-params\">lat, lng, address<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> name = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationName'<\/span>).value || <span class=\"hljs-string\">\"Unnamed Location\"<\/span>;\n            <span class=\"hljs-keyword\">const<\/span> fullAddress = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationAddress'<\/span>).value || address;\n            <span class=\"hljs-keyword\">const<\/span> notes = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationNotes'<\/span>).value || <span class=\"hljs-string\">\"\"<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> location = {\n                <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-built_in\">Date<\/span>.now(),\n                <span class=\"hljs-attr\">name<\/span>: name,\n                <span class=\"hljs-attr\">address<\/span>: fullAddress,\n                <span class=\"hljs-attr\">lat<\/span>: lat,\n                <span class=\"hljs-attr\">lng<\/span>: lng,\n                <span class=\"hljs-attr\">notes<\/span>: notes,\n                <span class=\"hljs-attr\">timestamp<\/span>: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString()\n            };\n            \n            savedLocations.push(location);\n            updateLocationList();\n            saveToLocalStorage();\n            \n            <span class=\"hljs-comment\">\/\/ Close all info windows<\/span>\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">if<\/span> (marker.infoWindow) {\n                    marker.infoWindow.close();\n                }\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Update the location list in sidebar<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateLocationList<\/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\">'locationsContainer'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> countElement = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'locationCount'<\/span>);\n            \n            countElement.textContent = savedLocations.length;\n            \n            <span class=\"hljs-keyword\">if<\/span> (savedLocations.length === <span class=\"hljs-number\">0<\/span>) {\n                container.innerHTML = <span class=\"hljs-string\">`\n                    &lt;div style=\"text-align: center; color: #a0aec0; padding: 30px;\"&gt;\n                        No locations added yet. Click on the map to start!\n                    &lt;\/div&gt;\n                `<\/span>;\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">let<\/span> html = <span class=\"hljs-string\">''<\/span>;\n            savedLocations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">loc, index<\/span>) =&gt;<\/span> {\n                html += <span class=\"hljs-string\">`\n                    &lt;div class=\"location-item\" data-id=\"<span class=\"hljs-subst\">${loc.id}<\/span>\"&gt;\n                        &lt;div class=\"counter\"&gt;<span class=\"hljs-subst\">${index + <span class=\"hljs-number\">1<\/span>}<\/span>&lt;\/div&gt;\n                        &lt;div&gt;\n                            &lt;div class=\"location-title\"&gt;<span class=\"hljs-subst\">${loc.name}<\/span>&lt;\/div&gt;\n                            &lt;div class=\"location-address\"&gt;<span class=\"hljs-subst\">${loc.address}<\/span>&lt;\/div&gt;\n                            &lt;div class=\"coordinates\"&gt;<span class=\"hljs-subst\">${loc.lat.toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>, <span class=\"hljs-subst\">${loc.lng.toFixed(<span class=\"hljs-number\">6<\/span>)}<\/span>&lt;\/div&gt;\n                            <span class=\"hljs-subst\">${loc.notes ? <span class=\"hljs-string\">`&lt;div style=\"margin-top: 8px; font-size: 0.9em; color: #718096;\"&gt;\ud83d\udcdd <span class=\"hljs-subst\">${loc.notes}<\/span>&lt;\/div&gt;`<\/span> : <span class=\"hljs-string\">''<\/span>}<\/span>\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n                `<\/span>;\n            });\n            \n            container.innerHTML = html;\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Export locations as JSON<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">exportLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (savedLocations.length === <span class=\"hljs-number\">0<\/span>) {\n                alert(<span class=\"hljs-string\">\"No locations to export!\"<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">const<\/span> dataStr = <span class=\"hljs-built_in\">JSON<\/span>.stringify(savedLocations, <span class=\"hljs-literal\">null<\/span>, <span class=\"hljs-number\">2<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> dataUri = <span class=\"hljs-string\">'data:application\/json;charset=utf-8,'<\/span>+ <span class=\"hljs-built_in\">encodeURIComponent<\/span>(dataStr);\n            \n            <span class=\"hljs-keyword\">const<\/span> exportFileDefaultName = <span class=\"hljs-string\">`locations-<span class=\"hljs-subst\">${<span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Date<\/span>().toISOString().slice(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">10<\/span>)}<\/span>.json`<\/span>;\n            \n            <span class=\"hljs-keyword\">const<\/span> linkElement = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'a'<\/span>);\n            linkElement.setAttribute(<span class=\"hljs-string\">'href'<\/span>, dataUri);\n            linkElement.setAttribute(<span class=\"hljs-string\">'download'<\/span>, exportFileDefaultName);\n            linkElement.click();\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Clear all locations<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearAllLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (confirm(<span class=\"hljs-string\">\"Are you sure you want to delete all locations?\"<\/span>)) {\n                savedLocations = &#91;];\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                updateLocationList();\n                localStorage.removeItem(<span class=\"hljs-string\">'savedLocations'<\/span>);\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Save to browser's localStorage<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">saveToLocalStorage<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            localStorage.setItem(<span class=\"hljs-string\">'savedLocations'<\/span>, <span class=\"hljs-built_in\">JSON<\/span>.stringify(savedLocations));\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Load from localStorage<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadSavedLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> saved = localStorage.getItem(<span class=\"hljs-string\">'savedLocations'<\/span>);\n            <span class=\"hljs-keyword\">if<\/span> (saved) {\n                savedLocations = <span class=\"hljs-built_in\">JSON<\/span>.parse(saved);\n                updateLocationList();\n            }\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Cancel adding location<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">cancelAddLocation<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> {\n                <span class=\"hljs-keyword\">if<\/span> (marker.infoWindow) {\n                    marker.infoWindow.close();\n                }\n            });\n        }\n        \n        <span class=\"hljs-comment\">\/\/ Initialize 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: Testing and Implementation<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Test locally:<\/strong> Open in browser, click map to add locations<\/li>\n\n\n\n<li><strong>2. Save locations:<\/strong> Data persists via localStorage<\/li>\n\n\n\n<li><strong>3. Export:<\/strong> Download as JSON for database import<\/li>\n\n\n\n<li><strong>4. Embed: <\/strong>Use iframe or integrate into your application<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"402\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-202.png\" alt=\"\" class=\"wp-image-815\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-202.png 750w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-202-300x161.png 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Hidden Complexities of This Approach<\/strong><\/p>\n\n\n\n<p>While functional, this DIY method has significant challenges:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Complex State Management:<\/strong> Handling user interactions, data persistence, and UI updates<\/li>\n\n\n\n<li><strong>2. Geocoding Limitations:<\/strong> Google&#8217;s geocoding API has daily quotas<\/li>\n\n\n\n<li><strong>3. No Built-in Database: <\/strong>Requires separate backend for permanent storage<\/li>\n\n\n\n<li><strong>4. Mobile Optimization:<\/strong> Touch interactions need additional programming<\/li>\n\n\n\n<li><strong>5. Export Complexity:<\/strong> Multiple format support (CSV, Excel, KML) requires more code<\/li>\n\n\n\n<li><strong>6. User Management:<\/strong> No built-in user accounts or permission system<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Professional Alternative: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>\u00a0<\/strong><\/p>\n\n\n\n<p>Why build from scratch when you can have a production-ready 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 creating interactive, addable maps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u2705 Zero Development <\/strong>&#8211; Fully functional map builder, no coding required\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Built-in Database <\/strong>&#8211; Locations automatically saved to cloud storage\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Advanced Geocoding <\/strong>&#8211; Unlimited address searches with autocomplete\u00a0\u00a0<\/li>\n\n\n\n<li><strong>\u2705 Multiple Users<\/strong> &#8211; Team collaboration with permission controls\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Rich Export Options<\/strong> &#8211; CSV, Excel, JSON, KML with one click\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Custom Forms <\/strong>&#8211; Create custom data fields for each location\u00a0\u00a0<\/li>\n\n\n\n<li>\u2705<strong> Embed &amp; Share <\/strong>&#8211; Public maps, private links, or website embeds\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<p><strong>With MapsFun.com you can:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Create a map in 2 minutes<\/li>\n\n\n\n<li>2. Add locations via click, search, or bulk import<\/li>\n\n\n\n<li>3. Customize data fields for your specific needs<\/li>\n\n\n\n<li>4. Share with team members or embed on your site<\/li>\n\n\n\n<li>5. Manage everything through an intuitive dashboard<\/li>\n<\/ul>\n\n\n\n<p>Building an interactive &#8220;add locations&#8221; map from scratch requires <strong>weeks of development<\/strong> and ongoing maintenance. For businesses, event planners, real estate agencies, or anyone needing a reliable solution, the DIY approach quickly becomes impractical.<\/p>\n\n\n\n<p><strong>Skip the complexity and get straight to results.<\/strong> Create powerful, interactive maps where you and your users can add multiple locations instantly at  <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> &#8211; the complete mapping platform without the development headaches.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map to Add Multiple Locations: A Complete Technical Guide Need to build an interactive map where you or your users can add multiple locations? Whether for store locators, event planning, or travel itineraries, creating an &#8220;addable&#8221; map requires technical implementation. Here&#8217;s the working method using Google Maps Platform. The Technical Implementation: [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[109,1],"tags":[],"class_list":["post-813","post","type-post","status-publish","format-standard","hentry","category-map-to-add-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/813","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=813"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/813\/revisions"}],"predecessor-version":[{"id":816,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/813\/revisions\/816"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}