{"id":674,"date":"2025-12-15T12:06:58","date_gmt":"2025-12-15T09:06:58","guid":{"rendered":"https:\/\/mapsfun.com\/?p=674"},"modified":"2025-12-15T12:06:58","modified_gmt":"2025-12-15T09:06:58","slug":"how-to-put-multiple-locations-on-google-maps-2025-step-by-step","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=674","title":{"rendered":"How to Put Multiple Locations on Google Maps (2025 Step-by-Step)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Put Multiple Locations on Google Maps: The Complete Technical Guide<\/h2>\n\n\n\n<p>Need to display multiple locations on a Google Map for your website, business, or project? While Google My Maps offers a basic solution, creating a truly custom, embeddable multi-location map requires navigating Google&#8217;s complex ecosystem. This guide walks through the<strong> technically correct but cumbersome process<\/strong> step-by-step.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: Google My Maps (The &#8220;Simple&#8221; Built-in Tool)<\/strong><\/p>\n\n\n\n<p>Google&#8217;s own tool seems like the obvious solution, but it has significant limitations for web use.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Step-by-Step Process:<\/strong><\/li>\n\n\n\n<li>1. Go to [Google My Maps](<a href=\"https:\/\/www.google.com\/maps\/d\/)\">https:\/\/www.google.com\/maps\/d\/)<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-138-1024x504.png\" alt=\"\" class=\"wp-image-675\" style=\"width:665px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-138-1024x504.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-138-300x148.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-138-768x378.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-138-1536x756.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-138.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2. Click <strong>&#8220;Create a New Map&#8221;<\/strong><\/li>\n\n\n\n<li>3. Use the search bar or marker tool to add locations<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-139-1024x507.png\" alt=\"\" class=\"wp-image-676\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-139-1024x507.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-139-300x148.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-139-768x380.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-139.png 1128w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"481\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-140.png\" alt=\"\" class=\"wp-image-677\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-140.png 612w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-140-300x236.png 300w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>4. Customize markers<\/strong> with colors and icons (limited options)<\/li>\n\n\n\n<li>5. Click <strong>&#8220;Share&#8221;<\/strong> and make map public<\/li>\n\n\n\n<li>6. Click the three-dot menu \u2192 <strong>&#8220;Embed on my site&#8221;<\/strong><\/li>\n\n\n\n<li><strong>html<\/strong><\/li>\n<\/ul>\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-comment\">&lt;!-- The embed code you'll get --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> \n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/d\/embed?mid=1YOUR_MAP_ID&amp;ehbc=2E312F\"<\/span> \n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"640\"<\/span> \n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"480\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>The Limitations You&#8217;ll Encounter:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&#8211; Limited styling: <\/strong>Can&#8217;t match your website&#8217;s branding<\/li>\n\n\n\n<li><strong>&#8211; Basic markers only: <\/strong>No custom HTML popups or advanced interactions<\/li>\n\n\n\n<li><strong>&#8211; Clunky interface:<\/strong> Managing many locations becomes tedious<\/li>\n\n\n\n<li><strong>&#8211; Embed restrictions:<\/strong> The iframe often breaks responsive designs<\/li>\n\n\n\n<li><strong>&#8211; No API access:<\/strong> Can&#8217;t dynamically update from a database<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 2: Google Maps JavaScript API (The &#8220;Proper&#8221; Developer Way)<\/strong><\/p>\n\n\n\n<p>For a professional, customizable solution, you need the Google Maps Platform. Here&#8217;s what that actually involves:<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Google Cloud Console Setup<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create a Google Cloud Project:<\/strong> [console.cloud.google.com](https:\/\/console.cloud.google.com\/)<\/li>\n\n\n\n<li><strong>2. Enable Billing: <\/strong>Yes, even with free credits, you must add a payment method<\/li>\n\n\n\n<li><strong>3. Enable APIs: <\/strong>You need at least:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Maps JavaScript API<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; Geocoding API (to convert addresses to coordinates)<\/li>\n\n\n\n<li><strong>4. Create API Key:<\/strong> Go to Credentials \u2192 Create Credentials \u2192 API Key<\/li>\n\n\n\n<li><strong>5. Restrict the Key: <\/strong>Critical step! Restrict to:<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; HTTP referrers (your domain)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; The specific APIs you enabled<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the Multi-Location Map Code<\/p>\n\n\n\n<p>Create an HTML file with this complete implementation:<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Multi-Location Business Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-selector-id\">#multi-location-map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">600px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/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\">20px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\n        <span class=\"hljs-selector-class\">.map-controls<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">15px<\/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\">20px<\/span>;\n            <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.05<\/span>);\n        }\n    <\/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\">\"map-controls\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h3<\/span>&gt;<\/span>Our Locations (4)<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h3<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"showAllLocations()\"<\/span>&gt;<\/span>Show All<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\">onclick<\/span>=<span class=\"hljs-string\">\"zoomToLocation(0)\"<\/span>&gt;<\/span>New York<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\">onclick<\/span>=<span class=\"hljs-string\">\"zoomToLocation(1)\"<\/span>&gt;<\/span>London<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\">onclick<\/span>=<span class=\"hljs-string\">\"zoomToLocation(2)\"<\/span>&gt;<\/span>Tokyo<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\">id<\/span>=<span class=\"hljs-string\">\"multi-location-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\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-comment\">\/\/ Your Google Maps API Key (REPLACE THIS!)<\/span>\n        <span class=\"hljs-keyword\">const<\/span> API_KEY = <span class=\"hljs-string\">'YOUR_GOOGLE_MAPS_API_KEY_HERE'<\/span>;\n        \n        <span class=\"hljs-comment\">\/\/ Multiple locations data<\/span>\n        <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n            {\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 Broadway, New York, NY 10007\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">40.7128<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-74.0060<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"+1 (212) 555-1234\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 9AM-6PM\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"London Office\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"1 Regent Street, London SW1Y 4NR\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">51.5074<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-0.1278<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"+44 20 7123 4567\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 8AM-7PM\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Tokyo Branch\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"2-11-3 Ginza, Chuo City, Tokyo 104-0061\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">35.6729<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">139.7694<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"+81 3-1234-5678\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Sat: 10AM-8PM\"<\/span>\n            },\n            {\n                <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"Sydney Office\"<\/span>,\n                <span class=\"hljs-attr\">address<\/span>: <span class=\"hljs-string\">\"5 Martin Place, Sydney NSW 2000\"<\/span>,\n                <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">-33.8679<\/span>,\n                <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">151.2073<\/span>,\n                <span class=\"hljs-attr\">phone<\/span>: <span class=\"hljs-string\">\"+61 2 1234 5678\"<\/span>,\n                <span class=\"hljs-attr\">hours<\/span>: <span class=\"hljs-string\">\"Mon-Fri: 8:30AM-5:30PM\"<\/span>\n            }\n        ];\n\n        <span class=\"hljs-keyword\">let<\/span> map;\n        <span class=\"hljs-keyword\">let<\/span> markers = &#91;];\n        <span class=\"hljs-keyword\">let<\/span> infoWindow;\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-comment\">\/\/ Calculate center point of all locations<\/span>\n            <span class=\"hljs-keyword\">const<\/span> center = calculateCenter(locations);\n            \n            <span class=\"hljs-comment\">\/\/ Initialize the map<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'multi-location-map'<\/span>), {\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">10<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: center,\n                <span class=\"hljs-attr\">styles<\/span>: &#91;\n                    {\n                        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"poi.business\"<\/span>,\n                        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels\"<\/span>,\n                        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{<span class=\"hljs-string\">\"visibility\"<\/span>: <span class=\"hljs-string\">\"off\"<\/span>}]\n                    }\n                ]\n            });\n\n            <span class=\"hljs-comment\">\/\/ Create info window<\/span>\n            infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n            \n            <span class=\"hljs-comment\">\/\/ Add markers for each location<\/span>\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">location, index<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">position<\/span>: { <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\">url<\/span>: <span class=\"hljs-string\">`https:\/\/maps.google.com\/mapfiles\/ms\/icons\/blue-dot.png`<\/span>,\n                        <span class=\"hljs-attr\">scaledSize<\/span>: <span class=\"hljs-keyword\">new<\/span> google.maps.Size(<span class=\"hljs-number\">40<\/span>, <span class=\"hljs-number\">40<\/span>)\n                    }\n                });\n\n                markers.push(marker);\n\n                <span class=\"hljs-comment\">\/\/ Add click listener<\/span>\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    <span class=\"hljs-keyword\">const<\/span> content = <span class=\"hljs-string\">`\n                        &lt;div style=\"padding: 15px; min-width: 250px;\"&gt;\n                            &lt;h3 style=\"margin: 0 0 10px 0; color: #1a73e8;\"&gt;<span class=\"hljs-subst\">${location.name}<\/span>&lt;\/h3&gt;\n                            &lt;p style=\"margin: 0 0 8px 0; color: #5f6368;\"&gt;\n                                &lt;strong&gt;\ud83d\udccc Address:&lt;\/strong&gt;&lt;br&gt;\n                                <span class=\"hljs-subst\">${location.address}<\/span>\n                            &lt;\/p&gt;\n                            &lt;p style=\"margin: 0 0 8px 0; color: #5f6368;\"&gt;\n                                &lt;strong&gt;\ud83d\udcde Phone:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.phone}<\/span>\n                            &lt;\/p&gt;\n                            &lt;p style=\"margin: 0; color: #5f6368;\"&gt;\n                                &lt;strong&gt;\ud83d\udd52 Hours:&lt;\/strong&gt; <span class=\"hljs-subst\">${location.hours}<\/span>\n                            &lt;\/p&gt;\n                        &lt;\/div&gt;\n                    `<\/span>;\n                    \n                    infoWindow.setContent(content);\n                    infoWindow.open(map, marker);\n                    \n                    <span class=\"hljs-comment\">\/\/ Center map on clicked marker<\/span>\n                    map.panTo(marker.getPosition());\n                    map.setZoom(<span class=\"hljs-number\">14<\/span>);\n                });\n            });\n\n            <span class=\"hljs-comment\">\/\/ Fit bounds to show all markers<\/span>\n            fitMapBounds();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">calculateCenter<\/span>(<span class=\"hljs-params\">locations<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">let<\/span> totalLat = <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-keyword\">let<\/span> totalLng = <span class=\"hljs-number\">0<\/span>;\n            \n            locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/span> =&gt;<\/span> {\n                totalLat += location.lat;\n                totalLng += location.lng;\n            });\n            \n            <span class=\"hljs-keyword\">return<\/span> {\n                <span class=\"hljs-attr\">lat<\/span>: totalLat \/ locations.length,\n                <span class=\"hljs-attr\">lng<\/span>: totalLng \/ locations.length\n            };\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">fitMapBounds<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> bounds = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLngBounds();\n            markers.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">marker<\/span> =&gt;<\/span> {\n                bounds.extend(marker.getPosition());\n            });\n            map.fitBounds(bounds);\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">showAllLocations<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            fitMapBounds();\n            infoWindow.close();\n        }\n\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">zoomToLocation<\/span>(<span class=\"hljs-params\">index<\/span>) <\/span>{\n            <span class=\"hljs-keyword\">if<\/span> (markers&#91;index]) {\n                map.panTo(markers&#91;index].getPosition());\n                map.setZoom(<span class=\"hljs-number\">14<\/span>);\n                google.maps.event.trigger(markers&#91;index], <span class=\"hljs-string\">'click'<\/span>);\n            }\n        }\n\n        <span class=\"hljs-comment\">\/\/ Load the Google Maps API<\/span>\n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">loadGoogleMaps<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> script = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'script'<\/span>);\n            script.src = <span class=\"hljs-string\">`https:\/\/maps.googleapis.com\/maps\/api\/js?key=<span class=\"hljs-subst\">${API_KEY}<\/span>&amp;callback=initMap`<\/span>;\n            script.async = <span class=\"hljs-literal\">true<\/span>;\n            <span class=\"hljs-built_in\">document<\/span>.head.appendChild(script);\n        }\n\n        <span class=\"hljs-comment\">\/\/ Initialize when page loads<\/span>\n        <span class=\"hljs-built_in\">window<\/span>.onload = loadGoogleMaps;\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\">Step 3: Customize and Embed<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Replace `YOUR_GOOGLE_MAPS_API_KEY_HERE`<\/strong> with your actual API key<\/li>\n\n\n\n<li><strong>2. Update the `locations` array <\/strong>with your actual addresses and coordinates<\/li>\n\n\n\n<li><strong>3. Host the HTML file<\/strong> on your server<\/li>\n\n\n\n<li><strong>4. Embed using an iframe<\/strong> on your website:<\/li>\n<\/ul>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> \n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/yourdomain.com\/multi-location-map.html\"<\/span> \n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> \n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"650\"<\/span> \n  <span class=\"hljs-attr\">frameborder<\/span>=<span class=\"hljs-string\">\"0\"<\/span> \n  <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border: 1px solid #e0e0e0; border-radius: 12px;\"<\/span>\n  <span class=\"hljs-attr\">allowfullscreen<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\"><strong>The Hidden Complexities Nobody Tells You About<\/strong><\/p>\n\n\n\n<p><strong>Problem 1: Geocoding Addresses<\/strong><\/p>\n\n\n\n<p>Your addresses need latitude\/longitude coordinates. You must:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Manually geocode each address using a separate tool<\/li>\n\n\n\n<li>&#8211; Or implement batch geocoding with additional API calls ($5 per 1000 requests)<\/li>\n<\/ul>\n\n\n\n<p><strong>Problem 2: API Key Management<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Keys can be stolen if not properly restricted<\/li>\n\n\n\n<li>&#8211; Unexpected usage can lead to surprise bills (even with $200 credit)<\/li>\n\n\n\n<li>&#8211; Need to monitor usage in Google Cloud Console<\/li>\n<\/ul>\n\n\n\n<p><strong>Problem 3: Performance Issues<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Each marker adds load time<\/li>\n\n\n\n<li>&#8211; No built-in clustering for many locations<\/li>\n\n\n\n<li>&#8211; Mobile optimization requires additional code<\/li>\n<\/ul>\n\n\n\n<p><strong>Problem 4: Maintenance Burden<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; Changing a location requires editing code<\/li>\n\n\n\n<li>&#8211; Adding new locations means manual coordinate lookup<\/li>\n\n\n\n<li>&#8211; No visual editor for non-technical users<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p><strong>The Four-Step Hassle Chain<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Address Collection \u2192 Manual coordinate conversion<\/li>\n\n\n\n<li>2. Google Cloud Setup \u2192 API keys, billing, restrictions&nbsp;&nbsp;<\/li>\n\n\n\n<li>3. Custom Coding \u2192 HTML, CSS, JavaScript debugging<\/li>\n\n\n\n<li>4. Hosting &amp; Embedding \u2192 Server setup, iframe implementation<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p><strong>Each step requires technical expertise and introduces potential errors.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Modern Solution: <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><\/p>\n\n\n\n<p>What if you could create beautiful, interactive multi-location maps without touching code, API keys, or complex settings?<\/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><strong><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> is built specifically for this challenge:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Visual Map Editor: <\/strong>Add unlimited locations by clicking on the map or importing spreadsheets<\/li>\n\n\n\n<li><strong>2. Automatic Geocoding:<\/strong> Just paste addresses\u2014no manual coordinate lookup needed<\/li>\n\n\n\n<li><strong>3. Professional Templates:<\/strong> Start with beautifully designed map styles that match your brand<\/li>\n\n\n\n<li><strong>4. Smart Features: <\/strong>Automatic clustering, optimized loading, mobile-responsive design<\/li>\n\n\n\n<li><strong>5. Easy Embedding: <\/strong>One-click embed code for any website or CMS<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with Google Cloud Console and custom JavaScript. Create stunning multi-location maps in minutes, not hours. With <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>, you get professional results without the technical headache\u2014focus on your business, not map debugging.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Put Multiple Locations on Google Maps: The Complete Technical Guide Need to display multiple locations on a Google Map for your website, business, or project? While Google My Maps offers a basic solution, creating a truly custom, embeddable multi-location map requires navigating Google&#8217;s complex ecosystem. This guide walks through the technically correct but [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,1],"tags":[],"class_list":["post-674","post","type-post","status-publish","format-standard","hentry","category-put-multiple-locations-on-google-maps","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/674","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=674"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/674\/revisions"}],"predecessor-version":[{"id":678,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/674\/revisions\/678"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}