Search Nearby Venues instead of Events

[Matt Gray]

Hi,

@Nico once answered this topic with an ideal shortcode to map venues: https://theeventscalendar.com/support/forums/topic/map-view-show-venues-instead-of-events/

However, how do you add a location search to it so that the user can find a venue near them (which if you then click it, it’d show the available classes?

Thanks!
Matt

[Cliff]

Hi, Matt.

I appreciate your question and the desire to customize it for your use. However, we cannot provide additional in-depth customizations for this topic/snippet.

If you have some of your own code that you’d like me to put some eyes on or something else I can help you with, please update this ticket or create a new ticket if it’s a separate issue.

Thank you very much for your understanding.

If you need some coding help, you may want to ask your developer or reference our documentation and list of known customizers.

[Matt Gray]

Hi Cliff,

Thanks for having a quick look – I seem to have got most of the way myself here: http://aquaphysical.com/find-venue/ using the code below…

/* Tribe [tribe_venue_map] shortcode sample */
function tribe_venue_map_logic ( $atts ){
     
    $url = apply_filters( 'tribe_events_google_maps_api', 'https://maps.google.com/maps/api/js' );
    $url = $url . '&callback=tribe_venue_map';
 
    wp_enqueue_script( 'tribe_events_google_maps_api', $url, array(), false, true );
    wp_enqueue_script( 'jquery' );
 
    add_action('wp_footer', function () {  ?> 
        <style>
            #tribe-venue-map {
                width: 100%;
                height: 600px;
            }
        </style>
        <script>
        function tribe_venue_map() {
 
            var map = new google.maps.Map(document.getElementById('tribe-venue-map'), {
                center: {lat: 51.507368, lng: -0.128142},
                zoom: 12,
				scrollwheel: false
			});
			
 
            <?php
 
            $venues = get_posts( array( 'post_type' => Tribe__Events__Main::VENUE_POST_TYPE, 'posts_per_page' => -1) );
 
            foreach ( $venues as $venue ) {
 
                $coordinates = tribe_get_coordinates ( $venue->ID );
				$address = tribe_get_full_address ( $venue->ID );
				

 
                if ( $coordinates['lat'] != 0 && $coordinates['lng'] != 0 ) { ?>
 
                    window['marker_' + <?php echo $venue->ID; ?>] = new google.maps.Marker({
                        position: {lat: <?php echo $coordinates['lat']; ?>, lng: <?php echo $coordinates['lng']; ?>},
                        map: map,
                        title: "<?php echo $venue->post_title; ?>",						   
						 icon: {
						url: "http://aquaphysical.com/wp-content/uploads/2017/08/pin2.png",
						scaledSize: new google.maps.Size(40, 53)
					}  
						   
						   
                    });
 
						   
						   
						   
						   var contentString = '<div id="infocontent">'+
            '<h3 class="venueHeading"><a href="<?php echo esc_url( tribe_get_venue_link( $venue->ID, false ) ); ?>"><?php echo $venue->post_title; ?></a></h3>'+
            '<div id="bodyContent">'+
            '<p><?php echo esc_html( tribe_get_event_meta( $venue->ID, '_VenueAddress', true ) ) ; ?></p>'+
            '<p><?php echo esc_html( tribe_get_event_meta( $venue->ID, '_VenueCity', true ) ) ; ?></p>'+
            '<p><?php echo esc_html( tribe_get_event_meta( $venue->ID, '_VenueZip', true ) ) ; ?></p>'+
            '<p><?php echo esc_html( tribe_get_event_meta( $venue->ID, '_VenueCountry', true ) ) ; ?></p>'+
            '<p class="infophone"><strong>Phone: </strong><?php echo esc_html( tribe_get_event_meta( $venue->ID, '_VenuePhone', true ) ) ; ?></p>'+
            '<p class="infowebsite"><strong>Website: </strong><a href="<?php echo esc_html( tribe_get_event_meta( $venue->ID, '_VenueURL', true ) ) ; ?>" target="_blank">view venue website</a></p>'+
            '<div class="fusion-button-wrapper fusion-alignleft"><a class="fusion-button button-flat fusion-button-square button-large button-default button-2" target="_self" href="<?php echo esc_url( tribe_get_venue_link( $venue->ID, false ) ); ?>"><span class="fusion-button-text">view available classes</span><i class="fa fa-angle-right button-icon-right"></i></a></div>'+
            '</div>'+
            '</div>';
						   
						   
						   
                    window['info_' + <?php echo $venue->ID; ?>] = new google.maps.InfoWindow({
                        content: contentString
					});
 
                    window['marker_' + <?php echo $venue->ID; ?>].addListener('click', function() {
                        window['info_' + <?php echo $venue->ID; ?>].open(map, window['marker_' + <?php echo $venue->ID; ?>]);
																					 });
 
                <?php 
                }
            } ?>
        }
         
        </script>
 
    <?php });
 
    return '<div id="tribe-venue-map"></div>';
 
}
add_shortcode( 'tribe_venue_map', 'tribe_venue_map_logic' );

A couple of bits however that I can’t quite work out… I want to count the total number of events at a specific venue (by venue ID i.e. $venue->ID)… and then within that, count how many within separate categories, based on the category slug… This one should be fairly straightforward but I just can’t work it out I’m afraid!

Is it also possible to display a list underneath the map of all of the venues too? If you can help me do that by ID again, then I can probably manage the rest… seems to be a few people who are looking for this from my browsing!

Cheers,
Matt

[Cliff]

That’s really neat! Thanks for sharing.

1)

To get the count of upcoming events at a specific Venue, I’d reference the code in /wp-content/plugins/events-calendar-pro/src/views/pro/single-venue.php, particularly tribe_venue_upcoming_events().

You could use the code from that function to come up with your own function to do exactly what you’d need.

2)

A list of all the venues that are also pinpoints in the map?

I think this would be quite a bit more complex based on the Ajax of the map search (if the map search does more than just recenter the map).

Either way, I’d guess you could include the event list template via getTemplateHierarchy()

Please let me know if you have any follow-up questions on this topic.

[Matt Gray]

Hi Cliff,

Thanks for this… I’ve tried referencing that function, and it’s just throwing an error (and not loading the map at all)…

I’ve added it like this:

            $venues = get_posts( array( 'post_type' => Tribe__Events__Main::VENUE_POST_TYPE, 'posts_per_page' => -1) );
			global $wp_query;

            foreach ( $venues as $venue ) {
 
                $coordinates = tribe_get_coordinates ( $venue->ID );
				$address = tribe_get_full_address ( $venue->ID );
				$countEvents = tribe_venue_upcoming_events ( $venue->ID, $wp_query->query_vars );

However echo $countEvents is offering nothing I’m afraid 🙁

Where am I going wrong with this?

Number 2 – I’m pretty sure I won’t be able to do it myself if it’s just the ones that appear on the map – it’d be more useful to me if I can just add a full list of venues underneath, but as part of this shortcode, not just adding the venue list widget beneath (as I’ll ultimately find a way to sort them by distance from an input address)… Is there an easier way to do that?

Cheers,
Matt

[Cliff]

1)

What error?

What’s the value of $venue->ID?

What’s the value of $wp_query->query_vars?

2)

I believe you’re requesting the same thing as one of our existing feature requests: https://tribe.uservoice.com/forums/195723-feature-ideas/suggestions/16804615-sort-events-by-distance

Please do add your vote there.

This allows us to gauge interest in this particular feature request, which helps us prioritize our development efforts.

Thank you.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts