Category in infowindow

[creawbe]

Hey, is it possible to have the category by default be placed in every infowindow? i just want it to be there with a specific id in it so that i can style it where i want it to appear! Thanks in advance.

[SupportTeam]

Hi there,

Thank you for getting in touch with us.

Could do you explain it a bit more? Do you mean adding categories list to every infoWindow with ID? Actually you have the wpmgza_category variable inside wp-google-maps-pro\js\core.js file which store categories IDs of specific marker so you only need to fetch the name of the categories to display it in infoWindow. If this is what you want please let me know so I’ll send you some code.

Thank you for your time in this.

Best regards,
Jarek

[creawbe]

Hi Jarek,

I think it is what I need yes. I will explain with an image example how it is now and how I want it to be:

(http://imgur.com/a/ePrm6)

• This reply was modified 5 years ago by creawbe.

[SupportTeam]

Hi there,

I apologize for the delay over the weekend.

Please open wp-google-maps-pro\js\core.js file and find the following lines:

var wpmgza_anim  = val.anim;
                    var wpmgza_retina  = val.retina;
                    var wpmgza_category  = val.category;
                    var current_lat = val.lat;
                    var current_lng = val.lng;
                    var show_marker_radius = true;
                    var show_marker_title_string = true;

and add this after that:

if ('0' !== wpmgza_category) {
                        var wpgmza_cats = wpmgza_category.split(',');
                        var wpgmza_names = [];
                        jQuery.each(wpgmza_cats, function (i, v) {
                            wpgmza_names.push(jQuery('#wpgmza_filter_select option[value="' + v.replace(/ /g, '') + '"]').text());
                        });
                        wpmgza_title += '<p class="wpgmza_infowindow_cat">' + wpgmza_names.join(', ') + '</p>';
                    }

Hope that helps. Feel free to reach out if you need anything.

Best regards

[creawbe]

Hey Jarek, Thanks for your answer!
I copied your code, I can see in the HTML inspector that the <p> tag is being added but the value is just empty.

I tried debugging a bit (as far as I could), and I can see that the ‘wpmgza_category’ variable is correct, but the wpgmza_names variable remains empty.
Just for information this is how my checkboxes for filtering look like in HTML (im not sure if this has anything to do with it):

<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
            <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
                <div class="wpgmza_cat_checkbox_item_holder_first">
                    <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
                    <div>
                        <label for="wpgmza_cat_checkbox_0">All</label>
                    </div>
                </div>
                <div class="wpgmza_cat_checkbox_item_holder">
                    <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5">
                    <div>
                        <label for="wpgmza_cat_checkbox_5">Particulier</label>
                    </div>
                </div>
                <div class="wpgmza_cat_checkbox_item_holder">
                    <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_6" name="wpgmza_cat_checkbox" mid="5" value="6">
                    <div>
                        <label for="wpgmza_cat_checkbox_6">Professioneel</label>
                    </div>
                </div>
            </div>
        </div>

[SupportTeam]

Hi there,

I’m so sorry for this. I assumed you have dropdown list not checkbox. Please change the code I’ve sent you before to this one:

if ('0' !== wpmgza_category) {
                        var wpgmza_cats = wpmgza_category.split(',');
                        var wpgmza_names = [];
                        jQuery.each(wpgmza_cats, function (i, v) {
                            wpgmza_names.push(jQuery('.wpgmza_cat_ul input#wpgmza_cat_checkbox_' + v.replace(/ /g, '') ).next('label').text());
                        });
                        wpmgza_title += '<p class="wpgmza_infowindow_cat">' + wpgmza_names.join(', ') + '</p>';
                    }

Hope that helps.

Kind regards

[creawbe]

Hey Jarek,

Thank you very much, this works!

[SupportTeam]

This reply has been marked as private.

[eckertw]

Hi there,
it seems core.js has been made redundant, but I would still like to add categories to the infowindow – is there another way to do this?
Thank you

[eckertw]

Anybody able to support, please?

[bsamarketing]

did you get an answer s I am looking to do a similar thing

[Steven]

Hi there,

Unfortuantely, this is not currently supported, however, might be achievable with a custom script.

If I could kindly ask you to navigate to -> Maps -> Settings -> Advanced Settings -> please copy the script from the gist below and paste this in the custom JS field:

https://gist.github.com/StevenDeBeer/c86e819a23f812f747e807279170e229

Once done, please save the settings.

This should work, however, this was tested locally at my end so failing this, if I could kindly ask you to create a ticket via our support desk(https://www.wpgmaps.com/contact-us/) so that one of our agents can more directly take a look.

Kindest Regards,
Steven De Beer

[eckertw]

Thx Steven,
I couldn’t get it to work and will open a support ticket
Best regards

[eckertw]

This reply has been marked as private.

[Matthew]

Hi all,

Matthew here from the WP Google Maps team, and thought I’d share this if anyone needed.

Here is some custom JS code (Maps -> Settings -> Advanced Setting) that will add the category to the marker infowindow:

jQuery(function($){
    $(document).on('infowindowopen.wpgmza', function(event){
        var marker = event.target.googleObject;
        var categoryIDs = marker.categories;

        for(var id of categoryIDs){
            var category = WPGMZA.categories.getCategoryByID(id);
            if($('.wpgmza-infowindow .wpgmza_infowindow_category_custom').length < 1){
                $('.wpgmza-infowindow').append('<p class="wpgmza_infowindow_category_custom">'+category.name+'</p>');
            }
        }
    })
})

Please note that the above code was written with the default marker infowindow styling in mind, thus it may need to be altered if you are using a different infowindow style.

I hope this helps?

Kindest Regards,
Matthew

[Author]

Posts