search

impress-org / google-maps-builder

One Google Maps plugin to rule them all. Google Maps Builder is intuitive, sleek, powerful and easy to use. Forget the rest, use the best.
https://wordpress.org/plugins/google-maps-builder/
32 stars 9 forks source link

Info bubble not expanding #166

Closed mathetos closed 8 years ago

mathetos commented 8 years ago

@mathetos commented on Mon Apr 11 2016

See here: http://mapsbuilder.wordimpress.com/demo/marker-icons-flexibility/

mapsbuilderpro-infobubble-not-expanding

DevinWalker commented 8 years ago

Related: https://github.com/WordImpress/Google-Maps-Builder/issues/166

lchski commented 8 years ago

The problem stems from the InfoBubble library, and how it computes the size of the info bubble. Leaving out the long story, the sizing function tests against a temporary element which doesn’t compute the CSS that’s applied to the info bubble’s content. This means the calculated optimal size of the bubble is incorrect.

I don’t see a practical way to fix this with CSS. The info bubbles are too dynamic to accurately solve for the problem with CSS. There might be a way to tackle it with JS run after the info bubbles are created, but I haven’t figured that out.

I have figured out a way to do it by modifying the InfoBubble library itself. By modifying one of the functions used to calculate the height of the bubble, I managed to fix the issue noted in https://github.com/WordImpress/Maps-Builder-Pro/issues/86. I haven’t been able to test against the specific problems of unnecessary scrollbars, but I will with the demo site archive.

The library doesn’t seem very active (lots of unresolved issues and PRs), so the risk of us modifying our own copy is, to me, low. I can also do my best to make sure I modify it in a safe way (extending the original plugin instead of just changing the code therein), so that we can update in the future if a new version ever comes out.

DevinWalker commented 8 years ago

@lchski thanks for the thorough investigation into the underlying issue. I chose to use the infobubble library is being used because I thought it provided easier customization and animations than the built in capabilities of Google Maps' info "window", I believe as they call it.

On the backend we are not using the this library and I'm not opposed to removing it's usage from the frontend if it means we can have a more consistent look and feel from map creation in the backend to the frontend and provide more reliable info bubble sizes (no scrollbars unless content exceeds x number of pixels).

Do you think it would be better to strip out it's usage or move forward with the library and customize it's core? I know it's not very actively developed so I'm leaning towards removal since if it's end of life is on the horizon we most likely will have to do it anyways.

lchski commented 8 years ago

I thought it was odd that there was a different library being used on the front-end and back-end, and I'm all for greater consistency in the design: I say we strip out the InfoBubble library and adopt whatever we're using on the back-end. There might be some concessions to make in that case (like lack of customization, or animation), but I haven't looked closely enough at the back-end marker system to be able to say yet.

DevinWalker commented 8 years ago

Let do it @lchski - the consistency will be good

lchski commented 8 years ago

Put together PRs in core and pro to address this; not sure we lose much if any configurability in making this change. The window itself doesn’t animate in when clicked, and it looks a bit different (padding, basically), but it seems a more or less equivalent setup.

DevinWalker commented 8 years ago

I'm seeing multiple issues on the frontend still - it looks like the CSS isn't applying to the swapped out infowindow from https://github.com/WordImpress/maps-builder-core/pull/41

DevinWalker commented 8 years ago

Here are two examples where I see some issues.

1) Google Places Search result: issue2

2) The mashup infowindow expanded - as well, the content can be seen for a split second when you click on the marker and the content is loading issue1

lchski commented 8 years ago

I’ll look into it!

lchski commented 8 years ago

The Google Places search result is fixed. I had missed its call to InfoBubble; I checked the code and it looks like I’ve now replaced all calls to it with ones to google.maps.InfoWindow.

With the odd styling in the second issue, it looks like the .gmb-infobubble class isn’t wrapping the content. I’d modified the PHP callback for the AJAX request to insert it, so I’m not sure why it wasn’t working for you. Regardless, I committed a change to always add it via JS. This is how that same marker looks for me, using the latest code in the Maps-Builder-Pro/166-info-bubble-replacement branch:

screen shot 2016-08-02 at 8 44 18 am

It does still have uneven spacing on the right-hand side; this has to do, I believe, with how the InfoWindow handles widths. This is internal to Google’s code—we might try some CSS hacks on their classes/HTML structure to wrangle it around, but that could have unforeseeable side effects.

As for the flash of content... I think it has to do with Google Maps’s approach to setting the content, where it applies the content first and then grows the window to fit. This again is something internal to Google’s code, though I’m not sure we can address this one.

mathetos commented 8 years ago

After chatting with @DevinWalker , I'm closing this issue out. The work done so far completes this issue. But it raised some other issues. I'll review the progress and create new issues about any of the new items.

DevinWalker commented 8 years ago

@mathetos I created a new issue here #214 regarding the look and feel of the info window