Map moves to accommodate marker

New home Forums Pro Add-on Troubleshooting Map moves to accommodate marker

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #58893
    donalwaide
    Member

    Hi,
    I have a map of Europe and when I click on the Danish marker, the map “scrolls” up to accommodate the popup and then I cannot see the lower portion of the map, i.e. Spain.
    I understand I can resize the map, but is there a way for the popup to appear at the side and not above the marker…causing the shift.
    I have the InfoWindow style as No Global Setting (Modern is screwed up) and I have disabled all General Map settings.

    TIA

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

    Hi there,

    Thanks for getting in touch with us.

    This can be achieved with some custom code.

    Could I kindly ask you to navigate to Appearance > Customize > Additional CSS and paste the following CSS:
    .gm-style-iw {
    left: -150px !important;
    bottom: -170px !important;
    top: 70px !important;
    }
    .gm-style .gm-style-iw-t::after {
    display: none !important;
    }

    This will then show the InfoWindow next to the marker icon as requested.

    Please let me know if this helps.

    Thanks.

    Kindest regards,
    Dylan

    #58935
    donalwaide
    Member

    I still had to make the map larger, now 575 pixels high, but the side InforWindow helps.

    Thank you

    #58938
    donalwaide
    Member

    I still had to make the map larger, now 575 pixels high, but the side InfoWindow helps.

    Thank you

    #58942

    Hi there,

    Thanks for the response and letting me know.

    Just to confirm, is everything correct now?

    Thanks for your time.

    Kindest regards,
    Dylan

    #58993
    donalwaide
    Member

    Dylan,
    I am trying to make a number of maps, but this custom code is then the CSS code for all the maps? Is there a way to customize each map’s code?

    #59003
    [email protected]ecabin.co.za
    Member

    Hi there,

    Thanks for the response and information.

    Yes this code will affect all the maps. If you want to only add it for a specific map, you can target it via the map ID, for example:
    #wpgmza_map_4 .gm-style-iw {
    left: -150px !important;
    bottom: -170px !important;
    top: 70px !important;
    }

    That will then only affect the map with the ID ‘4’.

    Please let me know if this helps.

    Thanks.

    Kindest regards,
    Dylan

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