{"id":604,"date":"2025-12-15T11:45:27","date_gmt":"2025-12-15T08:45:27","guid":{"rendered":"https:\/\/mapsfun.com\/?p=604"},"modified":"2025-12-15T11:45:27","modified_gmt":"2025-12-15T08:45:27","slug":"how-to-add-multiple-points-on-google-maps-step-by-step-guide-in-2025","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=604","title":{"rendered":"How to Add Multiple Points on Google Maps (Step-by-Step Guide in 2025)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add Multiple Points on Google Maps: A Developer&#8217;s Guide<\/h2>\n\n\n\n<p>Plotting multiple locations on a Google Map for your website is a common need, whether you&#8217;re showing store locations, event venues, or service areas. While Google&#8217;s platform is powerful, the process isn&#8217;t always straightforward. This guide will walk you through the official method, which requires some technical know-how.<\/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 is the most flexible and powerful way to create a custom multi-point map. Follow these steps carefully.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Get a Google Maps API Key<\/p>\n\n\n\n<p>This is the most critical and often the most confusing step for beginners.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 Go to the <a href=\"https:\/\/console.cloud.google.com\/welcome\/new\">Google Cloud Console<\/a><\/li>\n\n\n\n<li>2.&nbsp; Create a new project or select an existing one.<\/li>\n\n\n\n<li><strong>3.\u00a0 Enable Billing:<\/strong> You must link a billing account. Google provides a $200 monthly credit, which is more than enough for most small to medium websites.<\/li>\n\n\n\n<li><strong>4.\u00a0 Enable the APIs: <\/strong>Navigate to &#8220;APIs &amp; Services > Library&#8221; and enable the following:\n<ul class=\"wp-block-list\">\n<li><strong>Maps JavaScript API<\/strong><\/li>\n\n\n\n<li><strong>Geocoding API<\/strong> (needed to convert addresses to coordinates if you&#8217;re not using lat\/lng)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"651\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-110-1024x651.png\" alt=\"\" class=\"wp-image-605\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-110-1024x651.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-110-300x191.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-110-768x488.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-110.png 1392w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>5.\u00a0 Create an API Key: <\/strong>Go to &#8220;APIs &amp; Services > Credentials&#8221;. Click &#8220;Create Credentials&#8221; and choose &#8220;API key&#8221;. For security, <strong>restrict this key<\/strong> to the &#8220;Maps JavaScript API&#8221; and &#8220;Geocoding API&#8221;.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the HTML and JavaScript Page<\/p>\n\n\n\n<p>Create a new HTML file (e.g., `mymap.html`) and paste the following code. This code creates a map, defines an array of locations, and loops through them to place markers.<\/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>Our Store Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Load the 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&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\">\/* Set the size of the map div *\/<\/span>\n        <span class=\"hljs-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n            <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ccc<\/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\">h2<\/span>&gt;<\/span>Find Us Here<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/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\">\"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 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\">\/\/ Define the initial center point of the map<\/span>\n            <span class=\"hljs-keyword\">const<\/span> myLatLng = { <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> }; <span class=\"hljs-comment\">\/\/ NYC Coordinates<\/span>\n\n            <span class=\"hljs-comment\">\/\/ Create a new map instance<\/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\">11<\/span>,\n                <span class=\"hljs-attr\">center<\/span>: myLatLng,\n            });\n\n            <span class=\"hljs-comment\">\/\/ Define your locations as an array of arrays &#91;Title, Lat, Lng]<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                &#91;<span class=\"hljs-string\">'Manhattan Store'<\/span>, <span class=\"hljs-number\">40.7614<\/span>, <span class=\"hljs-number\">-73.9776<\/span>],\n                &#91;<span class=\"hljs-string\">'Brooklyn Store'<\/span>, <span class=\"hljs-number\">40.6782<\/span>, <span class=\"hljs-number\">-73.9442<\/span>],\n                &#91;<span class=\"hljs-string\">'Warehouse'<\/span>, <span class=\"hljs-number\">40.7061<\/span>, <span class=\"hljs-number\">-74.0088<\/span>]\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Create a single InfoWindow to be reused<\/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 the locations array and add a marker for each<\/span>\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">&#91;title, lat, lng]<\/span>) =&gt;<\/span> {\n                <span class=\"hljs-comment\">\/\/ Create a new marker for each location<\/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>: { lat, lng },\n                    <span class=\"hljs-attr\">map<\/span>: map, <span class=\"hljs-comment\">\/\/ Attach it to our map<\/span>\n                    <span class=\"hljs-attr\">title<\/span>: title, <span class=\"hljs-comment\">\/\/ Shows on hover<\/span>\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to each marker to show its title<\/span>\n                marker.addListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\n                    infowindow.setContent(<span class=\"hljs-string\">`&lt;strong&gt;<span class=\"hljs-subst\">${title}<\/span>&lt;\/strong&gt;`<\/span>); <span class=\"hljs-comment\">\/\/ HTML content for the popup<\/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>Replace `YOUR_API_KEY` in the script tag with the actual 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 Site<\/p>\n\n\n\n<p>If your website is a simple HTML site, you can just upload this file. For Content Management Systems (CMS) like WordPress, Wix, or Squarespace, you will need to find an &#8220;HTML&#8221; or &#8220;Embed Code&#8221; block and paste the entire code snippet there.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Reality of This Approach<\/strong><\/p>\n\n\n\n<p>While this method gives you full control, it&#8217;s clear that it comes with significant overhead:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Technical Barrier: <\/strong>You need to be comfortable with code, APIs, and Google Cloud.<\/li>\n\n\n\n<li><strong>Billing Setup:<\/strong> The requirement to enable billing, even with a free tier, is a hurdle for many.<\/li>\n\n\n\n<li><strong>Security Risks:<\/strong> Improperly secured API keys can lead to massive bills.<\/li>\n\n\n\n<li><strong>Manual Data Entry:<\/strong> Adding or removing locations requires manually editing the code and redeploying.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Create Your Map in Minutes, Not Hours<\/strong><\/p>\n\n\n\n<p>What if you could achieve the same result without writing a single line of code or touching the Google 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 built specifically for this purpose. It&#8217;s a user-friendly platform that handles all the technical complexity in the background.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 Visual Editor: Simply search for locations and click to add points. No latitude\/longitude needed.<\/li>\n\n\n\n<li>2.\u00a0 No API Keys: We manage all the backend infrastructure. Just sign up and start building.<\/li>\n\n\n\n<li>3.\u00a0 Rich Customization: Easily change map styles, marker icons, and info window content with a click.<\/li>\n\n\n\n<li>4.\u00a0 Instant Embedding: Get a simple, secure embed code to paste into any website.<\/li>\n\n\n\n<li><\/li>\n<\/ul>\n\n\n\n<p>Stop dealing with code and configuration. **Create a beautiful, professional multi-point map effortlessly at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Add Multiple Points on Google Maps: A Developer&#8217;s Guide Plotting multiple locations on a Google Map for your website is a common need, whether you&#8217;re showing store locations, event venues, or service areas. While Google&#8217;s platform is powerful, the process isn&#8217;t always straightforward. This guide will walk you through the official method, which [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55,1],"tags":[],"class_list":["post-604","post","type-post","status-publish","format-standard","hentry","category-add-multiple-points-on-google-maps","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/604","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=604"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/604\/revisions"}],"predecessor-version":[{"id":606,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/604\/revisions\/606"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}