Category in infowindow

New home Forums Pro Add-on General queries Category in infowindow

This topic contains 23 replies, has 5 voices, and was last updated by  AbelC 3 weeks, 6 days ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #50796

    manarbre
    Participant

    Hello
    How could I show category in the infowindow ?
    Like :
    category in infowindow

    More generally, how to customize the info window ?
    Thanks

    #50838

    AbelC
    Moderator

    Hi There,

    Thank you so much for getting in touch with us.

    Please find my response below:
    1. Display category in the InfoWindow:
    Unfortunately, this is not supported at the moment, however, this can be achieved with custom JS.

    Could I kindly ask if you could please navigate to Maps -> Settings -> Advanced -> Custom JS -> And please paste the following code below:

    $ = jQuery;
    $(document.body).on(‘infowindowopen.wpgmza’, function (event) {
    var marker = event.target.mapObject;
    for( var i = 0; i Settings -> Advanced -> Custom CSS.

    You can also choose different InfoWindow Styles by navigating to Maps -> Edit -> Advanced Settings -> Scroll down to “Infowindow Style”.

    I hope this helps clarify, and please do let me know if this is working for you.

    Kind Regards,
    Abel

    #50844

    manarbre
    Participant

    Hello, thanks for your kind answer.
    But I think your js code isn’t finished, there is a paste error after for(var i=0 …
    Thanks

    #50862

    AbelC
    Moderator

    Hi There,

    Thank you so much for letting me know, and my sincere apologies for the mistake on my behalf.

    Could I kindly ask if you could please navigate to Maps -> Settings -> Advanced -> Custom JS -> Please replace the previous code with the following:

    $ = jQuery;
    $(document.body).on(‘infowindowopen.wpgmza’, function (event) {
    var marker = event.target.mapObject;
    for( var i = 0; i < marker.categories; i++){
    var category = WPGMZA.categories.getCategoryByID( marker.categories );
    var display = category.name;
    $('.wpgmza_infowindow_address').next().html(display);
    }
    });

    Please do let me know if this is working for you, and we look forward to hearing back from you.

    Kind Regards,
    Abel

    #50870

    manarbre
    Participant

    Thank you for your code !
    I pasted it in the good place.
    Unfortunately it doesn’t do anything, you can see it on https://bobelweb.eu/nos-clients/
    I emptied the cache, and disabled minified css/js. But nothing happens.
    My markers haven’t got address, so I tried $('.wpgmza_infowindow_title').next().html(display);
    Have you got some tips ?

    • This reply was modified 4 months, 1 week ago by  manarbre.
    #50891

    AbelC
    Moderator

    Hi There,

    Thank you so much for your time on this one, we really do appreciate it.

    I have viewed your map page and I have made a couple of changes to the code. I do apologize for the inconvenience.

    Could I kindly ask if you could please navigate to Maps -> Settings -> Advanced -> Custom JS -> Please replace the previous code with the following:
    $ = jQuery;
    $(document.body).on(‘infowindowopen.wpgmza’, function (event) {
    var marker = event.target.mapObject;
    for( var i = 0; i ‘ + display + ”);
    }
    }
    });

    Please do let me know if this is now working for you, and I look forward to hearing back from you.

    Kind Regards,
    Abel

    #50913

    manarbre
    Participant

    Thanks again, but I think there is another Paste error in your code.
    Could you take a look ?

    #50921

    AbelC
    Moderator

    Hi There,

    Thank you for letting me know, and I do apologize for the inconvenience.

    It appears that our system may remove some parts of our code.

    Could I kindly ask if you could please find the code in the .txt file attached.

    You can paste this code in the Custom JS box by navigating to Maps -> Settings -> Advanced -> Custom JS.

    Again, I do apologize for inconvenience.

    Please do let me know if this is working for you.

    Kind Regards,
    Abel

    • This reply was modified 4 months, 1 week ago by  AbelC.
    • This reply was modified 4 months, 1 week ago by  AbelC.
    • This reply was modified 4 months, 1 week ago by  AbelC.
    • This reply was modified 4 months, 1 week ago by  AbelC.
    Attachments:
    You must be logged in to view attached files.
    #50933

    manarbre
    Participant

    Whaouw ! Thanks, it works for most cases (single category markers).
    But doesn’t show the

    when marker has got multiple categories.
    bug multiples categories
    Any idea ?
    #50981

    AbelC
    Moderator

    Hi There,

    Thank you so much for letting me know, and my apologies for the inconvenience.

    Could I kindly ask if you could please replace the previous code with the following:

    $ = jQuery;

    $(document.body).on(‘infowindowopen.wpgmza’, function (event) {
    var marker = event.target.mapObject;
    var categoryNames = [];
    for (var i = 0; i < marker.categories.length; i++) {
    var category = WPGMZA.categories.getCategoryByID(marker.categories);
    console.log(category);
    if (category) {
    categoryNames.push(category.name);
    }
    }
    var joinedCategoryNames = categoryNames.join(", ");
    $('body').find('.wpgmza_infowindow_title').after(joinedCategoryNames);
    });

    This should now display multiple categories in the InfoWindow.

    Please do let me know if this is working for you.

    Kind Regards,
    Abel

    #51013

    manarbre
    Participant

    Hello Abel
    Many thanks for your work, it’s perfect !!!
    Just remember to write the bracket for (i) in getCategoryByID(marker.categories(i));
    See you later 🙂
    Romain

    • This reply was modified 4 months ago by  manarbre. Reason: bracket not showing
    #51027

    AbelC
    Moderator

    Hi There,

    That is great to hear, and it is only a pleasure.

    It appears that the System may have removed from getCategoryByID(marker.categories);. My sincere apologies for the inconvenience.

    If you ever have two minutes spare, please consider reviewing the plugin on https://wordpress.org/support/plugin/wp-google-maps/reviews/#new-post it would mean the world to me! (If possible, could I ask you to mention both your name and mine in the review for administrative purposes, this would be a tremendous help!)

    Have a great day!

    Kind Regards,
    Abel

    #51028

    manarbre
    Participant

    ok it’s done : many thanks !

    #51046

    AbelC
    Moderator

    Hi There,

    Thank you so much for leaving a review, we really do appreciate it.

    Please do let me know if there is ever anything else that we can assist you with.

    Have a great day!

    Kind Regards,
    Abel

    #51900

    aaceves
    Member

    Hi everyone,
    If anyone wants to display the icons instead of the names here is the code:

    $ = jQuery;
    $(document.body).on('infowindowopen.wpgmza', function (event) {
    var marker = event.target.mapObject;
    var categoryIcons = [];
    for (var i = 0; i < marker.categories.length; i++) {
    var category = WPGMZA.categories.getCategoryByID(marker.categories);
    
    if (category) {
    categoryIcons.push(category.icon);
    }
    }
    
    var iconDisplay = document.createDocumentFragment();
    
    categoryIcons.forEach(function(iconUrl) {
        var img = document.createElement('img');
        img.src = iconUrl;
        iconDisplay.appendChild(img);
    });
    $('body').find('.wpgmza_infowindow_title').after('<div class="wpgmza_infowindow_categories"></div>');
    $('.wpgmza_infowindow_categories').append(iconDisplay);
    });
    • This reply was modified 3 months, 1 week ago by  aaceves.
Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.