How to add a user map view in Webflow

Learn how to add a map view of user profiles in Webflow that draws from user accounts in your Tangram marketplace.

Paris Mielke

March 31, 2023

March 31, 2023
~1 min

To add a Tangram-powered user map view in your Webflow project, follow the steps below:

1) Connect the default fields (latitude, longitude, display_name, about, and avatar) to the page in Tangram that corresponds with the page you are adding the map to in Webflow
2) Paste an HTML block in your Webflow page where you want the map to render
3) Add the following code snippets to the HTML block with a specified height/width for the user_map div and your own Google Maps API key.

<div style="border:0; width: 100%; height: 1000px;" id="user-map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=[INSERT YOUR GOOGLE MAPS API KEY HERE]&callback=drawMap&libraries=places&v=weekly" async defer></script>

<script src = "https://[yoursubdomain]/pages/[your page id]/map_code.js" type = "text/javascript"></script>

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
No items found.
No items found.
No items found.