Can someone help me with customizing a map marker in Webflow that is embedded and styled with Snazzy? I've searched the Webflow community but haven't found any answers yet.

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Customizing a Map Marker with Snazzy in Webflow

If you want to customize a map marker in Webflow using Snazzy, here's a step-by-step guide to help you achieve that:

Embedding the map marker:

In Webflow, go to the page where you want to add the map marker.
Drag and drop the Embed element from the Add Panel onto the canvas.
Open the Snazzy Maps website (https://snazzymaps.com/) in a new tab.
Search for the desired map style and navigate to its page.
Click on the "Copy" button next to the JavaScript code.
Go back to the Webflow Designer and paste the JavaScript code inside the Embed element.
Save and publish your site so that the map marker appears on the live site.

Styling the map marker:

Open the Snazzy Maps website and navigate to the desired map style page.
Scroll down until you find the "Customize and preview" section.
Use the available controls to customize the map marker's appearance.
You can customize various aspects, such as color, size, and shape.
As you make changes, the map marker preview will update accordingly.
Once you're satisfied with the customization, click on the "Copy" button next to the JavaScript code.

Applying the custom styles in Webflow:

Go back to the Webflow Designer and locate the Embed element that contains the map marker code.
Click inside the Embed element to open its settings.
Navigate to the "Before " tab.
Delete the previous JavaScript code if any and paste the copied JavaScript code from Snazzy Maps.
Save and publish your site.

By following these steps, you should be able to embed and style a map marker using Snazzy in Webflow. Remember to preview your changes in both the Designer and published site to ensure everything looks as expected. Good luck!

Additional Questions:

How can I add a map to my Webflow site?
What are some other map styling options similar to Snazzy Maps?
Can I add multiple map markers using Snazzy Maps in Webflow?

How can I add a conditional rel="canonical" link in the HTML head section of my Webflow blog posts template based on the value of a Plain Text field called 'Canonical URL' in the 'Blog Posts' collection?

How can I add a "scroll-to-top" option using Swup.js in my Webflow project?

How can I troubleshoot issues with getting Font Awesome to work on my Webflow site?

In Webflow, why am I getting a 404 error and a URL change when trying to redirect "mydomain.com/gardens.htm" to a page called "/contact"? Can I use a page name like "contact" instead of "contact.htm"?

How can I further customize Webflow search results to have a layout like the card format seen in the example?

Are there any known issues with the sorting functionality in Webflow's Designer when using Masonry.js on a CMS collection?

What is the issue with the modal pop-up duplicating in the background of every section where the cta-button is placed on the Webflow website?

Is there a solution to fix the issue with the apostrophe being replaced by a symbol in an embed field in Webflow?

Is there a solution in Webflow that allows for the creation of an overlay window that pops up on any page the user enters and only appears once per session?

What are the two consistent issues the user is experiencing with the mobile version of their site that only occur after exporting the code to their hosting provider?