{"id":770,"date":"2025-12-18T17:27:10","date_gmt":"2025-12-18T14:27:10","guid":{"rendered":"https:\/\/mapsfun.com\/?p=770"},"modified":"2025-12-18T17:27:10","modified_gmt":"2025-12-18T14:27:10","slug":"how-to-create-a-map-with-multiple-locations-free-2025-guide","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=770","title":{"rendered":"How to Create a Map with Multiple Locations Free (2025 Guide)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map with Multiple Locations for Your Website<\/h2>\n\n\n\n<p>Displaying multiple locations on a map\u2014whether for your store network, event venues, or service areas\u2014dramatically improves user experience. While Google Maps offers a powerful platform to build this, the process can be technical and time-consuming.<\/p>\n\n\n\n<p>This guide will walk you through the manual, code-based method. It works, but be prepared to dive into APIs and HTML.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0The Manual Method: Using the Google Maps JavaScript API<\/strong><\/p>\n\n\n\n<p>This approach gives you full control but requires a Google Cloud account and some coding.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Set Up a Google Cloud Project &amp; API Key<\/p>\n\n\n\n<p>The Google Maps API is not free for commercial use, and it requires a project with billing enabled.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Go to the [Google Cloud Console]<\/strong>(<strong>https:\/\/console.cloud.google.com\/<\/strong>).<\/li>\n\n\n\n<li><strong>2.\u00a0 Create a new project.<\/strong><\/li>\n\n\n\n<li><strong>3.\u00a0 Enable Billing:<\/strong> You must link a billing account. Google offers a $200 monthly credit, which is sufficient 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 these two:<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Maps JavaScript API<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Geocoding API (to convert addresses to coordinates)<\/li>\n<\/ul>\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; Crucially, restrict this key to your website&#8217;s domain and the APIs you enabled to prevent unauthorized use.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"385\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-179.png\" alt=\"\" class=\"wp-image-771\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-179.png 658w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-179-300x176.png 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the Map with HTML and JavaScript<\/p>\n\n\n\n<p>Create a new HTML file (e.g., `my-map.html`) and paste the following code. This code creates a map, defines an array of locations, and places a marker for each one.<\/p>\n\n\n\n<p><strong>html<\/strong><br><\/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 API using 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-comment\">&lt;!-- The map will be inserted into this div --&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 function that initializes the map<\/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> 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<\/span>\n\n            <span class=\"hljs-comment\">\/\/ Create the map object<\/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            });\n\n            <span class=\"hljs-comment\">\/\/ An array of your locations: &#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.5167<\/span>, <span class=\"hljs-number\">-0.2101<\/span>],\n                &#91;<span class=\"hljs-string\">'East End Warehouse'<\/span>, <span class=\"hljs-number\">51.5257<\/span>, <span class=\"hljs-number\">-0.0397<\/span>]\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Create a single InfoWindow to reuse<\/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 add markers<\/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\">\/\/ Shows on hover<\/span>\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to show 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 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>If your website is built with plain HTML, you can simply upload this file. For content management systems like WordPress, you will need to paste this code into a &#8220;Custom HTML&#8221; block or a dedicated code module.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"523\" height=\"291\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-180.png\" alt=\"\" class=\"wp-image-772\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-180.png 523w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-180-300x167.png 300w\" sizes=\"auto, (max-width: 523px) 100vw, 523px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenge with the Manual Method<\/strong><\/p>\n\n\n\n<p>As you&#8217;ve seen, this process is fraught with complexity:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Billing &amp; Quotas: You must set up a Google Cloud account with billing, constantly worrying about usage quotas and potential costs.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Security Risks: An unrestricted API key is a security vulnerability that can lead to massive bills.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Technical Overhead: You need to manually find and input latitude\/longitude for every address and write JavaScript code for any customizations.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Maintenance: Any change to a location requires editing the code and re-uploading the file.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Create Stunning Maps in Minutes, Not Hours<\/strong><\/p>\n\n\n\n<p>What if you could achieve all this\u2014and more\u2014without 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\">MapsFun.com<\/a>&nbsp; is built specifically for this purpose. It\u2019s a powerful tool that eliminates every single one of these pain points:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Truly No-Code: Click to add locations from a search, customize colors and icons, and design info windows with a visual editor.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No API Setup: We handle all the backend infrastructure. No accounts, billing, or security configurations are needed.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instant Embedding: Get a simple, secure embed code to paste into any website builder or CMS instantly.<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with complex APIs and fragile code. Create a beautiful, professional, and fully functional multi-location map in just a few clicks at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> .<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map with Multiple Locations for Your Website Displaying multiple locations on a map\u2014whether for your store network, event venues, or service areas\u2014dramatically improves user experience. While Google Maps offers a powerful platform to build this, the process can be technical and time-consuming. This guide will walk you through the manual, code-based [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[103,1],"tags":[],"class_list":["post-770","post","type-post","status-publish","format-standard","hentry","category-create-a-map-with-multiple-locations-free","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/770","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=770"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/770\/revisions"}],"predecessor-version":[{"id":773,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/770\/revisions\/773"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}