Venue Map Size / Aspect Ratio

[B.]

Hi,
Wondering how to change the behavior of the Google map sizing that shows up on a single Event page along with the ‘Details’ info? I see that when the Venue/map info displays along with ‘Details’ in the single box, the map is set to be square with the width of the parent DIV (.tribe-events-meta-group-gmap) determining the overall dimensions. By default, the map is a fairly tiny square with the other info columns wasting a lot of unused space.

But when there is ‘Organizer’ info to display as well, the Venue info and map get pushed to their own box and the map is displayed as a horizontal rectangle instead of a square, filling the space much better.

– Is there a function or something that could be modified to just get the ‘rectangular’ sizing of the map in all cases, even when it’s displayed in the single box with the ‘Details’ info?

This would allow me to style the typical Details box so the map filled the space better and the Details and Venue information could be in much narrower columns. We rarely add ‘Organizers’, so there is usually the one box with the details & map. Currently when I make the ‘Details’ & ‘Venue’ columns narrower and increase the width of the Map container, the map gets way too big since it scales as a square.

Thanks!

[Barry]

Hi!

Can you try adding the following snippet to your theme’s functions.php file?

add_filter( 'tribe_events_single_event_the_meta_group_venue', '__return_true' );

Does that help at all?

[B.]

Thanks for the reply! I added that snippet and it appears to make the Venue and Map show up correctly in their own box underneath the ‘Details’ box (as when an Organizer is also used). The map is sized how I want, but just wish they could be combined. The Details now are just a tiny bit of info in a huge box. Not real efficient.

– Any way to get the map aspect ratio / sizing, without it having to split into a whole separate container?

Thanks. Just trying to get better use of the space.

[Barry]

You can rearrange it in almost any fashion you like 🙂

What I’d recommend at this point in time though, if you can wait just a little longer, is delaying further customizations until our very next release arrives.

Right now you could possibly do what you want and need via CSS (incidentally, please do check out our Themer’s Guide – it covers a lot of the background info you’ll need to safely tweak things) however that might be pushing what is easily accomplishable. Moving sections of information around with the current release is also possible but you need to hook into the meta factory: you’re more than welcome to give that a blast but you’ll probably find it’s a whole lot easier in the very next release, as that section of the single event page will be created from a set of customizable templates just like everything else.

I hope that helps 🙂

[B.]

Hi, I’m wondering if now with the new version out and installed if any direction could be given as to my initial inquiry? I’m now using EC v3.7 & WP 3.9.2.
Again, I was wondering how to get the maps to display with a rectangular aspect ratio (not square) when they are in the same box as the Details/Organizer. They display as a horizontal rectangle when in their own box below the Details box, but display square when in the single Details box. Just makes it hard to get a good map size without wasting vertical space.
Thanks!

[Barry]

Hi!

So things are a lot easier to customize with regards to meta elements like the map and a lot can be done from within template overrides. Some resources/ideas to get you started:

• Our Themer’s Guide which has been updated since my last reply and covers the basics of safely overriding and customizing templates
• The modules/meta/map.php template will interest you as this is the container for the map
• Within that template you’ll see the tribe_get_embedded_map() function is used – you can actually specify dimensions by passing additional arguments, something like this: tribe_get_embedded_map( null, 600, 300 ) – which would create a map with a width of 600 pixels and a height of 300 pixels

Good luck!

[B.]

Hi, thanks for the update. That is helpful.
But I looked through all of the template files and couldn’t find anything that would cause the map to have a different aspect ratio when on it’s own vs. in the Details box.

So I dug deeper into the CSS and caught something I hadn’t see before that you guys have setup. In case it helps anyone else figure out how to alter the map size, here’s what it is:

There’s a rule on the inner map like this:
.single-tribe_events .tribe-events-meta-group #tribe-events-gmap {height: 0; padding-top: 100%;}

The padding-top is causing the map to display as square. And for what it’s worth, setting a specific size in the template file as an argument is getting overridden, so it doesn’t really do anything.

Hope this helps someone!

[Barry]

You’re quite right, some !important CSS rules do override the dimensions specified via that function – sorry for the confusion.

Sounds like you’re all sorted though which is fantastic – and so I will go ahead and close this thread. Thanks again (particularly for posting back with the tips 🙂 ).

[Author]

Posts