{"id":178,"date":"2025-12-15T11:12:19","date_gmt":"2025-12-15T08:12:19","guid":{"rendered":"https:\/\/mapsfun.com\/?p=178"},"modified":"2025-12-15T11:12:19","modified_gmt":"2025-12-15T08:12:19","slug":"how-to-add-multiple-pins-map-to-squarespace","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=178","title":{"rendered":"How to Add Multiple Pins Map to Squarespace"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">How to Add a Map with Multiple Pins to Your Squarespace Site (The Ultimate Guide)<\/h2>\n\n\n\n<p>Displaying multiple locations on your Squarespace website &#8211; whether it&#8217;s store locations, event venues, or project sites &#8211; is a common need for businesses. However, Squarespace&#8217;s built-in map block has a significant limitation: <strong>it only supports one location pin by default<\/strong>. This guide will show you the workaround to add multiple pins and why a specialized tool might be your best solution.<br><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Challenge with Squarespace&#8217;s Native Map Block<\/strong><\/p>\n\n\n\n<p>Let&#8217;s first understand the limitation. When you add a standard Map Block in Squarespace, here&#8217;s what happens:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to your page editor<\/li>\n\n\n\n<li>2. Click &#8220;Add Block&#8221; (+ icon)<\/li>\n\n\n\n<li>3. Search for &#8220;Map&#8221;<\/li>\n\n\n\n<li>4. You&#8217;ll see this interface:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-34-1024x513.png\" alt=\"\" class=\"wp-image-179\" style=\"width:693px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-34-1024x513.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-34-300x150.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-34-768x384.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-34-1536x769.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-34.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As you can see, there&#8217;s only <strong>one address field<\/strong>. This means you can only display a single pin. If you try to add multiple addresses separated by commas or line breaks, it simply won&#8217;t work correctly.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 1: The Code Workaround (Manual HTML\/JavaScript)<\/strong><\/p>\n\n\n\n<p>This is the technical solution that requires custom coding. It involves creating a map externally and embedding it using a Code Block.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Create Your Multi-Pin Map on Google Maps<\/p>\n\n\n\n<p>First, you need to create a custom map outside of Squarespace:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. Go to [Google My Maps](https:\/\/www.google.com\/maps\/d\/)<\/li>\n\n\n\n<li>2. Sign in with your Google account<\/li>\n\n\n\n<li>3. Click &#8220;Create a New Map&#8221;<\/li>\n\n\n\n<li>4. Add your multiple locations using the search bar or manual pin placement:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"420\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-35.png\" alt=\"\" class=\"wp-image-180\" style=\"width:702px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-35.png 1000w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-35-300x126.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-35-768x323.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>5. Click &#8220;Share&#8221; and set the map to &#8220;Public&#8221;<\/li>\n\n\n\n<li>6. Click the three-dot menu \u2192 &#8220;Embed on my site&#8221;<\/li>\n\n\n\n<li>7. Copy the iframe code:<\/li>\n<\/ul>\n\n\n\n<p>html<\/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-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> \n  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/d\/embed?mid=YOUR_MAP_ID&amp;ehbc=2E312F\"<\/span> \n  <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"640\"<\/span> \n  <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"480\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><\/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 class=\"has-text-align-center\">Step 2: Embed the Map in Squarespace<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. In your Squarespace editor, add a <strong>Code Block<\/strong> where you want the map to appear<\/li>\n\n\n\n<li>2. Paste the iframe code<\/li>\n\n\n\n<li>3. Customize the width and height (use `100%` for responsive width):<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">html<\/code><\/span><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"map-container\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> \n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/www.google.com\/maps\/d\/embed?mid=1YOUR_MAP_ID_HERE&amp;ehbc=2E312F\"<\/span> \n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> \n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"500\"<\/span>\n    <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"border:0;\"<\/span>\n    <span class=\"hljs-attr\">allowfullscreen<\/span>=<span class=\"hljs-string\">\"\"<\/span>\n    <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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 class=\"has-text-align-center\">Step 3: Add CSS for Responsive Design (Optional but Recommended)<\/p>\n\n\n\n<p>Add this CSS in **Design \u2192 Custom CSS** to ensure your map is responsive:<br><strong>css<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* Make embedded maps responsive *\/<\/span>\n<span class=\"hljs-selector-class\">.map-container<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: relative;\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n  <span class=\"hljs-attribute\">padding-top<\/span>: <span class=\"hljs-number\">56.25%<\/span>; <span class=\"hljs-comment\">\/* 16:9 Aspect Ratio *\/<\/span>\n}\n\n<span class=\"hljs-selector-class\">.map-container<\/span> <span class=\"hljs-selector-tag\">iframe<\/span> {\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"has-text-align-center\"><strong>The Problems with This Manual Method<\/strong><\/p>\n\n\n\n<p>While this workaround functions, it comes with several challenges:<\/p>\n\n\n\n<p class=\"has-text-align-center\">\u274c Limitations You&#8217;ll Encounter:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Clunky User Experience:<\/strong> Google My Maps isn&#8217;t designed for seamless website integration<\/li>\n\n\n\n<li><strong>2. Limited Customization: <\/strong>Difficult to match your Squarespace site&#8217;s branding<\/li>\n\n\n\n<li><strong>3. Mobile Responsiveness Issues:<\/strong> Requires additional CSS tweaking<\/li>\n\n\n\n<li><strong>4. No Direct Editing: <\/strong>To update locations, you must go back to Google My Maps, update, then re-embed<\/li>\n\n\n\n<li><strong>5. Ugly Default Styling: <\/strong>Google My Maps embeds have a dated look that rarely matches modern Squarespace designs<\/li>\n<\/ul>\n\n\n\n<p><strong>Comparison showing ugly Google My Maps embed vs. clean custom map<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"1024\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-36-1014x1024.png\" alt=\"\" class=\"wp-image-181\" style=\"width:602px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-36-1014x1024.png 1014w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-36-297x300.png 297w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-36-150x150.png 150w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-36-768x775.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-36.png 1270w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>6. Slower Load Times: <\/strong>Iframe embeds can impact your site&#8217;s performance score<br><\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Method 2: The Professional Solution &#8211; Use <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/strong><br><\/p>\n\n\n\n<p>What if you could have a beautiful, fully customizable multi-pin map that integrates seamlessly with Squarespace &#8211; without any coding?<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Why <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> is the Perfect Squarespace Solution<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Squarespace-Native Look:<\/strong> Create maps that perfectly match your site&#8217;s aesthetic<\/li>\n\n\n\n<li><strong>2. No Coding Required: <\/strong>Visual editor lets you add pins with clicks, not code<\/li>\n\n\n\n<li><strong>3. Direct Squarespace Integration:<\/strong> Copy-paste simple embed code just like Method 1, but with better results<\/li>\n<\/ul>\n\n\n\n<p><strong>How to Use MapsFun with Squarespace (2-Minute Setup):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. Create Your Map:<\/strong>\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&#8211; Go to [MapsFun.com](https:\/\/mapsfun.com)<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Click &#8220;Create New Map&#8221;<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Add locations via search or CSV upload<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Customize pins, colors, and styles<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>2. Get Your Embed Code:<\/strong>\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&#8211; Click &#8220;Publish&#8221;<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Copy the clean, optimized embed code<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>3. Add to Squarespace:<\/strong>\n<ul class=\"wp-block-list\">\n<li>&nbsp;&nbsp;&nbsp;&#8211; Add a Code Block to your page<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Paste the MapsFun code<\/li>\n\n\n\n<li>&nbsp;&nbsp;&nbsp;&#8211; Done!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>Benefits Over the Manual Method:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705 <strong>Brand-Aligned Design:<\/strong> Match your Squarespace color scheme exactly&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 <strong>Faster Loading:<\/strong> Optimized code that won&#8217;t slow down your site&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 <strong>Easy Updates:<\/strong> Edit locations directly without re-embedding&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 <strong>Mobile-Perfect:<\/strong> Automatically responsive on all devices&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705<strong> Better UX:<\/strong> Clean interface that doesn&#8217;t look like a Google embed&nbsp;&nbsp;<\/li>\n\n\n\n<li>\u2705 <strong>Advanced Features:<\/strong> Add custom icons, interactive info windows, and directions<\/li>\n<\/ul>\n\n\n\n<p><strong>Quick Comparison: Which Method Should You Choose?<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"330\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-37.png\" alt=\"\" class=\"wp-image-182\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-37.png 764w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-37-300x130.png 300w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<p><strong>Conclusion<\/strong>: Skip the Hassle, Use the Right Tool<\/p>\n\n\n\n<p>While it&#8217;s technically possible to hack together a multi-pin map for Squarespace using Google My Maps and code blocks, the result is often clunky, slow, and doesn&#8217;t match your site&#8217;s professional design.<\/p>\n\n\n\n<p><strong>The simpler, better-looking alternative? <\/strong>Use a tool built specifically for this purpose.<\/p>\n\n\n\n<p><a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> eliminates all the technical hurdles of the manual method. Instead of wrestling with iframe codes, CSS fixes, and Google My Maps&#8217; limited interface, you get:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. A <strong>visual editor<\/strong> that lets you create stunning maps in minutes<\/li>\n\n\n\n<li>2.<strong> One-click embedding<\/strong> into your Squarespace site<\/li>\n\n\n\n<li>3. <strong>Professional results<\/strong> that enhance &#8211; rather than detract from &#8211; your website&#8217;s design<\/li>\n<\/ul>\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>Don&#8217;t compromise on your site&#8217;s aesthetics or user experience with workaround solutions. Create a beautiful, functional multi-location map that truly represents your brand in just a few minutes at <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a>. Perfect for Squarespace users who want professional results without the technical headache.<br><\/p>\n","protected":false},"excerpt":{"rendered":"How to Add a Map with Multiple Pins to Your Squarespace Site (The Ultimate Guide) Displaying multiple locations on your Squarespace website &#8211; whether it&#8217;s store locations, event venues, or project sites &#8211; is a common need for businesses. However, Squarespace&#8217;s built-in map block has a significant limitation: it only supports one location pin by [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,1],"tags":[],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-squarespace-map-with-multiple-pins","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/178","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=178"}],"version-history":[{"count":2,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/178\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}