Google Maps no longer displaying

[davidgmiles]

Simply put – I just get a grey box where the map used to be – any ideas are welcome

Sample of ‘the box’ – at the bottom of the following page http://natureslens.co.uk/event/polands-white-tailed-eagle-winter-photography/

[Barry]

Hi David,

Sorry to hear you are experiencing difficulties.

It actually looks as though the map is being loaded and formed – it just isn’t visible, for some reason. It’s not impossible CSS rules from your theme or another plugin are impacting: would it be possible for you to run through our standard troubleshooting steps here and see if a conflict is at work?

Let me know how you get on!

[davidgmiles]

Yup – thats all been checked out I have switched back to an older version of my theme, tried 2014 & 2013 and killed all other plugins – issue remains

[David Fraser]

I have the same issue on upgrading to v3.8 of Events Calendar and Events Calendar PRO and one other routine plug-in upgrade. See for example http://www.engineeringscotland.org/event/the-autumn-lecture-2014/
I have tried deselecting and reselecting google maps display in both the back end and the individual event post. I had simultaneously installed but not activated the Jetpack plugin though I have now uninstalled it again just in case that is related. Thoughts welcome! I’d like to roll back the Events Calendar upgrades.

[David Fraser]

The other plugin upgraded was Photo Gallery, by the way, but it is now de-activated. Still no google maps.

[davidgmiles]

I have JetPack but not the PhotoGallery plugin – common denominator appears to be 3.8

[Ray]

No maps displaying for me either after upgrading to ver 3.8.

[davidgmiles]

A fix suggested by the guys that developed my theme, Enfold, kind of worked – it doesn’t fill the box – but at least it shows now – http://natureslens.co.uk/event/scottish-grouse-photography-holiday-2/ – hopefully Tribe will look into it and locate what broke in 3.8

Fix is

.single-tribe_events .tribe-events-venue-map > div {
min-height: 300px;
}

[Barry]

Sorry for the difficulties, everyone.

add_filter( 'tribe_get_option', 'adjust_tribe_embedded_map_height', 10, 2 );

function adjust_tribe_embedded_map_height( $value, $property ) {
    if ( 'embedGoogleMapsHeight' !== $property ) return $value;
    return '350px';
}

In addition to your theme author’s CSS-based fix you could try adding the above snippet to your theme’s functions.php file.

[Ray]

Hi Barry,
The PHP function fixed the problem for me. Maps now displaying correctly.
Thanks!
Regards,
Ray

[davidgmiles]

I removed the CSS fix – and applied yours – the map shows – but it does not fill the box and looks slightly distorted

[Barry]

@Ray: that’s awesome to hear – glad it helped 🙂

@davidgmiles: is the fix definitely in place/did you remove it after hitting problems? The output isn’t quite what I’d expect when I view the URL you provided in your opening post.

[davidgmiles]

My mistake – I was not seeing the cached version as I was logged in – I have cleared the cache for the page – now you can see what I mean (as a non-logged in user) of the map not filling the box on http://natureslens.co.uk/event/scottish-grouse-photography-holiday-2/

[Barry]

OK – there’s definitely some distortion creeping in via rules in Enfold’s stylesheet. Adding some rules like this may help a little on that count:

.entry-content-wrapper .tribe-events-event-meta img {
    min-width: 0px;
    min-height: 0px;
}

You could either add these to any suitable custom CSS file or else set up a tribe-events.css file for this specific purpose (please see our Themer’s Guide for details).

You can remove the extra margin at the bottom with a snippet like this one:

add_filter( 'tribe_events_embedded_map_style', 'remove_embedded_map_margin' );

function remove_embedded_map_margin( $styles ) {
	$rules = explode( ';', $styles );
	if ( ! is_array( $rules ) || 0 === count( $rules ) ) return $styles;

	foreach ( $rules as $index => $rule )
		if ( false !== strpos( $rule, 'margin-bottom' ) ) unset( $rules[$index] );

	return join( ';', $rules );
}

Or indeed you could override modules/map.php and remove the margin-bottom style there directly from within your template override (again, please refer to the Themer’s Guide for details on setting up template overrides).

Does that help here?

[David Fraser]

Thanks for your help, Barry, and Ray and David. My story is slightly different… I tried Barry’s theme functions.php snippet (in StudioPress News Pro, in my case) and it had no effect so I removed it. I then tried deactivating plugins and found that the v3.8 conflict is with the MailChimp plugin, of all things. I’m not actually using that plugin just now so I can leave it deactivated. However, I then see the blank bar at the bottom of the Google map box, presumably the same as other David is seeing.
I happen to have the option of copying the pre v3.8 Events Calendar & Pro plugin folders (v3.7 presumably) over the new version. That seems to restore a fully working version. Having done that, I do notice the google map box is not as tall as in v3.8, and it is filled correctly with the map. See http://www.engineeringscotland.org/event/the-autumn-lecture-2014/ for example.
I’m pondering what to do next (if anything), without a great deal of time to spend on it. Perhaps my notes help. Suggestions also would be welcome.

[Author]

Posts