Streaming live at 10am (PST)

Using map widget with custom map style


#1

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


#2

Anyone knows? I'm having trouble of the custom map style.


#3

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.


#4

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: http://www.intradiem.com/contact.html

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.


#5

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.


#6

@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. :smile:


#7

Great idea on that @Waldo! Thanks for sharing. :smile:

What is the admin subdomain on that site?


#8

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.


#9

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 :smile:


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.