HubSpot CMS Tutorial

How to Embed a Association Directory Map on HubSpot CMS

Adding clustered member locations and filterable networks to your HubSpot CMS site doesn't require a developer. Follow these 3 simple steps to launch your map today.

Build your Association Directory Map

Log into your MapWeave dashboard and create a new Association Directory Map. Upload your location data, customize your map colors to match your brand, and toggle on any interactive features you need.

Copy the Embed Code

Once your map is ready, click the Publish button in the top right corner. MapWeave generates three ways to share your widget. For HubSpot CMS, we highly recommend using the JavaScript Snippet method.

Recommended for HubSpot CMS

JavaScript Snippet

Best for modern builders and automatic mobile responsiveness.

<div id="mapweave-association-directory" data-client-id="YOUR_WIDGET_ID" style="width: 100%; height: 1000px; border-radius: 12px; overflow: hidden;"></div>
<script src="https://www.getmapwidget.com/widgets/embed-injector.js" async defer></script>
API key note: Standard hosted widgets do not require your own Google Maps API key. Advanced/self-hosted modes may require your own key in your MapWeave configuration settings.

iFrame Embed

Best for strict CMS platforms that block external JavaScript.

<iframe src="https://www.getmapwidget.com/embed/YOUR_WIDGET_ID" width="100%" height="1000px" frameborder="0" allow="geolocation" style="border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"></iframe>

Direct URL Link

Best for sharing in emails, social media, or hyperlink buttons.

https://www.getmapwidget.com/embed/YOUR_WIDGET_ID

Paste into HubSpot CMS

For HubSpot CMS users:
In the HubSpot page editor, drag a "Rich Text" module onto the page. Click "Advanced" > "Source Code" and paste your MapWeave script tag.

Save and publish your HubSpot CMS page. Your interactive map is now live!

Ready to upgrade your HubSpot CMS site?

Build Your Map Now