Add button with link as custom marker field?

[jsharkey]

I would like to add a button with a link as a custom field for a marker. Is this possible? How would I do it?

[Matthew]

Hi there,

Thank you for getting in touch with us, we do appreciate your time.

This is possible, however, you will need to enter the link into the custom field and then I may provide you with a custom JavaScript script that can convert that custom field into a button link.

Should you need further assistance with this, please may you do the above and then provide me with the link to your map so that I may take closer look and write the respective custom script for you?

I hope this answers your question?

I look forward to hearing back from you.

Kindest Regards,
Matthew

[romain]

Mathiew, can’t you share the code with every one ? this is a weird answer. I want to do the same thing, what am I supposed to do ? Right you a nice letter ? this is ridiculous.

[Matthew]

Hi @romain,

Thank you for getting in touch with us.

Please note that we have not yet provided any code for this in this thread as the thread author has not yet provided more/enough information for us to write the respective code they requested.

I am however happy to assist you with the code as well as custom scripts are generally provided per user as each user’s environment and map/marker settings are different.

With that said, please may I ask if you are able to provide me with the link to your map so that I may take a closer look at your custom fields and write a respective custom JavaScript script to help change it into a button?

I look forward to hearing back from you.

Kindest Regards,
Matthew

[jshjsh2]

This reply has been marked as private.

[Matthew]

Hi there,

Thank you for getting in touch with us, we do appreciate your time.

Yes this is possible using some custom CSS and JS code thus please see the code that I have written for you below:
Custom CSS

a.wpgmza_custom_field_register_button {
    border: 3px solid #016f51;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px !important;
    font-weight: bold;
    color: #000
}

a.wpgmza_custom_field_register_button:hover {
    background: #016f51;
    color: #fff;
}

Custom JS

jQuery(function($){
    $(document).on('markerlistingupdated.wpgmza', function(){
        $('.wpgmaps_mlist_row').each(function(){
            let row = $(this);

            let customFieldRow = row.find('div[data-custom-field-id="7"]');

            let label = customFieldRow.find('.custom-field-label').prop('outerHTML');
            let text = "";
            
            customFieldRow.find('.custom-field-label').remove();
    
            text = customFieldRow.text();
            text = "<a href='" + text + "' class='wpgmza_custom_field_register_button'>Register</a>";

            customFieldRow.html(text);
        })
    })
})

Please let me know if this helps?

I look forward to hearing back from you.

Kindest Regards,
Matthew

[jshjsh2]

This reply has been marked as private.

[Matthew]

Hi there,

Thank you for getting back to me and most valued time, I tremendously appreciate it!

I am most happy to hear that, and it was my great pleasure assisting you with this.

Please may you kindly consider reviewing our plugin at https://wordpress.org/support/plugin/wp-go-maps-block/reviews/#new-post?

It would really mean the world to me! And if possible, please could I kindly ask you to mention both your name and mine in the review for administrative purposes as this would be a tremendous help?

Should you ever require any further assistance, I am more than happy to help.

Have a fantastic day further!

Kindest Regards,
Matthew

[jshjsh2]

This reply has been marked as private.

[Matthew]

Hi there,

Thank you for your response and time on this, I really appreciate it!

Yes sure, thus please may you add the below code into the “Custom JS” setting block:

jQuery(function($){
    $(document).on('infowindowopen.wpgmza', function(event){
        let infowindow = $(event.target.element)

        let fbFieldContainer = infowindow.find('div[data-custom-field-id="3"]');
        if(fbFieldContainer.length > 0){
            fbFieldContainer.find('.custom-field-label').remove();
            let link = fbFieldContainer.text().trim();
            fbFieldContainer.html('<a href="'+link+'" class="fa-brands fa-facebook" style="color: #0866ff; font-size: 18px;"></a>');
        }

        let webFieldContainer = infowindow.find('div[data-custom-field-id="8"]');
        if(webFieldContainer.length > 0){
            webFieldContainer.find('.custom-field-label').remove();
            let link = webFieldContainer.text().trim();
            webFieldContainer.html('<a href="'+link+'" class="fa-solid fa-globe" style="color: #000000; font-size: 18px;"></a>');
        }

        let igFieldContainer = infowindow.find('div[data-custom-field-id="4"]');
        if(igFieldContainer.length > 0){
            igFieldContainer.find('.custom-field-label').remove();
            let link = igFieldContainer.text().trim();
            igFieldContainer.html('<a href="'+link+'" class="fa-brands fa-instagram" style="color: #d401e5; font-size: 18px;"></a>');
        }
    })
})

Once this has been done, please may you clear your browser cache and confirm if this helps?

Kindest Regards,
Matthew

[jshjsh2]

Hi Matthew,
Thank you very mnuch for the Custom JS code, worked exactly as required. Appreciate the support.

Regards

[jshjsh2]

This reply has been marked as private.

[Author]

Posts