Custom Marker based on category

[Martino]

Hi there,
I’m looking for a way to customize the appearance of the map markers based on the event category.

Is it possibile?
I’ve no problem on poking the code a bit but I would like to know if you have some hint or if there is a best practice.

Thanks,
m.

[Barry]

Hi Martino,

We are indeed limited in terms of the level of assistance we can provide for custom development tasks, but I’ve got a few notes that might help you out, here.

The first is that the actual pin marker data can be modified via the tribe_events_ajax_response hook: by adding a filter here you can test to see if the response data includes markers then append extra information (such as if they belong to a specific category, etc):

function modify_pin_markers( array $response_data ) {
    // No markers? No need to modify
    if ( ! isset( $response_data['markers'] ) ) return $response_data;

    // Otherwise, loop through each and add your extra info
    foreach ( $response_data['markers'] as &$marker ) {
        $event_id = $marker['event_id']; // Use this to obtain more information
        $marker['custom'] = '...'; // Add your extra information here
    }

    // Return it!
    return $response_data;
}

add_filter( 'tribe_events_ajax_response', 'modify_pin_markers' );

This data is provided to map view as the result of a post request, so it’s possible that by listening for that and working with the global tribe_ev object you can manipulate things appropriately.

I hope that helps (and remember that if you see possibilities to make this easier as you work through your customization, we are receptive both to new feature requests and actual code changes via pull requests).

Thanks!

[Martino]

Hi Barry,
thanks for the reply.

I’ve some problem on finding the actual marker output code.
I’m comfortable with inspecting the code and poking around but it seems the markers are hidden someway.

Following google guidelines I should be able to target all the marker or just some specific marker:

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
  parking: {
    icon: iconBase + 'parking_lot_maps.png'
  },
  library: {
    icon: iconBase + 'library_maps.png'
  },
  info: {
    icon: iconBase + 'info-i_maps.png'
  }
};

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

but I don’t know how to link the actual Events Calendar map to that function.

Adding your code to function could be working but I’m not able to read the added info, if there are any.

I know this is quite complex: do you have any contact for a paid solution?
It’s a deal breaker with a client of mine…

Thanks!

[Barry]

Hey Martino,

I wish we could go further – but the reality is there just isn’t enough time to go into detail on topics like this one while still serving the needs of the broader community.

Beyond inspecting src/Tribe/resources/js/tribe-events-ajax-map.js for a greater understanding of how our own systems work I’m not sure that I can offer up much more guidance.

I know this is quite complex: do you have any contact for a paid solution?

Please see this advice – there are some ideas in there and of course there are lots of other places (freelance marketplaces, etc, that it doesn’t cover) that could be worth a look 🙂

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts