Customize Infowindow to include Custom Field

New home Forums Pro Add-on General queries Customize Infowindow to include Custom Field

Tagged: 

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #51913
    RoyPridham
    Member

    Hello,
    I’m Building a Dive Site Website and which revolves around the info window.
    i have users which add custom pubic sites and i would like to be able to show the info in the right order. please see paint edited picture of what I’m trying to achieve.
    could you help me with the custom CSS or provide me with a guide to write the code.
    the Bracketed lines are custom fields which already exist

    Would be great if they could review existing sites as well. could you let me know when this is happening.

    Attachments:
    You must be logged in to view attached files.
    #51916
    Perry
    Moderator

    Hi Roy

    Thank you for getting in touch.

    You can definitely achieve this, we recommend perhaps using Custom Fields for the Max Depth / Average Depth / Entry Type fields if you want to ensure consistent formatting, this would help keep user submitted data in a consistent display format.

    If you strictly need those fields above the description, then please get your map page setup and running and we’ll provide either custom JS or custom CSS to re-order those fields for you.

    Ratings are part of our imminent version 8 release, which should be available in the next week.

    Is there anything else we can help you with?

    Kind regards
    – Perry

    #51922
    RoyPridham
    Member

    Hello Perry,

    Thanks very much for the fast response.
    i have purchase the complete pack and everything is going pretty well.
    i have completed the map setup etc and have the fields coming through below the description see attached.
    Are the following possible?
    1) Have the custom fields above the description
    2) Have a Title before the data e.g Depth: <custom field>
    3) No large gaps between the lines see arrow.

    my website’s map is at the following: https://divehub.co.nz/dive-sites/
    That’s awesome news about Version 8 you guys are awesome.

    Attachments:
    You must be logged in to view attached files.
    #51927
    Perry
    Moderator

    Hi Roy

    Can you please add some custom fields and data to at least one marker so we have something to work with there?

    Which marker is shown in the illustration please? Could you give us the ID?

    Kind regards
    – Perry

    #51929
    RoyPridham
    Member

    Hello Perry,

    ID 36 should have everything you need.

    let me know if you need anything more.

    #51932
    Perry
    Moderator

    Hi Roy

    Please paste the following into Maps -> Settings -> Advanced in Custom CSS:

    [data-custom-field-id]
    {
    margin: 0;
    }

    [data-custom-field-id]::before
    {
    content: attr(data-custom-field-name) “:”;
    }

    .wpgmza_iw_address
    {
    padding-top: 2em;
    }

    This will remove the margins around the custom fields, it also adds labels to the custom fields and supports the following code,

    Please then paste this into the Custom JS field:

    jQuery(function($) {

    var old = WPGMZA.InfoWindow.prototype.open;

    WPGMZA.InfoWindow.prototype.open = function()
    {
    old.apply(this, arguments);

    $(“[data-custom-field-id]”).insertAfter( $(“.wpgmza_iw_address”) );
    }

    });

    Does that help?

    Kind regards
    – Perry

    #51938
    RoyPridham
    Member

    Hello Perry,

    see attached pictures the script show the code entered and the 2nd shows the result.
    the spacing is sorted
    no titles and still at the bottom of the page.
    thanks for what you have done so far.

    Attachments:
    You must be logged in to view attached files.
    #51946
    Perry
    Moderator

    Hi Roy

    I beg your pardon, our forum changes plain quotes to angled quotes, please try again with the following:

    Custom CSS:

    [data-custom-field-id]
    {
    margin: 0;
    }
    
    [data-custom-field-id]::before
    {
    content: attr(data-custom-field-name) ":";
    }
    
    .wpgmza_iw_address
    {
    padding-top: 2em;
    }

    Custom JS:

    jQuery(function($) {
    
    var old = WPGMZA.InfoWindow.prototype.open;
    WPGMZA.InfoWindow.prototype.open = function()
    {
    old.apply(this, arguments);
    $("[data-custom-field-id]").insertAfter( $(".wpgmza_iw_address") );
    }
    
    });

    We’ve tested this at our end but if you could confirm that would be great.

    Kind regards
    – Perry

    • This reply was modified 6 months, 1 week ago by Perry.
    #51985
    RoyPridham
    Member

    Hello Perry,

    the Css is working great titles and spacing correct.
    the JS is stopping the info boxes from working(click on the icon nothing happens).

    Attachments:
    You must be logged in to view attached files.
    #51993
    Perry
    Moderator

    Hi Roy

    I beg your pardon.

    Could you please try altering that to the following:

    jQuery(function ($) {
    
    	var old = WPGMZA.InfoWindow.prototype.open;
    	WPGMZA.InfoWindow.prototype.open = function () {
    		
    		var result = old.apply(this, arguments);
    		
    		$("[data-custom-field-id]").insertAfter($(".wpgmza_iw_address"));
    		
    		return result;
    		
    	}
    
    });

    Does that work?

    Kind regards
    – Perry

    #52003
    RoyPridham
    Member

    Hello Perry,

    now works again but the text is still at the bottom.

    Attachments:
    You must be logged in to view attached files.
    #52005
    RoyPridham
    Member

    i can give you login info to my site if that helps

    #52006
    Perry
    Moderator

    Hi Roy

    Yes please, if you could open a ticket at https://wpgmaps.com/contact-us with a link to this topic as a reference, you can send us your details in confidence there.

    Kind regards
    – Perry

    #52242
    Perry
    Moderator

    Hi Roy

    It’s not currently possible to re-order custom fields, however we will add this to our feature request list.

    I tried to check our forum to see the formatting you’re showing but it appears the post has been deleted.

    Did you still need help formatting those fields?

    Kind regards
    – Perry

    #52425
    mgreis
    Member

    Hi Perry,

    You’ve been helping me with recreating my Fusion Tables map. One of the tasks I asked about is customizing the Infowindow. Researching the forums, I found this item. Since it provides some of the information I need, I’m appending further questions on that topic here, thinking it might be helpful to others researching the same topic. (Let me know if that is not optimal….)

    I followed the revised instructions in this item to add the custom CSS and custom JS. I now have the custom fields showing up in the Infowindow of my test map.

    Questions

    1. We’ve discussed that the ability to select which custom fields appear in the Infobox will be available in version 8. So for now, all the fields are appearing.
    2. Ordering the custom fields – the custom fields are displayed in the order they were created. Is it possible to reorder them?
    3. Formatting the custom field names differently than the custom field data. The field names are in the “before” content of the custom CSS. Is it possible to format the names separately from the field data. (For example, having the field name be in normal text but the field data in bold.) I’m not looking to format individual custom fields differently (though I wouldn’t say no to that…). I just want to improve readability for all the fields. In my map, something like this:

      kW: 5.96
      Installer: Direct Energy

    Thanks!

Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.