Infowindow style is not good at all.

[nsodha]

Hi ,
I have just installed your plug in and started my store locator map. When I click o any marker, the info window that opens up looks awful. It covers the entire height of the map and half the width and is all black with white text. Whys is that? See attachment

Attachments:

You must be logged in to view attached files.

[AbelC]

Hi There,

Thank you so much for getting in touch with us, and our sincere apologies for the inconvenience.

Could I kindly ask if you could please provide us with a link to your map page?

We will then be able to take a closer look at what is causing this issue and advise further.

With that said, you will be able to change the InfoWindow width by navigating to Maps -> Settings -> InfoWindows -> Scroll down to “Max InfoWindow Width” -> Please set your preferred width.

Again, we do apologize for the inconvenience.

I look forward to hearing back from you, and resolving this issue ASAP.

Kind Regards,
Abel

[nsodha]

Hi,

My page link is netlytix.com/map
I tried setting the width as you suggested but the infowindw still hosws up same height and width and is all black in color.
Thanks
Naval

[AbelC]

Hi Naval,

Thank you so much for getting back to me.

It appears that this could be due to 3rd party plugin or theme conflict.

Could I kindly ask if you could please confirm your preferred text and background color?

Could you also please confirm your preferred InfoWindow size?

I will then be able to prepare the custom CSS needed to achieve this.

I look forward to hearing back from you and assisting you further.

Kind Regards,
Abel

[nsodha]

Hi Abel,

The preferred background for the info window is white.
The text is Arial with font size of 12. Perhaps you can tell me where you set the values and I can change them later.
I am not sure about the size of the window but if you can check this out (https://www.knightspharmacy.co.uk/stores.php) you can see the window size I need.
Also will you be able to tell me where I can change the look and feel of some of the filter buttons etc, since right now it is plain HTML only.
Thanks/Naval

[AbelC]

Hi Naval,

Thank you for getting back to me.

Could I kindly ask if you could please navigate to Maps -> Edit -> Advanced Settings -> Scroll down to “Infowindow Style” -> Please enter the following in the “Infowindow Colors” block:
Primary Color – FFFFFF
Accent Color – FFFFFF
Text Color – 133A25

Could you also please navigate to Maps -> Settings -> Advanced -> Custom CSS -> Please paste the following CSS to change the height and width of the InfoWindow and correct the styling issues:

#wpgmza_iw_holder_2{
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  height: 200px !important;
  max-height: 300px !important;
}

#wpgmza_iw_holder_2 .wpgmza_iw_image{
  height: 100px !important;
  width: 100% !important;
}

#wpgmza_iw_holder_2 .wpgmza_iw_address{
  width: 100% !important;
  left: 0 !important;
  text-align: center !important;
}

#wpgmza_iw_holder_2 .wpgmza_iw_description{
  width: 100% !important;
  left: 0 !important;
  text-align: center !important;
}

#wpgmza_iw_holder_2 .wpgmza_iw_title{
  width: 100% !important;
  left: 0 !important;
  text-align: center !important;
}

#wpgmza_iw_holder_2 .wpgmza_iw_buttons{
  width: 90% !important;
  left: 0 !important;
  text-align: center !important;
  margin: auto !important;
}

Please do let me know if you are happy with the changed made so far?

– Also will you be able to tell me where I can change the look and feel of some of the filter buttons etc, since right now it is plain HTML only

Unfortunately, it is only supported to change the button styles using Custom CSS at the moment.

With that said, could you please confirm your preferred look and feel of the buttons as we should then be able to prepare Custom CSS code to achieve this?

I look forward to hearing back from you.

Kind Regards,
Abel

[nsodha]

Hi Abel,

That worked.
However I have a couple of questions:
1.With the change you suggested in CSS, does that mean my info windows will always be a fixed size and format?
2. Also the page I am trying to emulate is this: https://www.knightspharmacy.co.uk/stores.php. As you can see,the infowindows on this map move to just above where the marker is. Is that possible in your product?
3. See attached what happens when I have a header (Knights Arcade Pharmacy) and the text describing the location (This is a test ….). There is overlapping on the page. Is it possible to fix that?

Attachments:

You must be logged in to view attached files.

[AbelC]

Hi There,

Thank you so much for letting me know, and that is great to hear.

Please find my response below:

1. The custom CSS provided should only set a fix width and height to the InfoWindow on Map ID 2.

2. Yes, this is supported with our Default InfoWindow Style by navigating to Maps -> Edit -> Advanced -> InfoWindow Style -> Please select the “Default InfoWindow” style.

Please note that we do recommend that you remove the Custom CSS provided as this should only work for the Modern InfoWindow style.

Please also note that you can add a marker listing in the map by using the Modern Marker Listing style (Maps -> Edit -> Marker Listing Options -> Scroll down to “Marker Listing Style”.

Please see our demo here -> https://www.wpgmaps.com/demo/map-with-marker-listing-modern/

3. Could I kindly ask kindly ask if you could please add the following custom CSS below to correct this issue:

#wpgmza_iw_holder_2 .wpgmza_iw_title{
  position: absolute !important;
      height: fit-content !important;
    padding: 0 !important;
}

#wpgmza_iw_holder_2 .wpgmza_iw_address{
      margin-top: 10px !important;
}

I hope this helps clarify, and I look forward to hearing back from you.

Kind Regards,
Abel

[nsodha]

Thank you so much for your fast responses!!
Take a look at the attachment. Why is it that in my info window the image is at the top and the title and the address is at the bottom?

In the example you gave me(https://www.wpgmaps.com/demo/map-with-marker-listing-modern/), the infowindow is reversed.

Thanks/Naval

[nsodha]

Abel,
Sorry cannot attach file because it is too large. But go to netlytix.com/map and you will see what I mean
Naval

[AbelC]

Hi There,

Thank you for letting me know.

Could I kindly ask if you could please add the following Custom CSS below to correct this:

.wpgmza-popout-panel.wpgmza-modern-marker-listing-marker-view.wpgmza-open [data-name="title"]{
      position: absolute;
    height: fit-content;
    width: 100%;
    margin-top: 20px;
}

.wpgmza-popout-panel.wpgmza-modern-marker-listing-marker-view.wpgmza-open [data-name="address"]{
   height: fit-content;
    width: 100%;
    margin-top: 50px;
}

.wpgmza-popout-panel.wpgmza-modern-marker-listing-marker-view.wpgmza-open [data-name="description"] img{
    position: absolute;
    margin-top: 120px;
}

Please do let me know if you are happy with the changes made so far?

I look forward to hearing back from you.

Kind Regards,
Abel

[nsodha]

Great Job, Abel.

Looking better now.
One issue I have noticed that the icons on the top corners of the info windows ( for directions etc) do not render properly on Firefox or IE, but work fine on Chrome.

What size image shall I add to the info-window. Can you recommend a size?
Thanks/Naval

[AbelC]

Hi Naval,

Thank you for letting me know, and that is great to hear.

1. Could I kindly ask if you could please send a screenshot of the issue you are currently experiencing to [email protected]

I will then be able to advise further.

2. We do not have a recommend size for the images in the InfoWindow, however, 200x200px should display as intended in the InfoWindow.

I look forward to hearing back from you.

Kind Regards,
Abel

[Author]

Posts