Change map zoom level with Javascript

[Stuart Farish]

Hi Stephen
In the plugin description it mentions “Javascript actions and filters to modify interaction with the calendars and maps”. I’ve had a hunt around but I can’t find a description of how this works.

I’m trying to add an input box to my page so people can search for events near their postcode. This would be geocoded by Google and the map centred and the zoom level changes. I can do the geocoding but I can work out how to interact with the existing map generated by the EO Shortcode.

Is this possible?

Cheers
Stuart

[Stuart Farish]

[Stephen Harris]

Hi Stuart,

Regarding the venue maps there is a (javascript) filter eventorganiser.google_map_options which allows you to change the options of the maps. Though this won’t help with changing settings after the fact. (Event Organiser uses WP JS Hooks – see their GitHub repo for details).

In this case though I think you might as well use your own Google maps instance. The ‘bulk’ of Event Organiser’s map handling is getting venue data (e.g. latitude/longitude co-ordinates) and map settings client side to then render the map. It seems most of that you’ll be doing yourself anyway.

Currently only the map markers are exposed (stored in eventorganiser.maps). E.g.eventorganiser.maps[0].markers – from which you can get the Google map instance. Obviously you would never do this (it would just annoy users), but here’s an example of how to do that:

jQuery('.eo-event-venue-map').on( 'click', function(){
    for( var mrk in eventorganiser.map[0].markers ){
        var map = eventorganiser.map[0].markers[mrk].map;
        var zoom = map.getZoom();
        map.setZoom(zoom+1);
        break;
    }
});

However, since Event Organiser’s use of maps is solely to display selected venues, I think in this instance it would be simpler to use your own google map instance.

[Author]

Posts