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.
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>