{"id":232,"date":"2025-12-15T11:23:54","date_gmt":"2025-12-15T08:23:54","guid":{"rendered":"https:\/\/mapsfun.com\/?p=232"},"modified":"2025-12-15T11:23:55","modified_gmt":"2025-12-15T08:23:55","slug":"how-to-create-dynamic-cms-maps-in-webflow","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=232","title":{"rendered":"How to Create Dynamic CMS Maps in Webflow"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">The Ultimate Guide to Creating a Dynamic CMS Map in Webflow (The Hard Way)<\/h2>\n\n\n\n<p>Want to display a map on your Webflow site where locations are pulled <strong>dynamically from a CMS collection?<\/strong> Imagine a map that automatically updates when you add new store locations, event venues, or portfolio projects. While powerful, building a true CMS-powered map in Webflow is a complex, code-heavy challenge. This guide walks you through the <strong>only viable\u2014yet technically demanding\u2014method.<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Why Native Webflow Can&#8217;t Do CMS Maps<\/strong><\/p>\n\n\n\n<p>Webflow&#8217;s CMS is excellent for dynamic lists, but it has <strong>no native component for plotting CMS items on a map.<\/strong> The standard Embed element is static. To connect CMS data to an interactive map, you must bridge Webflow&#8217;s front-end with the Google Maps API using custom code<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Architecture of a CMS Map<\/strong><\/p>\n\n\n\n<p>Here\u2019s what you\u2019re building:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 CMS Collection (e.g., &#8220;Locations&#8221;) with <strong>Address, Latitude, and Longitude<\/strong> fields.<\/li>\n\n\n\n<li>2.\u00a0 A map container on your page.<\/li>\n\n\n\n<li>3.\u00a0 Custom JavaScript that:\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Fetches CMS data via Webflow&#8217;s `window.Webflow` API.<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Initializes a Google Map.<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Plots each CMS item as a marker.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Part 1: Setting Up Your CMS Collection<\/p>\n\n\n\n<p>Your collection structure is critical. You need <strong>geographic coordinates.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 Create a collection named <strong>&#8220;Locations.&#8221;<\/strong><\/li>\n\n\n\n<li>2.\u00a0 Add these fields:\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Name (Plain Text)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Address (Plain Text)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Latitude (Number, with decimals)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Longitude (Number, with decimals)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; Description (Multi-Line Text, optional)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Important: <\/strong>You <strong>must manually populate<\/strong> the Latitude and Longitude fields. Use a tool like [LatLong.net](https:\/\/www.latlong.net\/) to convert addresses to coordinates. This is your first major manual hurdle.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Part 2: Get a Google Maps API Key<\/p>\n\n\n\n<p><strong>1.\u00a0 Go to [Google Cloud Console]<\/strong>(<a href=\"https:\/\/console.cloud.google.com\/)\">https:\/\/console.cloud.google.com\/)<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"534\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-52-1024x534.png\" alt=\"\" class=\"wp-image-233\" style=\"width:626px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-52-1024x534.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-52-300x157.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-52-768x401.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-52-1536x802.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-52.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2.\u00a0 Create a project, enable billing, and enable the <strong>&#8220;Maps JavaScript API&#8221;<\/strong> and<strong> &#8220;Geocoding API&#8221;.<\/strong><\/li>\n\n\n\n<li>3.\u00a0 Create and <strong>restrict an API Key<\/strong> to your domain.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">Part 3: The Complex JavaScript Implementation<\/p>\n\n\n\n<p>This is the core of the solution. You&#8217;ll need to add this code to your Webflow project.<\/p>\n\n\n\n<p class=\"has-text-align-center\">Step 1: Add the JavaScript to Webflow<\/p>\n\n\n\n<p>Go to <strong>Project Settings > Custom Code > Footer Code<\/strong>. Paste the following:<\/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-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-comment\">\/\/ Wait for Webflow CMS to load<\/span>\n<span class=\"hljs-built_in\">window<\/span>.Webflow ||= &#91;];\n<span class=\"hljs-built_in\">window<\/span>.Webflow.push(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  \n  <span class=\"hljs-comment\">\/\/ Your Google Maps API Key (REPLACE THIS!)<\/span>\n  <span class=\"hljs-keyword\">const<\/span> apiKey = <span class=\"hljs-string\">'YOUR_GOOGLE_MAPS_API_KEY_HERE'<\/span>;\n  \n  <span class=\"hljs-comment\">\/\/ Load Google Maps API dynamically<\/span>\n  <span class=\"hljs-keyword\">const<\/span> script = <span class=\"hljs-built_in\">document<\/span>.createElement(<span class=\"hljs-string\">'script'<\/span>);\n  script.src = <span class=\"hljs-string\">`https:\/\/maps.googleapis.com\/maps\/api\/js?key=<span class=\"hljs-subst\">${apiKey}<\/span>&amp;callback=initCmsMap`<\/span>;\n  script.async = <span class=\"hljs-literal\">true<\/span>;\n  <span class=\"hljs-built_in\">document<\/span>.head.appendChild(script);\n});\n\n<span class=\"hljs-comment\">\/\/ Main map initialization function<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initCmsMap<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-comment\">\/\/ Get all CMS items<\/span>\n  <span class=\"hljs-keyword\">const<\/span> cmsItems = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">'&#91;data-location-item]'<\/span>);\n  \n  <span class=\"hljs-keyword\">if<\/span> (cmsItems.length === <span class=\"hljs-number\">0<\/span>) {\n    <span class=\"hljs-built_in\">console<\/span>.error(<span class=\"hljs-string\">'No CMS items found'<\/span>);\n    <span class=\"hljs-keyword\">return<\/span>;\n  }\n  \n  <span class=\"hljs-comment\">\/\/ Parse CMS data into an array<\/span>\n  <span class=\"hljs-keyword\">const<\/span> locations = &#91;];\n  cmsItems.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">item<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> name = item.querySelector(<span class=\"hljs-string\">'&#91;data-location-name]'<\/span>).textContent;\n    <span class=\"hljs-keyword\">const<\/span> lat = <span class=\"hljs-built_in\">parseFloat<\/span>(item.querySelector(<span class=\"hljs-string\">'&#91;data-location-lat]'<\/span>).textContent);\n    <span class=\"hljs-keyword\">const<\/span> lng = <span class=\"hljs-built_in\">parseFloat<\/span>(item.querySelector(<span class=\"hljs-string\">'&#91;data-location-lng]'<\/span>).textContent);\n    <span class=\"hljs-keyword\">const<\/span> address = item.querySelector(<span class=\"hljs-string\">'&#91;data-location-address]'<\/span>).textContent;\n    \n    <span class=\"hljs-keyword\">if<\/span> (!<span class=\"hljs-built_in\">isNaN<\/span>(lat) &amp;&amp; !<span class=\"hljs-built_in\">isNaN<\/span>(lng)) {\n      locations.push({\n        <span class=\"hljs-attr\">position<\/span>: { lat, lng },\n        <span class=\"hljs-attr\">title<\/span>: name,\n        <span class=\"hljs-attr\">address<\/span>: address\n      });\n    }\n  });\n  \n  <span class=\"hljs-keyword\">if<\/span> (locations.length === <span class=\"hljs-number\">0<\/span>) <span class=\"hljs-keyword\">return<\/span>;\n  \n  <span class=\"hljs-comment\">\/\/ Calculate map center (average of all coordinates)<\/span>\n  <span class=\"hljs-keyword\">const<\/span> avgLat = locations.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">sum, loc<\/span>) =&gt;<\/span> sum + loc.position.lat, <span class=\"hljs-number\">0<\/span>) \/ locations.length;\n  <span class=\"hljs-keyword\">const<\/span> avgLng = locations.reduce(<span class=\"hljs-function\">(<span class=\"hljs-params\">sum, loc<\/span>) =&gt;<\/span> sum + loc.position.lng, <span class=\"hljs-number\">0<\/span>) \/ locations.length;\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\">'cms-map-container'<\/span>), {\n    <span class=\"hljs-attr\">zoom<\/span>: locations.length === <span class=\"hljs-number\">1<\/span> ? <span class=\"hljs-number\">12<\/span> : <span class=\"hljs-number\">10<\/span>,\n    <span class=\"hljs-attr\">center<\/span>: { <span class=\"hljs-attr\">lat<\/span>: avgLat, <span class=\"hljs-attr\">lng<\/span>: avgLng },\n    <span class=\"hljs-attr\">styles<\/span>: &#91;\n      {\n        <span class=\"hljs-string\">\"featureType\"<\/span>: <span class=\"hljs-string\">\"all\"<\/span>,\n        <span class=\"hljs-string\">\"elementType\"<\/span>: <span class=\"hljs-string\">\"labels.text.fill\"<\/span>,\n        <span class=\"hljs-string\">\"stylers\"<\/span>: &#91;{ <span class=\"hljs-string\">\"color\"<\/span>: <span class=\"hljs-string\">\"#7c7c7c\"<\/span> }]\n      }\n    ]\n  });\n  \n  <span class=\"hljs-comment\">\/\/ Add markers for each location<\/span>\n  locations.forEach(<span class=\"hljs-function\"><span class=\"hljs-params\">location<\/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>: location.position,\n      <span class=\"hljs-attr\">map<\/span>: map,\n      <span class=\"hljs-attr\">title<\/span>: location.title\n    });\n    \n    <span class=\"hljs-comment\">\/\/ Info window with CMS data<\/span>\n    <span class=\"hljs-keyword\">const<\/span> infoWindow = <span class=\"hljs-keyword\">new<\/span> google.maps.InfoWindow({\n      <span class=\"hljs-attr\">content<\/span>: <span class=\"hljs-string\">`\n        &lt;div style=\"padding: 12px; max-width: 200px;\"&gt;\n          &lt;h3 style=\"margin: 0 0 8px 0; color: #333;\"&gt;<span class=\"hljs-subst\">${location.title}<\/span>&lt;\/h3&gt;\n          &lt;p style=\"margin: 0; color: #666; font-size: 14px;\"&gt;<span class=\"hljs-subst\">${location.address}<\/span>&lt;\/p&gt;\n        &lt;\/div&gt;\n      `<\/span>\n    });\n    \n    marker.addListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n      infoWindow.open(map, marker);\n    });\n  });\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/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 class=\"has-text-align-center\">Step 2: Set Up Your Webflow Page<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1.\u00a0 Add a <strong>Collection List<\/strong> to your page.<\/li>\n\n\n\n<li>2.\u00a0 Wrap the list items in a div with display: none (we only need the data, not the visual list).<\/li>\n\n\n\n<li>3.\u00a0 Add <strong>Custom Attributes<\/strong> to elements inside each list item:\n<ul class=\"wp-block-list\">\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; data-location-item (on the list item wrapper)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; data-location-name (on element showing the Name field)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; data-location-lat (on a hidden element with the Latitude)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; data-location-lng (on a hidden element with the Longitude)<\/li>\n\n\n\n<li>\u00a0\u00a0\u00a0\u00a0&#8211; data-location-address (on element showing the Address)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>4.\u00a0 Add an empty<strong> div<\/strong> with ID cms-map-container where the map will render.<\/li>\n<\/ul>\n\n\n\n<p><strong>The Webflow Designer view showing hidden CMS items with data attributes and the visible map container.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-53-1024x538.png\" alt=\"\" class=\"wp-image-234\" style=\"width:771px;height:auto\" srcset=\"https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-53-1024x538.png 1024w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-53-300x158.png 300w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-53-768x404.png 768w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-53-1536x807.png 1536w, https:\/\/mapsfun.com\/wp-content\/uploads\/2025\/12\/image-53.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Step 3: Add CSS Styling<\/p>\n\n\n\n<p>In <strong>Project Settings > Custom Code > Head Code<\/strong>, add:<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\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\">style<\/span>&gt;<\/span><span class=\"css\">\n<span class=\"hljs-selector-id\">#cms-map-container<\/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\">600px<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">12px<\/span>;\n  <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">40px<\/span> <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Hide the CMS list visually but keep it accessible to JavaScript *\/<\/span>\n<span class=\"hljs-selector-class\">.cms-list-wrapper<\/span> {\n  <span class=\"hljs-attribute\">display<\/span>: none <span class=\"hljs-meta\">!important<\/span>;\n  <span class=\"hljs-attribute\">visibility<\/span>: hidden;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">overflow<\/span>: hidden;\n}\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/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\"><strong>The Five Major Pain Points of This Approach<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Manual Coordinate Entry:<\/strong> You must find and input Lat\/Long for every CMS item.<\/li>\n\n\n\n<li><strong>2.\u00a0 API Key Management<\/strong>: Exposing your key in Custom Code is a security risk.<\/li>\n\n\n\n<li><strong>3.\u00a0 Code Fragility:<\/strong> Any change to CMS structure breaks the map.<\/li>\n\n\n\n<li><strong>4.\u00a0 No Geocoding:<\/strong> Addresses don&#8217;t automatically convert to coordinates.<\/li>\n\n\n\n<li><strong>5.\u00a0 Performance Issues:<\/strong> The map loads only after all Webflow and CMS scripts load.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong>The Webflow Designer&#8217;s Nightmare Visualization<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">&#91;Your CMS Collection]\n       \u2193 (Manual Lat\/Long entry)\n&#91;Webflow CMS API]\n       \u2193 (Custom JavaScript Bridge)\n&#91;Google Maps API]\n       \u2193 (Complex Data Binding)\n&#91;Rendered <span class=\"hljs-built_in\">Map<\/span> on Page]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Each arrow represents a potential point of failure requiring debugging.<\/strong><\/p>\n\n\n\n<p>There&#8217;s a Better Way: Dynamic CMS Maps with <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a><\/p>\n\n\n\n<p>What if you could create a CMS-powered map <strong>without a single line of code, API keys, or manual coordinate entry?<\/strong><\/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> offers native Webflow CMS integration with a visual, no-code approach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1.\u00a0 Automatic Geocoding:<\/strong> Simply connect your &#8220;Locations&#8221; collection\u2014MapsFun automatically converts addresses to coordinates.<\/li>\n\n\n\n<li><strong>2.\u00a0 Visual Editor:<\/strong> Style your map, customize pins, and design info windows in a drag-and-drop interface.<\/li>\n\n\n\n<li><strong>3.\u00a0 Real-time Sync:<\/strong> Add or edit locations in your Webflow CMS, and the map updates automatically.<\/li>\n\n\n\n<li><strong>4.\u00a0 One-click Embed:<\/strong> Get a simple embed code that works perfectly with Webflow&#8217;s native components.<\/li>\n\n\n\n<li><strong>5.\u00a0 Advanced Features: <\/strong>Clustering for many pins, custom map styles, and interactive filters.<\/li>\n<\/ul>\n\n\n\n<p>Stop spending hours debugging custom code and manually entering coordinates. Create a stunning, dynamic CMS map that automatically syncs with your Webflow collection in minutes. Try <a href=\"http:\/\/mapsfun.com\">MapsFun.com<\/a> today\u2014the only tool built specifically for Webflow designers who need powerful maps without the complexity.<\/p>\n","protected":false},"excerpt":{"rendered":"The Ultimate Guide to Creating a Dynamic CMS Map in Webflow (The Hard Way) Want to display a map on your Webflow site where locations are pulled dynamically from a CMS collection? Imagine a map that automatically updates when you add new store locations, event venues, or portfolio projects. While powerful, building a true CMS-powered [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,1],"tags":[],"class_list":["post-232","post","type-post","status-publish","format-standard","hentry","category-webflow-cms-map","category-1"],"_links":{"self":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/232","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=232"}],"version-history":[{"count":1,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/232\/revisions"}],"predecessor-version":[{"id":235,"href":"https:\/\/mapsfun.com\/index.php?rest_route=\/wp\/v2\/posts\/232\/revisions\/235"}],"wp:attachment":[{"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mapsfun.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}