Customization of Marker Info Window – different questions

[DK791002]

Hello,

I read the documentation and searched in the forum but I did not find a suitable answer to the following questions:

– How do I change the font size of the marker info window e.g. for the field “description”?
– How can I make the address clickable, so linked to the corresponding address in OpenStreetMaps?
– I know how to add custom fields in the “add marker” screen, however how can I sort them in between the already existing fields?

Thanks in advance to everyone!

[AbelC]

Hi There,

Thank you so much for getting in touch with us.

Please find my response below:

1. This can be achieved with Custom CSS. Could I kindly ask if you could please provide us with a link to your map page as this will allow me to prepare the custom CSS needed to achieve this? Could you also please confirm the preferred font size?

2. Could I kindly ask if you could please clarify a bit more of what you would like to achieve? Would it also perhaps be possible to please provide us with a screenshot?

I will then be able to advise further.

3.Would I be correct if I say that you would like to change the Custom Fields order in Maps -> Custom Fields?

If so, could you please navigate to Maps -> Custom Fields -> Please drag the Custom Field in the correct order by dragging the bars icon in the “Order” column.

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

Kind Regards,
Abel

[DK791002]

Hello,

thanks for your quick answer.

1.) This is the link to the map page: http://womo-dinner.de/karte/ – preferred font size for Decscription is just 1 oder 2 px bigger (don’t know the current font size, sorry)

2.) I will not provide a screenshot as it is personal data, but when you klick on one of the markers on the map above, you’ll see the addresses of restaurants. Those are just written down in the marker info window but not clickable to e.g. open a new window in google maps with that address or when opened on a mobile to open a navigation app

3.) No what I mean is that if I created custom fields they are at the end of the marker info. But I would like to bring them in between the already existing standard fields, is that possible?

4.) And another question referring to question no. 2. Would it also be possible to make phone number and e-mail address clickable, so linked? You’ll find them both in the marker info window on the map as well.

Many thanks!

[DK791002]

Hi,

quick update:

Found out about No. 2 and 4.

So we stay still open with:

1.) This is the link to the map page: http://womo-dinner.de/karte/ – preferred font size for Decscription is just 1 oder 2 px bigger (don’t know the current font size, sorry)

3.) No what I mean is that if I created custom fields they are at the end of the marker info. But I would like to bring them in between the already existing standard fields, is that possible?

Any ideas?

Many thanks!

[AbelC]

Hi There,

Thank you so much for letting me know.

1. Could I kindly ask if you could please navigate to Maps -> Settings -> Advanced -> Custom CSS -> Please paste the following code below:

/* InfoWindow Title */
.wpgmza-infowindow .wpgmza_infowindow_title{
  font-size: 16px;
}

/* InfoWindow Description */
.wpgmza-infowindow .wpgmza_infowindow_description{
  font-size: 16px;
}

This should now increase the InfoWindow Title and Description font size.

3. This could be achieved with Custom JS.

Could I kindly ask if you could please confirm the marker ID and the preferred order of the text to be displayed in the InfoWindow as this will allow me to prepare the Custom JS needed to achieve this?

I look forward to hearing back from you.

Kind Regards,
Abel

[DK791002]

Many, many thanks.

1.) That worked out, thanks.
One additional question regarding the info window:
I know, it is possible to have different views for different devices. So I would like to have a different size of the info window for desktops and for mobiles.

Is it possible to have the info box like it is now for mobiles but to re-size it to 300px*300px being with a scrollbar within the info window to have the size reduced?

What would be the css coding to do so?

3.) Actually the current categories I am mentioning in the description would be the ones I would create as custom fields.

So if you look for example at marker 29, I would create custom fields for:

Adresse

Kontakt

Nur zur Abholung

Öffnungszeiten

Anmeldung erforderlich

Kommentar des Restaurants

Website

They would have to be in the order I wrote above.

Many thanks in advance.

[AbelC]

Hi There,

Thank you so much for getting back to me.

Please find my response below:

1. Could I kindly ask if you could please paste the following Custom CSS below:

@media only screen and (max-width: 600px) {
.wpgmza-infowindow.ol-info-window-container{
  width: 300px;
  height: 300px;;
  max-width: 300px;
    max-height: 300px;
}

.wpgmza_infowindow_description{
overflow: overlay;
    max-height: 240px;
}
}

This should now change the InfoWindow width to 300×300 on mobile devices.

3. Could I kindly ask if you could please confirm if you have created these custom fields by navigating to Maps -> Custom Fields? I do apologize for the back and forth on this one.

I look forward to hearing back from you.

Kind Regards,
Abel

[DK791002]

Hi,

thanks from my side for your feedback!!

1.) This did work, but I wanted it to be the other way around, most likely my description was misleading.
This is how it should be: When displayed on desktop screen it should be limited to 300px and scrollable and on mobile it should be like it is now.

I tried the following, but this leads to the issue in the picture attached, when a picture is uploaded to the marker.

@media (min-width: 600px) {
.wpgmza-infowindow.ol-info-window-container{
  width: 300px;
  height: 300px;;
  max-width: 300px;
  max-height: 300px;
}

.wpgmza_infowindow_description{
overflow: overlay;
    max-height: 240px;
}
}

How can I correct this?
And is it possible to reduce the size like you had it in your code above and have a scrollbar on mobile for the info window as well?

3.) I would create them there. Currently the categories are just written down in the marker description.

Thanks!

[DK791002]

Forgot the attachment above, sorry.

Attachments:

You must be logged in to view attached files.

[AbelC]

Hi There,

Thank you for getting back to me, and my sincere apologies for the confusion on my behalf.

Could I kindly ask if you could please replace the previous provided Custom CSS with the following code below:

.wpgmza-infowindow.ol-info-window-container{
  width: 300px;
  height: 300px;;
  max-width: 300px;
    max-height: 300px;
}

.wpgmza_infowindow_description{
overflow: overlay;
    max-height: 240px;
}

@media (min-width: 600px) {
.wpgmza-infowindow.ol-info-window-container{
  width: 300px;
  height: 300px;;
  max-width: 300px;
  max-height: 300px;
}

.wpgmza_infowindow_description{
overflow: overlay;
    max-height: 240px;
}
}

This should now reduce the size and add a scrollbar to the InfoWindow on Desktop devices. With that said, the InfoWindow size will now also be reduced.

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

3. Could I kindly ask if you could please create a test marker and add the preferred custom fields to the marker as this will allow me to prepare the code needed to achieve this?

I look forward to hearing back from you.

Kind Regards,
Abel

[DK791002]

Hello,

1.) This is not working unfortunately, it is causing the same issue as above. Attached an example again. In addition the info window in mobile view is just size-adjusted but not scrollable, so not all information is visible anymore.

3.) Created example marker No. 48 (New York) with custom fields.
Big disadvantage is now that I can’t put in links anymore as it is just text fields.

Thanks again for your help!

Attachments:

You must be logged in to view attached files.

[AbelC]

Hi There,

Thank you for your time on this one.

I was now able to reproduce this issue on our side. We do apologize for the inconvenience.

Would you perhaps be open to please submit a support ticket here -> https://www.wpgmaps.com/support/ -> please provide us with a temporary admin account as this will allow me to take a closer look at what is causing this issue?

If so, could you please add my name in the ticket.

This will be a tremendous help!

I look forward to hearing back from you.

Kind Regards,
Abel

[boatsRus]

[quote quote=61594]

– I know how to add custom fields in the “add marker” screen, however how can I sort them in between the already existing fields?

[/quote]

Hi,

Very much support this as a feature request. Already a good alternative would be simple tickbox in the marker setting “Place custom fields before Description”

Note: This should not be a global setting, as the behavior would change at least per map but even per marker.

[AbelC]

Hi There,

Thank you so much for getting in touch with us.

Would I be correct if I say that you would like to display the custom fields before the description in the InfoWindow?

Unfortunately, this is not supported by default at the moment, however, this can be achieved with Custom JS.

I will definitely add it to the Feature Request items for our development team to have a look at. Than you for your suggestion.

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

We will then be able to prepare the Custom JS needed to achieve this and get back to you as soon as possible.

I look forward to hearing back from you.

Kind Regards,
Abel

[boatsRus]

Yes, because it is not supported, I’m asking/suggesting :-).

I don’t really want custom code, thanks for offering. Custom code would be to complex to target correctly as not all maps nor all markers ideally should have this characteristics. So keeping this as a feature suggestion so that you could order the elements in the infowindow on at least a per map basis, optimally on a per marker basic.

To extend this a little, the elements that could be ordered are:
– Heading
– Image/gallery
– Description
– Custom fields

Feasible orders that I would use are eg
– Image (attention grabber)
– Heading (eg Establishment name)
– Custom fields (contact info, opening times etc)
– (long) description (that I don’t want to block the custom fields on small devices)

So a “mini-information window builder” would be the “ultimate” goal 🙂 but short term the most important would be to be able to put custom elements before the description.

[Author]

Posts