{"id":839,"date":"2025-12-22T11:33:25","date_gmt":"2025-12-22T08:33:25","guid":{"rendered":"https:\/\/mapsfun.com\/?p=839"},"modified":"2025-12-22T11:33:26","modified_gmt":"2025-12-22T08:33:26","slug":"map-that-can-pin-multiple-locations-best-tools","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=839","title":{"rendered":"Map That Can Pin Multiple Locations (Best Tools)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Create a Map That Can Pin Multiple Locations on Your Website<\/h2>\n\n\n\n<p>Displaying a map with multiple pins is a fantastic way to show your store network, event locations, or travel itinerary. While powerful, the fully custom method using Google&#8217;s APIs can be complex. This guide will show you both the manual coding method and a much simpler alternative.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Custom Code Approach with Google Maps APIs<\/strong><\/p>\n\n\n\n<p>This method offers maximum control but requires technical setup.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Prerequisites &#8211; Get Your API Key<\/p>\n\n\n\n<p>You cannot use Google Maps on your site without an API key. Here\u2019s how to get one:<\/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 and enable billing (note: you get a $200 monthly credit, which typically covers moderate usage).<\/li>\n\n\n\n<li>3.\u00a0 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>4.\u00a0 Go to &#8220;Credentials,&#8221; create an API key, and <strong>restrict it<\/strong> to the Maps JavaScript API for security.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"633\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-211.png\" alt=\"\" class=\"wp-image-840\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-211.png 628w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-211-298x300.png 298w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-211-150x150.png 150w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 2: Build the Map with Multiple Pins<\/p>\n\n\n\n<p>The code below creates a map and adds multiple markers. You&#8217;ll need to create an HTML file 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-Pin Location Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n    <span class=\"hljs-comment\">&lt;!-- Include 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-selector-id\">#map<\/span> {\n            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">500px<\/span>; <span class=\"hljs-comment\">\/* Map height *\/<\/span>\n            <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;   <span class=\"hljs-comment\">\/* Map width *\/<\/span>\n            <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">8px<\/span>; <span class=\"hljs-comment\">\/* Optional: rounded corners *\/<\/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>Our Service Areas<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 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\">\/\/ Set 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 locations: &#91;Title, Latitude, Longitude]<\/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>],\n                &#91;<span class=\"hljs-string\">'North London Depot'<\/span>, <span class=\"hljs-number\">51.6000<\/span>, <span class=\"hljs-number\">-0.1500<\/span>],\n                &#91;<span class=\"hljs-string\">'South London Warehouse'<\/span>, <span class=\"hljs-number\">51.4500<\/span>, <span class=\"hljs-number\">-0.1000<\/span>],\n                &#91;<span class=\"hljs-string\">'East London Facility'<\/span>, <span class=\"hljs-number\">51.5200<\/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 add a marker for each one<\/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, <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-icon.png' \/\/ Uncomment to use a custom pin icon<\/span>\n                });\n\n                <span class=\"hljs-comment\">\/\/ Add a click listener to show the location name<\/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 Site<\/p>\n\n\n\n<p>Upload this HTML file to your web server. If you use a content management system like WordPress, look for an &#8220;HTML&#8221; or &#8220;Code&#8221; block in your page editor to paste this code.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Reality of This Method: It&#8217;s a Technical Headache<\/strong><\/p>\n\n\n\n<p>While the code above works, it comes with significant overhead:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>API Management:<\/strong> You are responsible for securing your API key and managing usage quotas to prevent unexpected costs.<\/li>\n\n\n\n<li><strong>Manual Data Entry:<\/strong> You must find and manually input the latitude and longitude for every single location.<\/li>\n\n\n\n<li><strong>Limited Flexibility:<\/strong> To change pins, you have to edit the code and re-upload the file. Non-technical users cannot manage the map.<\/li>\n\n\n\n<li><strong>Advanced Features Require More Code: <\/strong>Adding features like grouped pins (clustering) or custom popup designs requires extensive additional JavaScript knowledge.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Create Your Multi-Pin Map in Minutes, Not Hours<\/strong><\/p>\n\n\n\n<p>If the technical process above seems daunting, there&#8217;s a professional and far easier solution.<\/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 creating beautiful, interactive maps with multiple pins without any coding.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visual Editor:<\/strong> Simply search for addresses and click to drop pins. No latitude\/longitude required.<\/li>\n\n\n\n<li><strong>No API Keys: <\/strong>We handle all the complex backend infrastructure.<\/li>\n\n\n\n<li><strong>Rich Customization:<\/strong> Easily customize pin colors, map styles, and popup content with a user-friendly interface.<\/li>\n\n\n\n<li><strong>Instant Embedding<\/strong>: Get a simple embed code to paste into any website, making the map live in seconds.<\/li>\n<\/ul>\n\n\n\n<p>Why spend hours configuring code and APIs when you can achieve a better result in just a few clicks? Visit  <a href=\"http:\/\/mapsfun.com\"><strong>MapsFun.com<\/strong><\/a> to create your multi-location map today.<\/p>\n","protected":false},"excerpt":{"rendered":"How to Create a Map That Can Pin Multiple Locations on Your Website Displaying a map with multiple pins is a fantastic way to show your store network, event locations, or travel itinerary. While powerful, the fully custom method using Google&#8217;s APIs can be complex. This guide will show you both the manual coding method [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[116,1],"tags":[],"class_list":["post-839","post","type-post","status-publish","format-standard","hentry","category-map-that-can-pin-multiple-locations","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/839","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=839"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":841,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/839\/revisions\/841"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}