is it possible to change map widget style at “Custom Code”? coz i don’t want to make the page too complicated with lots of html embedded
Anyone knows? I’m having trouble of the custom map style.
So, no, the map widget is to be used as is. But it’s failry simple to use a HTML wiget to put a custom gmap inside. It will even preview in the designer so you don’t feel like you’re dealing with custom code. just try it.
I went through this a while ago and would recommend this: http://www.mapstylr.com/
It’s not as easy to implement as the default widget, but I think it gives a good result. This is a page I built in webflow with it: Contact Intradiem Contact Center RPA | Contact Us
You do have to embed custom code, but I’m not sure you’ll be able to find a solution that doesn’t require that. I have used it by pasting all of the code in the body, or you can also create a hosted js file and add a one line script to reference it for the styling. I had to do the latter in order to get the two maps to display on the same page in the example above.
1 Like
I know this could come across as total jerkish, so I’m prefacing this feedback as attempting to be helpful!
The maps on the intradiem.com site could be implemented in a more user friendly way. Currently there’s no way to scroll down the page without getting stuck in the maps. Scrolling gets interrupted by the map zoom function.
From a user experience perspective, this is not the greatest. Disabling scrolling zoom would be a quick fix.
@gksargent I usually put a map inside of a relative positioned div then cover it with an absolute positioned link block over the map (100% width/height and higher z-index than the map and a link to google maps for the directions).
Like I did with @MinewireNetwork here: chicagocheesesteak.webflow.io
That solves the UX issue at least. 
2 Likes
Great idea on that @Waldo! Thanks for sharing.
What is the admin subdomain on that site?
Haha, I appreciate the bluntness. And actually, we’re currently undergoing a total redesign of our site, because of numerous instances of bad ux and bloated code. (It was my first site built using webflow, and was done in a few weeks. cringe)
I actually did a similar implementation as what @Waldo suggested on a earlier version of the site, but had a hover event remove the map overlay after 1500ms. It worked okay on desktop, but on mobile we still had the overlay. I erred on the side of functionality and removed it from desktop and mobile completely, but now we have the wonky experience that you found.
I’m sorry @gksargent are you referring to the read-only link on the chicagocheesesteak.webflow.io site? Here is the read-only link to view it in the Webflow designer 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.