[Resolved] Problems with Google Maps popup infowindows

[Author]

Posts

[daveG-7]

I have two issues, both involving the infowindows that pop up when you click a marker in Google Maps (this map shows the results of a search).

First, I'm trying to put a specific border around the whole popup window. It doesn't seem to be given its own class, though the content within it is, so I called with with div[style*="cursor: default"] in the code below. That got a border close to where it was supposed to go, but seemingly off a few pixels to the top and left, so that the border on the bottom and right is covered up by the window and not shown. You can see the issues by clicking on the marker returned by the following search (only this marker type has a popup window so far): hidden link

    #js-wpv-addon-maps-render-map-5  div[style*="cursor: default"]  {
border: 2px solid black;
    }
    

Second, I'm trying to display an image that comes from a repeating image field in the popup window. I'm using the following code, which displays the image fine outside the window, but returns <img src=""> or src unknown in the window.

 <img src="[wpv-for-each field="wpcf-ftf-land-pictures-of-property" end="1"][types field='ftf-land-pictures-of-property' width='140' url='true' resize='proportional'][/types][/wpv-for-each]">

[daveG-7]

Actually, I got the repeating images (part two of my question) working now. The code I had there actually worked, I had just been trying it wrong.

The first question, about the border, I still need help with. Thank you.

[Luo Yang]

Hello,

You can modify your CSS codes as below, and test again:

    #js-wpv-addon-maps-render-map-5  div[style*="cursor: default"]  {
border: 2px solid black;
overflow: hidden;
    }

See screenshot overflow.JPG

More help:
hidden link

[daveG-7]

That made the border look perfect, and I should have thought to try it. However, as you can see in your screenshot, it also gets rid of the little arrow at the bottom of the popup window that connects it with its marker. Any thought on how to have both? Without my added border, the whole popup window appears to have a thin gray border, but I can't find how this is achieved or how to modify the style of it.

Thanks.

[Luo Yang]

Here is my thought:
You can setup a fix height for inner DIV tag, for example:

div.map_popup div.wpb_wrapper{
height: 160px;
}

See screenshot overflow3.JPG

[daveG-7]

That doesn't seem to solve the issue - there is still a gap between the infowindow and the marker, where the arrow going down to the infowindow connecting it to the marker used to be. This is the result of the overflow: hidden on that surrounding div, which is also what makes the border work. I think the real issue is that Google maps infowindows don't allow much customization - unless you have any other ideas, I'm ready to say this can't be done and move on.

Thanks for your help.

[Luo Yang]

Yes, I agree: Google maps infowindows don't allow much customization.

Since it is a custom CSS codes problem, you can also check it with our experienced contractors:
https://toolset.com/contractors/

[daveG-7]

Thanks. I didn't manage to do exactly what I wanted with the infowindow, but found a compromise that I think will work.