{"id":343,"date":"2025-12-15T11:42:59","date_gmt":"2025-12-15T08:42:59","guid":{"rendered":"https:\/\/mapsfun.com\/?p=343"},"modified":"2025-12-15T11:42:59","modified_gmt":"2025-12-15T08:42:59","slug":"how-to-show-multiple-locations-on-google-maps","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=343","title":{"rendered":"How to Show Multiple Locations on Google Maps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Google Maps Multiple Locations: The Ultimate Developer&#8217;s Guide to Plotting &amp; Routing<\/h2>\n\n\n\n<p>Want to display not just multiple pins, but also create routes between them or calculate distances? The Google Maps Platform is powerful, but implementing multi-location features requires significant technical expertise. This guide walks you through creating an advanced map with multiple markers and route optimization.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method: Advanced Multi-Location Map with Directions API Integration<\/strong><\/p>\n\n\n\n<p>This solution plots multiple locations and creates an optimized route between them\u2014perfect for delivery routes, sales territories, or trip planning.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Prerequisites (The Complex Part)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Google Cloud Project:<\/strong> Create a project at [console.cloud.google.com](https:\/\/console.cloud.google.com)<\/li>\n\n\n\n<li><strong>2.\u00a0 Enable APIs &amp; Billing: <\/strong>You must enable billing and three separate APIs:<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0<strong>&#8211; Maps JavaScript API<\/strong> (for displaying the map)<\/li>\n\n\n\n<li><strong>\u00a0\u00a0\u00a0\u00a0&#8211; Directions API<\/strong> (for routing between points) &#8211; <strong>This has significant costs at scale<\/strong><\/li>\n\n\n\n<li>\u00a0<strong>\u00a0\u00a0\u00a0&#8211; Geocoding API<\/strong> (to convert addresses to coordinates)<\/li>\n\n\n\n<li><strong>3.\u00a0 Create &amp; Restrict API Keys: <\/strong>Generate a key and restrict it to the three APIs above and your website domain.<\/li>\n<\/ul>\n\n\n\n<p><strong>Google Cloud Console showing the three required APIs that must be enabled individually.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"901\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-96-1024x901.png\" alt=\"\" class=\"wp-image-344\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-96-1024x901.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-96-300x264.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-96-768x676.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-96-1536x1352.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-96.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the Multi-Stop Route Planner Interface<\/p>\n\n\n\n<p>This HTML creates a map where users can add multiple locations and calculate the best route between them.<\/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>&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>Google Maps Multiple Locations with Routing<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\">#map<\/span> { <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>; <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>; <span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">20px<\/span>; }\n        <span class=\"hljs-selector-id\">#controls<\/span> {\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">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        }\n        <span class=\"hljs-selector-class\">.location-input<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">300px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">5px<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.button<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#1a73e8<\/span>;\n            <span class=\"hljs-attribute\">color<\/span>: white;\n            <span class=\"hljs-attribute\">border<\/span>: none;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">5px<\/span>;\n        }\n        <span class=\"hljs-selector-class\">.button<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> { <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#0d62d9<\/span>; }\n        <span class=\"hljs-selector-id\">#waypoints-list<\/span> {\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">15px<\/span> <span class=\"hljs-number\">0<\/span>;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n            <span class=\"hljs-attribute\">background<\/span>: white;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n            <span class=\"hljs-attribute\">max-height<\/span>: <span class=\"hljs-number\">200px<\/span>;\n            <span class=\"hljs-attribute\">overflow-y<\/span>: auto;\n        }\n        <span class=\"hljs-selector-class\">.waypoint-item<\/span> {\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span>;\n            <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#eee<\/span>;\n            <span class=\"hljs-attribute\">display<\/span>: flex;\n            <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\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\">id<\/span>=<span class=\"hljs-string\">\"controls\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>Multi-Stop Route Planner<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span>\n        \n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/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\">\"start-input\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"location-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Start address (e.g., New York, NY)\"<\/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\">\"end-input\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"location-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"End address (e.g., Boston, MA)\"<\/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>&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\">\"waypoint-input\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"location-input\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Add stop (e.g., Hartford, CT)\"<\/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\">\"button\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"addWaypoint()\"<\/span>&gt;<\/span>Add Stop<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\">\"waypoints-list\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>No stops added yet. Add intermediate locations above.<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\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"calculateRoute()\"<\/span>&gt;<\/span>Calculate Optimal Route<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\">\"button\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\">\"clearRoute()\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background: #dc3545;\"<\/span>&gt;<\/span>Clear Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/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\">\"route-info\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-top: 15px; padding: 10px; background: #e7f3ff; display: none;\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Route Summary:<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/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\">\"distance\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"duration\"<\/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    <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-comment\">&lt;!-- Load Google Maps with YOUR API Key --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&amp;libraries=places&amp;callback=initMap\"<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"actionscript\">\n        let map;\n        let directionsService;\n        let directionsRenderer;\n        let waypoints = &#91;];\n        let autocompleteStart, autocompleteEnd, autocompleteWaypoint;\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initMap<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            <span class=\"hljs-comment\">\/\/ Initialize map<\/span>\n            map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(document.getElementById(<span class=\"hljs-string\">\"map\"<\/span>), {\n                zoom: <span class=\"hljs-number\">7<\/span>,\n                center: { lat: <span class=\"hljs-number\">41.8781<\/span>, lng: <span class=\"hljs-number\">-87.6298<\/span> } <span class=\"hljs-comment\">\/\/ Chicago<\/span>\n            });\n            \n            <span class=\"hljs-comment\">\/\/ Initialize directions services<\/span>\n            directionsService = <span class=\"hljs-keyword\">new<\/span> google.maps.DirectionsService();\n            directionsRenderer = <span class=\"hljs-keyword\">new<\/span> google.maps.DirectionsRenderer();\n            directionsRenderer.setMap(map);\n            \n            <span class=\"hljs-comment\">\/\/ Initialize autocomplete for inputs<\/span>\n            autocompleteStart = <span class=\"hljs-keyword\">new<\/span> google.maps.places.Autocomplete(\n                document.getElementById(<span class=\"hljs-string\">'start-input'<\/span>)\n            );\n            autocompleteEnd = <span class=\"hljs-keyword\">new<\/span> google.maps.places.Autocomplete(\n                document.getElementById(<span class=\"hljs-string\">'end-input'<\/span>)\n            );\n            autocompleteWaypoint = <span class=\"hljs-keyword\">new<\/span> google.maps.places.Autocomplete(\n                document.getElementById(<span class=\"hljs-string\">'waypoint-input'<\/span>)\n            );\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">addWaypoint<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> input = document.getElementById(<span class=\"hljs-string\">'waypoint-input'<\/span>);\n            <span class=\"hljs-keyword\">const<\/span> location = input.value.trim();\n            \n            <span class=\"hljs-keyword\">if<\/span> (location) {\n                waypoints.push({\n                    location: location,\n                    stopover: <span class=\"hljs-literal\">true<\/span>\n                });\n                \n                updateWaypointsList();\n                input.value = <span class=\"hljs-string\">''<\/span>;\n            }\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">updateWaypointsList<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> container = document.getElementById(<span class=\"hljs-string\">'waypoints-list'<\/span>);\n            container.innerHTML = <span class=\"hljs-string\">''<\/span>;\n            \n            <span class=\"hljs-keyword\">if<\/span> (waypoints.length === <span class=\"hljs-number\">0<\/span>) {\n                container.innerHTML = <span class=\"hljs-string\">'&lt;p&gt;No stops added yet. Add intermediate locations above.&lt;\/p&gt;'<\/span>;\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            waypoints.forEach((waypoint, index) =&gt; {\n                <span class=\"hljs-keyword\">const<\/span> div = document.createElement(<span class=\"hljs-string\">'div'<\/span>);\n                div.className = <span class=\"hljs-string\">'waypoint-item'<\/span>;\n                div.innerHTML = `\n                    &lt;span&gt;${index + <span class=\"hljs-number\">1<\/span>}. ${waypoint.location}&lt;\/span&gt;\n                    &lt;button onclick=<span class=\"hljs-string\">\"removeWaypoint(${index})\"<\/span> style=<span class=\"hljs-string\">\"color: red; border: none; background: none; cursor: pointer;\"<\/span>&gt;\u00d7&lt;\/button&gt;\n                `;\n                container.appendChild(div);\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">removeWaypoint<\/span><span class=\"hljs-params\">(index)<\/span> <\/span>{\n            waypoints.splice(index, <span class=\"hljs-number\">1<\/span>);\n            updateWaypointsList();\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">calculateRoute<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            <span class=\"hljs-keyword\">const<\/span> start = document.getElementById(<span class=\"hljs-string\">'start-input'<\/span>).value;\n            <span class=\"hljs-keyword\">const<\/span> end = document.getElementById(<span class=\"hljs-string\">'end-input'<\/span>).value;\n            \n            <span class=\"hljs-keyword\">if<\/span> (!start || !end) {\n                alert(<span class=\"hljs-string\">'Please enter both start and end locations.'<\/span>);\n                <span class=\"hljs-keyword\">return<\/span>;\n            }\n            \n            <span class=\"hljs-keyword\">const<\/span> request = {\n                origin: start,\n                destination: end,\n                waypoints: waypoints,\n                optimizeWaypoints: <span class=\"hljs-literal\">true<\/span>, <span class=\"hljs-comment\">\/\/ Let Google optimize the order<\/span>\n                travelMode: <span class=\"hljs-string\">'DRIVING'<\/span>\n            };\n            \n            directionsService.route(request, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">(result, status)<\/span> <\/span>{\n                <span class=\"hljs-keyword\">if<\/span> (status === <span class=\"hljs-string\">'OK'<\/span>) {\n                    directionsRenderer.setDirections(result);\n                    \n                    <span class=\"hljs-comment\">\/\/ Display route information<\/span>\n                    <span class=\"hljs-keyword\">const<\/span> route = result.routes&#91;<span class=\"hljs-number\">0<\/span>];\n                    let totalDistance = <span class=\"hljs-number\">0<\/span>;\n                    let totalDuration = <span class=\"hljs-number\">0<\/span>;\n                    \n                    route.legs.forEach(leg =&gt; {\n                        totalDistance += leg.distance.value;\n                        totalDuration += leg.duration.value;\n                    });\n                    \n                    document.getElementById(<span class=\"hljs-string\">'distance'<\/span>).innerHTML = \n                        `Total distance: ${(totalDistance \/ <span class=\"hljs-number\">1609.34<\/span>).toFixed(<span class=\"hljs-number\">1<\/span>)} miles`;\n                    document.getElementById(<span class=\"hljs-string\">'duration'<\/span>).innerHTML = \n                        `Total time: ${Math.round(totalDuration \/ <span class=\"hljs-number\">60<\/span>)} minutes`;\n                    \n                    document.getElementById(<span class=\"hljs-string\">'route-info'<\/span>).style.display = <span class=\"hljs-string\">'block'<\/span>;\n                } <span class=\"hljs-keyword\">else<\/span> {\n                    alert(<span class=\"hljs-string\">'Could not calculate route: '<\/span> + status);\n                }\n            });\n        }\n        \n        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">clearRoute<\/span><span class=\"hljs-params\">()<\/span> <\/span>{\n            directionsRenderer.setDirections({routes: &#91;]});\n            waypoints = &#91;];\n            updateWaypointsList();\n            document.getElementById(<span class=\"hljs-string\">'route-info'<\/span>).style.display = <span class=\"hljs-string\">'none'<\/span>;\n            document.getElementById(<span class=\"hljs-string\">'start-input'<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n            document.getElementById(<span class=\"hljs-string\">'end-input'<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n            document.getElementById(<span class=\"hljs-string\">'waypoint-input'<\/span>).value = <span class=\"hljs-string\">''<\/span>;\n        }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-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>A professional route planner interface showing multiple stops, optimized route line, and distance calculations.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-98.png\" alt=\"\" class=\"wp-image-346\" style=\"width:658px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-98.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-98-300x168.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-98-768x431.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Understanding the Costs &amp; Limitations<\/p>\n\n\n\n<p>This implementation has several critical drawbacks:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 API Cost Complexity:<\/strong> The Directions API costs approximately <strong>$5 per 1,000 requests<\/strong> after free tier. With multiple waypoints, costs add up quickly.<\/li>\n\n\n\n<li><strong>2.\u00a0 Waypoint Limits: <\/strong>Google Maps API limits routes to <strong>25 waypoints maximum<\/strong> per request.<\/li>\n\n\n\n<li><strong>3.\u00a0 Geocoding Charges: <\/strong>Each address lookup incurs additional Geocoding API costs.<\/li>\n\n\n\n<li><strong>4.\u00a0 Technical Debt:<\/strong> Maintaining this code requires constant updates to Google&#8217;s API changes.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Simpler Alternative: Multiple Locations Without the Headache<\/strong><\/p>\n\n\n\n<p>What if you need to show multiple locations with clean pins, custom styling, and sharing capabilities\u2014without managing APIs, writing code, or worrying about costs?<\/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 all the multi-location functionality of Google Maps Platform but with none of the complexity:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 No API Setup: Get started instantly\u2014no Google Cloud projects or billing accounts needed<\/li>\n\n\n\n<li><strong>2.\u00a0 Unlimited Pins: <\/strong>Add hundreds of locations without worrying about waypoint limits or request quotas<\/li>\n\n\n\n<li><strong>3.\u00a0 Visual Route Planning:<\/strong> Create and optimize routes between points with a drag-and-drop interface<\/li>\n\n\n\n<li>4.\u00a0 Cost Predictability: Transparent pricing with no surprise charges for API overages<\/li>\n\n\n\n<li>5.\u00a0 Built for Business: Add custom branding, categories, and interactive info windows in minutes<\/li>\n<\/ul>\n\n\n\n<p><strong>Why spend days building and hundreds of dollars maintaining a custom solution when you can have a better multi-location map in 5 minutes? <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> handles the technical complexity so you can focus on your business.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"Google Maps Multiple Locations: The Ultimate Developer&#8217;s Guide to Plotting &amp; Routing Want to display not just multiple pins, but also create routes between them or calculate distances? The Google Maps Platform is powerful, but implementing multi-location features requires significant technical expertise. This guide walks you through creating an advanced map with multiple markers and [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51,1],"tags":[],"class_list":["post-343","post","type-post","status-publish","format-standard","hentry","category-google-maps-multiple-locations-google-maps-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/343","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=343"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":347,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/343\/revisions\/347"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}