How to add a listing map view in Webflow

Learn how to add a listing map view in Webflow that draws from listings in your Tangram account.

Paris Mielke

April 5, 2023

April 4, 2023
~ 2 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="listing-map"></div>

<script src="[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>

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