[guy_bParticipant]

Hi,

I’ve read the other posts I could find about this question, but the solution appears to be for the embedded iFrame source rather than the X Google Map.

I am trying to use the shortcode in a hidden flyout, so that when a link is clicked, it triggers the flyout to slide up and display the map.

I can get the map to display properly with a bit of JS, like this:

jQuery(document).ready(function ($) {
    $('body').click('.flyout-trigger-id-1169', function () {
        if (typeof google !== 'undefined' && google.hasOwnProperty('maps')) {
            google.maps.event.trigger(window, 'resize', {});
        }
    });
}); 

But the map center is still off. This is obviously happening because the center is being calculated from the original collapsed position, so I need a var to define the center after the flyout expands, as well as on resizing.

So I’m thinking something like this:

var map = ...; // map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

Struggling, can you offer any guidance about the center position after the resize trigger fires?

Can I hook into the existing api provided by X to calculate the center of the map?

Thanks

Guy

[RadModerator]

Hi there,

Thanks for writing in.

The main reason could be the display:none styling of your fly-out container. You should make it to display: block so it will have a distinctive width on page load. Then set it’s height to 0 with overflow: hidden. It’s has similar effect to display : none but still have the width. Then initialise its height to auto upon the fly-out, or along with your code above.

Cheers!

[guy_bParticipant]

Hey,

Thanks, nice idea, unfortunately not quite as simple as that 🙂

I think the issue is partly that the flyout container is a sort of custom post type, and although I can add x-shortcodes into the content, the container is using dynamic styles.

Beside this, using the CSS method doesn’t account for screen orientation/flipping.

What I really need to be able to do, is define the center, set the center, and then trigger the map redraw when the flyout opens the first time.

I think my method of binding to the click event is also wrong, and I should rather be using an event listener, but I guess this would need to be throttled/destroyed to prevent leaking.

I would post a link, but the site is not yet available online.

I’ll keep trying, but if you have any other thoughts about what I can try they will be gratefully received.

Cheers,

Guy

[ZeshanMember]

Hi Guy,

The CSS option should work just fine, however it doesn’t seem right for your requirement. We’d love help you, but regretfully, that would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[guy_bParticipant]

The standard stock X answer. haha, you guys make me laugh. You just copy and paste that in! 🙂

I am a developer, and I always find the solution to things in the end. Unfortunately I don’t know everything, yet, so I ask people if they have ideas.

Thanks anyway bud, I’ll figure it out.

Cheers

[NicoModerator]

Hi There,

No offense, we would rather say that it would be better to ask assistance from a developer with dedicated time for some part of the development than to take too much time with it that could mess up your web site.

Thank you so much for your understanding.

Let us know if you need anything else.

Cheers.

[Author]

Posts