Centering Infobox Display Popups

New home Forums Pro Add-on Centering Infobox Display Popups

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  AbelC 1 month, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #55445

    knepper3
    Member

    So I am new to this plugin, feel like I have most of what I need working but I have one annoying issue. When I have a map displayed if you click on the marker the infobox pops up and if the marker was near the edge of the map most of the info box is hidden. Is there a way to center a marker when clicked so the info box is in the middle and all visible?

    #55457

    AbelC
    Moderator

    Hi There,

    Thank you so much for getting in touch with us, and our sincere apologies for the inconvenience.

    Unfortunately, this is not supported by default 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 -> Please add the following JS code below:

    jQuery(function($) {
        $(window).load(function() {
    var map = WPGMZA.maps[0];
            map.on("click", function(event) {
                if(!(event.target instanceof WPGMZA.Marker))
                    return;
    
                var position = event.target.getPosition();
    
                map.setCenter(position);
    
                var mapElementHeight = $(map.element).outerHeight();
                var offsetY = -mapElementHeight / 4;
    
                map.nudge(0, offsetY);
    
            });
        });
    });

    This should now center a marker when the user click on the the marker to view the InfoWindow.

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

    Kind Regards,
    Abel

    #55492

    knepper3
    Member

    I pasted it and nothing seemed to change. It did act odd though when I pasted and tried to save map it brought me to an Oops page but when I returned the code was saved.

    Attachments:
    You must be logged in to view attached files.
    #55500

    AbelC
    Moderator

    Hi There,

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

    Could I kindly ask if you would be open to please provide me with a link to your map page so that we can take a closer look as to what is causing this issue?

    We will then also be able to test the code on your map page.

    We look forward to hearing back from you and assisting your further.

    Kind Regards,
    Abel

    #55535

    knepper3
    Member
    #55556

    AbelC
    Moderator

    Hi There,

    Thank you so much for your time on this one.

    I have viewed your map page and it appears that you are using the OpenLayers map engine. I do apologize 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 code below:

    jQuery(function($) {
    jQuery(window).load(function(){
    WPGMZA.maps[0].on("select", function(event) {
    
    var marker = event.target;
    
    marker.panIntoView();
    
    marker.map.nudge(0, -100);
    });
    });
    });

    This should now center the map if you click on the marker.

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

    Kind Regards,
    Abel

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.