{"id":607,"date":"2025-12-15T11:58:20","date_gmt":"2025-12-15T08:58:20","guid":{"rendered":"https:\/\/mapsfun.com\/?p=607"},"modified":"2025-12-15T11:58:20","modified_gmt":"2025-12-15T08:58:20","slug":"how-to-add-multiple-points-on-google-maps-2025-easy-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=607","title":{"rendered":"How to Add Multiple Points on Google Maps (2025 Easy Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Google Map with Multiple Points: A Step-by-Step Developer&#8217;s Guide<\/h2>\n\n\n\n<p>Displaying multiple locations on a Google Map is a powerful way to showcase your business branches, event locations, or travel itineraries. While the end result is impressive, the process of creating a custom multi-point map involves several technical steps. This guide will walk you through the official method using the Google Maps JavaScript API.<\/p>\n\n\n\n<p><strong>This method requires a Google Cloud account, enabling APIs, and some basic coding knowledge.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method: Using the Google Maps JavaScript API<\/strong><\/p>\n\n\n\n<p>This approach gives you full control over your map&#8217;s appearance and functionality. Follow these steps carefully.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up Your Google Cloud Project and API Key<\/p>\n\n\n\n<p>The API key is your passport to use Google Maps services. Getting it is a multi-step process.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Go to the Google Cloud Console:<\/strong> Navigate to [https:\/\/console.cloud.google.com\/](https:\/\/console.cloud.google.com\/).<\/li>\n\n\n\n<li><strong>2.\u00a0 Create a Project: <\/strong>Click the project dropdown and create a new project. Give it a relevant name like &#8220;My Business Map&#8221;.<\/li>\n\n\n\n<li><strong>3.\u00a0 Enable Billing:<\/strong> You must enable billing on your project. Don&#8217;t worry\u2014Google offers a **$200 monthly credit**, and a simple map with a few thousand views will likely cost nothing.<\/li>\n\n\n\n<li><strong>4.\u00a0 Enable the Necessary APIs:<\/strong> Go to &#8220;APIs &amp; Services&#8221; > &#8220;Library&#8221;. Search for and enable these two critical APIs:\n<ul class=\"wp-block-list\">\n<li>Maps JavaScript API<\/li>\n\n\n\n<li>Geocoding API (to convert addresses into coordinates)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>You must enable the correct APIs in your Google Cloud project.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>5.\u00a0 Create Your API Key:<\/strong> Go to &#8220;APIs &amp; Services&#8221; > &#8220;Credentials&#8221;. Click &#8220;Create Credentials&#8221; and select &#8220;API key&#8221;.<\/li>\n\n\n\n<li><strong>6.\u00a0 Restrict Your Key (VERY IMPORTANT):<\/strong> Click on the newly created API key and set restrictions. Under &#8220;Application restrictions,&#8221; choose &#8220;HTTP referrers,&#8221; and under &#8220;API restrictions,&#8221; restrict the key to the <strong>Maps JavaScript API<\/strong> and <strong>Geocoding API.<\/strong> This prevents others from using your key and running up your bill.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the Web Page with the Map Code<\/p>\n\n\n\n<p>Now, create an HTML file and use the following code. This code initializes a map, defines an array of locations, and uses a loop to place a marker for each one.<\/p>\n\n\n\n<p><strong>Create a file named `multi-point-map.html` and paste this code:<\/strong><\/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>Our Service Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Include the Google Maps JS API with your key --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">async<\/span> <span class=\"hljs-attr\">defer<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY_HERE&amp;callback=initMap\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n        <span class=\"hljs-comment\">\/* The map container must have a defined height *\/<\/span>\n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">600px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/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\">6px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0.1<\/span>);\n        }\n        <span class=\"hljs-selector-tag\">body<\/span> {\n            <span class=\"hljs-attribute\">font-family<\/span>: Arial, sans-serif;\n            <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">1000px<\/span>;\n            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">20px<\/span> auto;\n            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">20px<\/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\">h1<\/span>&gt;<\/span>Find Our Services Near You<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>We have multiple locations to serve you better. Check the map below.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-comment\">&lt;!-- This is where the map will be rendered --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"map\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n        <span class=\"hljs-comment\">\/\/ The initMap function is called once the API library is loaded<\/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\">\/\/ Set the initial center of the map (often the first point or a central location)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> mapCenter = { <span class=\"hljs-attr\">lat<\/span>: <span class=\"hljs-number\">51.5074<\/span>, <span class=\"hljs-attr\">lng<\/span>: <span class=\"hljs-number\">-0.1278<\/span> }; <span class=\"hljs-comment\">\/\/ London coordinates<\/span>\n\n            <span class=\"hljs-comment\">\/\/ Create a new map instance and attach it to the 'map' div<\/span>\n            <span class=\"hljs-keyword\">const<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">\"map\"<\/span>), {\n                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">10<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: mapCenter,\n                <span class=\"hljs-attr\">mapTypeControl<\/span>: <span class=\"hljs-literal\">true<\/span>,\n                <span class=\"hljs-attr\">streetViewControl<\/span>: <span class=\"hljs-literal\">false<\/span>\n            });\n\n            <span class=\"hljs-comment\">\/\/ Define your locations in an array: &#91;Title, Latitude, Longitude, Description]<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                &#91;<span class=\"hljs-string\">'Central London Office'<\/span>, <span class=\"hljs-number\">51.5074<\/span>, <span class=\"hljs-number\">-0.1278<\/span>, <span class=\"hljs-string\">'Our main headquarters.'<\/span>],\n                &#91;<span class=\"hljs-string\">'North London Branch'<\/span>, <span class=\"hljs-number\">51.5853<\/span>, <span class=\"hljs-number\">-0.1283<\/span>, <span class=\"hljs-string\">'Full services available.'<\/span>],\n                &#91;<span class=\"hljs-string\">'South London Warehouse'<\/span>, <span class=\"hljs-number\">51.4527<\/span>, <span class=\"hljs-number\">-0.1388<\/span>, <span class=\"hljs-string\">'Logistics and distribution center.'<\/span>]\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Create a single InfoWindow to be reused for all markers<\/span>\n            <span class=\"hljs-keyword\">const<\/span> infowindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow();\n\n            <span class=\"hljs-comment\">\/\/ Loop through each location in the array and create a marker<\/span>\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">&#91;title, lat, lng, description]<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-comment\">\/\/ Create a new marker<\/span>\n                <span class=\"hljs-keyword\">const<\/span> marker = <span class=\"hljs-keyword\">new<\/span> google.maps.Marker({\n                    <span class=\"hljs-attr\">position<\/span>: { <span class=\"hljs-attr\">lat<\/span>: lat, <span class=\"hljs-attr\">lng<\/span>: lng },\n                    <span class=\"hljs-attr\">map<\/span>: map, <span class=\"hljs-comment\">\/\/ Attach marker to the map<\/span>\n                    <span class=\"hljs-attr\">title<\/span>: title, <span class=\"hljs-comment\">\/\/ Tooltip on hover<\/span>\n                    <span class=\"hljs-comment\">\/\/ icon: 'custom_pin.png' \/\/ You could add a custom icon here<\/span>\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to each marker to show an info window<\/span>\n                marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n                    infowindow.setContent(<span class=\"hljs-string\">`\n                        &lt;div style=\"padding: 10px;\"&gt;\n                            &lt;h3 style=\"margin: 0 0 8px 0;\"&gt;<span class=\"hljs-subst\">${title}<\/span>&lt;\/h3&gt;\n                            &lt;p style=\"margin: 0;\"&gt;<span class=\"hljs-subst\">${description}<\/span>&lt;\/p&gt;\n                        &lt;\/div&gt;\n                    `<\/span>);\n                    infowindow.open(map, marker);\n                });\n            });\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>\u00a0Replace `YOUR_API_KEY_HERE` in the script tag with the restricted API key you generated in Step 1.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Embed the Map on Your Website<\/p>\n\n\n\n<p>Open the `multi-point-map.html` file in a web browser to test your map. If it works, you can embed it on your website. For static sites, upload the file. For CMS platforms like WordPress, use a custom HTML block to paste the entire code.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenge with the Official Method<\/strong><\/p>\n\n\n\n<p>While powerful, this approach has significant barriers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Technical Complexity:<\/strong> Requires comfort with code, cloud consoles, and API management.<\/li>\n\n\n\n<li><strong>Billing Setup:<\/strong> Mandatory billing activation is a hurdle for many, despite the free tier.<\/li>\n\n\n\n<li><strong>Security Concerns:<\/strong> Unsecured API keys are a major risk.<\/li>\n\n\n\n<li><strong>Manual Updates:<\/strong> Every change requires editing code and redeploying.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>A Simpler, Faster Alternative<\/strong><\/p>\n\n\n\n<p>What if you could create a feature-rich, multi-point map without writing code or managing a cloud console?<\/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\"><strong>MapsFun.com<\/strong><\/a> is designed specifically for this purpose. It eliminates all the technical headaches:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0No-Code Visual Editor:<\/strong> Click on the map to add points. Search for addresses. It&#8217;s as simple as using Google Maps itself.<\/li>\n\n\n\n<li><strong>2.\u00a0 Zero API Configuration:<\/strong> We handle all the backend complexity. No keys, no billing, no security risks.<\/li>\n\n\n\n<li><strong>3.\u00a0 Advanced Features: <\/strong>Easily customize map styles, marker icons, and info windows with a user-friendly interface.<\/li>\n\n\n\n<li><strong>4.\u00a0 Instant Publishing:<\/strong> Get a clean, secure embed code to paste into any website or CMS.<\/li>\n<\/ul>\n\n\n\n<p>Why spend hours on code and configuration? Create a stunning, professional multi-point map in minutes with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.\u00a0<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Google Map with Multiple Points: A Step-by-Step Developer&#8217;s Guide Displaying multiple locations on a Google Map is a powerful way to showcase your business branches, event locations, or travel itineraries. While the end result is impressive, the process of creating a custom multi-point map involves several technical steps. This guide will [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56,1],"tags":[],"class_list":["post-607","post","type-post","status-publish","format-standard","hentry","category-google-map-multiple-points","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/607","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=607"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/607\/revisions"}],"predecessor-version":[{"id":608,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/607\/revisions\/608"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}