{"id":738,"date":"2025-12-16T15:47:43","date_gmt":"2025-12-16T12:47:43","guid":{"rendered":"https:\/\/mapsfun.com\/?p=738"},"modified":"2025-12-16T15:47:44","modified_gmt":"2025-12-16T12:47:44","slug":"how-to-map-to-show-multiple-locations-2025-tutorial","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=738","title":{"rendered":"How to Map to Show Multiple Locations (2025 Tutorial)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map to Show Multiple Locations on Your Website (The Complete Guide)<\/h2>\n\n\n\n<p>Want to display a map with your store locations, event sites, or project portfolios on your website? While a single location is straightforward, plotting multiple points can be tricky. This guide will walk you through the manual process using the Google Maps Platform.<\/p>\n\n\n\n<p>A Quick Warning: This method requires a Google Cloud account, enabling billing APIs, and some basic coding. It&#8217;s powerful but has a learning curve.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0Method 1: Using the Google Maps Platform (The &#8220;Official&#8221; Way)<\/strong><\/p>\n\n\n\n<p>This method gives you full control but involves several technical steps.<\/p>\n\n\n\n<p class=\"has-text-align-center\"> Step 1: Set Up Your Google Cloud Project<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Go to the [Google Cloud Console](https:\/\/console.cloud.google.com\/).<\/li>\n\n\n\n<li>2.&nbsp; Create a new project or select an existing one.<\/li>\n\n\n\n<li>3.&nbsp; Enable Billing: You must enable billing on your project. Google provides a recurring $200 monthly credit, which typically covers a lot of usage for a simple map.<\/li>\n\n\n\n<li>4.&nbsp; Enable the Necessary APIs: Navigate to the &#8220;APIs &amp; Services &gt; Library&#8221; and enable these two critical APIs:\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0&#8211; \u00a0 Maps JavaScript API<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0&#8211; \u00a0 Geocoding API (to convert addresses into coordinates)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"292\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-165.png\" alt=\"\" class=\"wp-image-739\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-165.png 508w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-165-300x172.png 300w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Get Your API Key<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; Go to &#8220;APIs &amp; Services &gt; Credentials&#8221;.<\/li>\n\n\n\n<li>2.&nbsp; Click &#8220;Create Credentials&#8221; and select &#8220;API key&#8221;.<\/li>\n\n\n\n<li>3.&nbsp; Restrict Your API Key! This is crucial for security. Click on the newly created key and restrict it to the Maps JavaScript API and Geocoding API. You can also restrict it by HTTP referrer (e.g., `yourwebsite.com\/*`).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"362\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-166.png\" alt=\"\" class=\"wp-image-740\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-166.png 483w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-166-300x225.png 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">&nbsp;Step 3: Write the HTML and JavaScript Code<\/p>\n\n\n\n<p>Now for the technical part. You&#8217;ll need to create an HTML file and add the following code. This code initializes the map, and adds multiple markers based on an array of locations.<\/p>\n\n\n\n<p><strong>Create a file named `multi-location-map.html` and paste this code:<\/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>My Multiple Location Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Include the Maps JavaScript 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-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">400px<\/span>;\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/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>Our Office Locations<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/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-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 of the map<\/span>\n            <span class=\"hljs-keyword\">const<\/span> mapCenter = { <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\">\/\/ New York City<\/span>\n\n            <span class=\"hljs-comment\">\/\/ Initialize the map<\/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\">\/\/ Define your locations: Name, Lat, Lng<\/span>\n            <span class=\"hljs-keyword\">const<\/span> locations = &#91;\n                &#91;<span class=\"hljs-string\">'New York Office'<\/span>, <span class=\"hljs-number\">40.7128<\/span>, <span class=\"hljs-number\">-74.0060<\/span>],\n                &#91;<span class=\"hljs-string\">'Jersey City Branch'<\/span>, <span class=\"hljs-number\">40.7178<\/span>, <span class=\"hljs-number\">-74.0431<\/span>],\n                &#91;<span class=\"hljs-string\">'Brooklyn Warehouse'<\/span>, <span class=\"hljs-number\">40.6782<\/span>, <span class=\"hljs-number\">-73.9442<\/span>]\n            ];\n\n            <span class=\"hljs-comment\">\/\/ Create an info window to share between 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 the locations and add markers to the map<\/span>\n            locations.forEach(<span class=\"hljs-function\">(<span class=\"hljs-params\">&#91;title, lat, lng], i<\/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\">\/\/ Tooltip on hover<\/span>\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to each marker to open an info window.<\/span>\n                marker.addListener(<span class=\"hljs-string\">\"click\"<\/span>, () =&gt; {\n                    infowindow.setContent(title);\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>&nbsp;Replace `YOUR_API_KEY` in the script tag with the actual API key you generated in Step 2.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 4: Embed on Your Website<\/p>\n\n\n\n<p>If you have a static website, you can simply upload this HTML file. If you&#8217;re using a CMS like WordPress, you might need to use a custom HTML block or a page builder module to paste this code.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0The Challenge with This Method<\/strong><\/p>\n\n\n\n<p>As you can see, the process is technical and time-consuming:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8211; \u00a0 You need to manage a Google Cloud account and billing.<\/li>\n\n\n\n<li>&#8211; \u00a0 You must handle API key security to avoid unexpected charges.<\/li>\n\n\n\n<li>&#8211;\u00a0 You have to manually code the latitude and longitude for every location.<\/li>\n\n\n\n<li>&#8211; \u00a0 Adding features like custom icons, clustering, or advanced info windows requires even more complex JavaScript.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a0There&#8217;s an Easier Way: Use <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>\u00a0<\/strong><\/p>\n\n\n\n<p>Why go through all that complexity when you can achieve the same result\u2014or even better\u2014in minutes?<\/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 a dedicated tool designed specifically for this task. It eliminates all the technical hurdles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.&nbsp; No Coding Required: A simple, intuitive interface lets you search and add locations visually.<\/li>\n\n\n\n<li>2.&nbsp; No API Keys: We handle all the backend complexity for you.<\/li>\n\n\n\n<li>3.&nbsp; Rich Customization: Easily change map styles, add custom icons, and design beautiful info windows without writing a single line of code.<\/li>\n\n\n\n<li>4.&nbsp; Get the Embed Code Instantly: Once your map is ready, you get a simple embed code to paste directly into your website, just like a YouTube video.<\/li>\n<\/ul>\n\n\n\n<p>Stop wrestling with code and API configurations. Create a stunning, professional multi-location map in just a few clicks at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map to Show Multiple Locations on Your Website (The Complete Guide) Want to display a map with your store locations, event sites, or project portfolios on your website? While a single location is straightforward, plotting multiple points can be tricky. This guide will walk you through the manual process using the [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[97,1],"tags":[],"class_list":["post-738","post","type-post","status-publish","format-standard","hentry","category-map-to-show-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/738","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=738"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/738\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/738\/revisions\/741"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}