{"id":709,"date":"2025-12-15T14:17:15","date_gmt":"2025-12-15T11:17:15","guid":{"rendered":"https:\/\/mapsfun.com\/?p=709"},"modified":"2025-12-15T14:17:15","modified_gmt":"2025-12-15T11:17:15","slug":"how-to-map-multiple-points-on-map-quick-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=709","title":{"rendered":"How to Map Multiple Points on Map (Quick Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Map Multiple Points on a Map and Embed It on Your Website<\/h2>\n\n\n\n<p>Displaying multiple locations on a custom map is a powerful way to show your store network, event locations, or service areas. While Google Maps offers a powerful API, the process can be technically daunting. This guide will show you a functional method using the Google Maps Platform and then introduce a far simpler alternative.<\/p>\n\n\n\n<p><strong>The manual method requires a Google Cloud account, API keys, and some comfort with code.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Manual Method: Using the Google Maps JavaScript API<\/strong><\/p>\n\n\n\n<p>This approach offers maximum control but involves several complex steps.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Prerequisites &#8211; Get Your API Key<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Create a Google Cloud Project:<\/strong> Go to the [Google Cloud Console](https:\/\/console.cloud.google.com\/), create a new project, and enable billing (you get a $200 monthly credit, which covers most small-site usage).<\/li>\n\n\n\n<li><strong>2.\u00a0 Enable APIs:<\/strong> Navigate to &#8220;APIs &amp; Services > Library&#8221; and enable both the <strong>Maps JavaScript API<\/strong> and the<strong> Geocoding API.<\/strong><\/li>\n\n\n\n<li><strong>3.\u00a0 Create &amp; Secure an API Key: <\/strong>Go to &#8220;APIs &amp; Services > Credentials&#8221;, create an API key, and restrict it to the two APIs you just enabled. For security, you can also restrict it by your website&#8217;s domain (e.g., `https:\/\/yourwebsite.com\/*`).<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the Map with Code<\/p>\n\n\n\n<p>Create an HTML file and use the following code. This code creates a map, adds multiple markers, and even includes a clickable info window for each point.<\/p>\n\n\n\n<p>Create a file named `my-map.html` and paste this 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>&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-Point Location Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Load the Google Maps 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\">\/* 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-radius<\/span>: <span class=\"hljs-number\">8px<\/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 map center (often the first location or a central point)<\/span>\n            <span class=\"hljs-keyword\">const<\/span> centerPoint = { <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<\/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>: centerPoint,\n                <span class=\"hljs-attr\">mapId<\/span>: <span class=\"hljs-string\">'DEMO_MAP_ID'<\/span> <span class=\"hljs-comment\">\/\/ Optional: for custom map styles<\/span>\n            });\n\n            <span class=\"hljs-comment\">\/\/ Define your locations in an array: &#91;Title, Latitude, Longitude]<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                &#91;<span class=\"hljs-string\">'London HQ'<\/span>, <span class=\"hljs-number\">51.5074<\/span>, <span class=\"hljs-number\">-0.1278<\/span>],\n                &#91;<span class=\"hljs-string\">'Westside Store'<\/span>, <span class=\"hljs-number\">51.5160<\/span>, <span class=\"hljs-number\">-0.2100<\/span>],\n                &#91;<span class=\"hljs-string\">'Eastend Warehouse'<\/span>, <span class=\"hljs-number\">51.5250<\/span>, <span class=\"hljs-number\">-0.0500<\/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 and place 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-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,\n                    <span class=\"hljs-attr\">title<\/span>: title, <span class=\"hljs-comment\">\/\/ Appears on hover<\/span>\n                    <span class=\"hljs-comment\">\/\/ icon: 'custom-icon.png' \/\/ Uncomment to use a custom marker icon<\/span>\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to open the InfoWindow<\/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>);\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_HERE` in the script tag with the actual API key you generated.<\/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>You can upload this HTML file directly to your web server. If you&#8217;re using a content management system like WordPress, Wix, or Squarespace, you will need to paste this code into an &#8220;HTML Embed&#8221; or &#8220;Code Block&#8221; module.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Reality Check: Challenges of the Manual Method<\/strong><\/p>\n\n\n\n<p>While powerful, this approach is filled with friction:<\/p>\n\n\n\n<p><strong>Complex Setup: <\/strong>Managing Google Cloud projects and billing can be intimidating for non-developers.<\/p>\n\n\n\n<p><strong>Security Risks: <\/strong>An unrestricted API key can lead to massive unexpected charges if stolen.<\/p>\n\n\n\n<p><strong>Geocoding Hassle:<\/strong> You must manually find and input the latitude and longitude for every address.<\/p>\n\n\n\n<p><strong>Rigid Customization:<\/strong> Changing simple things like the map&#8217;s look or marker icons requires diving back into the code.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>A Better, Faster Solution: Use MapsFun.com<\/strong><\/p>\n\n\n\n<p>What if you could create a beautiful, interactive map with multiple points in under five minutes, without writing a single line of code?<\/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> is built specifically for this purpose. It streamlines the entire process:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Visual Point-and-Click Editor: <\/strong>Simply search for an address and click to add a point. No geocoding required.<\/li>\n\n\n\n<li><strong>2.\u00a0 Zero API Management:<\/strong> We handle all the technical backend, so you don&#8217;t need a Google Cloud account.<\/li>\n\n\n\n<li><strong>3.\u00a0 Instant Customization:<\/strong> Easily choose from different map styles, upload custom markers, and design rich info windows with text and images.<\/li>\n\n\n\n<li><strong>4.\u00a0 One-Click Embedding:<\/strong> Get a clean, simple embed code to paste into any website builder.<\/li>\n<\/ul>\n\n\n\n<p>Stop dealing with complex code and API configurations. **Create a professional multi-point map effortlessly with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.&nbsp;<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Map Multiple Points on a Map and Embed It on Your Website Displaying multiple locations on a custom map is a powerful way to show your store network, event locations, or service areas. While Google Maps offers a powerful API, the process can be technically daunting. This guide will show you a functional [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87,1],"tags":[],"class_list":["post-709","post","type-post","status-publish","format-standard","hentry","category-map-multiple-points-on-map","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/709","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=709"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/709\/revisions"}],"predecessor-version":[{"id":710,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/709\/revisions\/710"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}