How to add a listing map view in Webflow

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="listing-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]/listing_map_code.js" type = "text/javascript"></script>

‍