Filter Google Map Embed

[Will]

Hello,
I need a way to filter the google map embed without altering the plugin’s admin/event-map.php file. I basically need to add my own style variable to recolor the map. I can transform the map object once it’s loaded via javascript, but my users see the visual transform from default map to new styles.

Is there a way I can write a function that will catch the event-map.php before it fires? Or overwrite it without altering the default file so that I don’t lose changes when an update occurs?

Thanks,

will lanni

[Jonah]

Hi Will,

I’m not sure how to do this myself but have passed it on to one of our developers to take a look. Stay tuned.

Regards,
– Jonah

[Will]

Thanks Jonah!! If I can come up with a decent javascript solution I’ll post it back here for future use.

[Will]

Hey folks,
Here’s how I would handle this moving forward if I wanted to extend out the ability to customize a map in the calendar:
In the Event control in the dashboard, I’d add a text area input after the google map width/height controls to allow people to add generated JSON from the style wizard on googlecode.com: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html and store it in a variable named something like $embedGoogleMapsStyle; or whatever makes sense to you guys, and add an apply_filters() to it:
$embedGoogleMapsStyle = apply_filters( ‘tribe_google_maps_style’, ‘[contents of the text field, however that shows up here]’);

In the-events-calendar/admin-views/event-map.php, after the mapTypeID entry (line 20), I’d add a comma, line break, then:
styles: myStyles

And before the var myOptions() on line 16, I’d add a new variable with the ability to apply filters, something like this (I’ve never actually written a filter before so please excuse the horrific syntax and erroneous code):

var myStyles = {

}

[Will]

For anyone who is looking for a temporary fix, please note that this will get wiped out whenever the plugin gets updated, but it’s pretty easy to add back in:

Open

the-events-calendar/admin-views/event-map.php

Line 19, add a comma after ROADMAP:

mapTypeId: google.maps.MapTypeId.ROADMAP,

Add:

styles:

And then paste the JSON from the wizard link in my post above into that area (it should be wrapped in [] brackets, for example:
[
{
“elementType”: “geometry.fill”,
“stylers”: [
{ “visibility”: “on” },
{ “color”: “#ffffff” }
]
}
]

[Leah]

Thanks for posting your code, Will!

[Will]

You’re welcome! I wish I could post code in a pre tag… shoot… maybe I can?

testing 1 2 3 4

[Jonah]

Use http://snippi.com/

[Jonah]

Or https://gist.github.com/

[Will]

You know, with the amount of code I look at on github, you’d think I’d use it more. 😛

[Will]

OK, here’s a better code post than my earlier one, my apologies for the rookie code post. Thanks Jonah for the link to Snippi–wish I could get their facebook login to work…

1) Create a Google Map style here: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

2) Copy the JSON code provided.

3) Open /wp-content/plugins/the-events-calendar/admin-views/event-map.php

4) Add styles: method to var myOptions (starts line 16), and format it to match my example on snippi.com. (My example will change your google map to a black and white map).

http://snippi.com/s/8i4j4qd

[Author]

Posts