Google Maps displaying icon incorrectly

[Kelly]

For some reason, the top left corner of my event’s Google map isn’t displaying its icon properly. I imagine that it would be a zoom in/zoom out, but right now, just a bit of a distorted icon is there. Any ideas?

[Brook]

Howdy,

That is a bit strange. It looks like some javascript somewhere is conflicting with Google’s map code. You could add a snippet like the following to hide the icons: .gmnoprint div img { display: none; }

But that is not a great solution. It hides the little drop down arrow as well. So this issue persisted even after all plugins were disable and the 2011 theme was used? Ordinarily that would solve the problem, and we could isolate the problem by reenabling those one at a time and see which causes the issue. So, I just wanted to double check that this problems continues with all those plugins disabled and the default theme being used. Thanks!

– Brook

[Kelly]

Hey Brook. Yeah, if we can avoid hiding the div, that’d be best. I’d like to give users the option to zoom in and out of the map.

I disabled all of the plugins and reverted back to 2012 theme (it’s the earliest theme I have… is 2011 not included with the newest build of WP?) and it was still there. I reactivated them one-by-one, but still wasn’t able to find a conflict.

Thanks for your help 🙂

[Brook]

Howdy Kelly,

The following CSS should fix the problem:
.tribe-events-venue-map img { max-width: inherit; }

This is an issue with your theme. You might report it to the theme author. Anytime Google Maps is displayed anywhere on the site you will have to apply the above CSS to that one as well, by creating another CSS rule. Ideally the theme should not be setting the max width of all imgs, that is very bad practice.

Please let us know if that fixes it. Thanks!

– Brook

[Kelly]

Worked like a charm. Thanks Brook 🙂

[Brook]

You are very welcome!

[Author]

Posts