Venue map?

[Emily Holton]

Hi! I’d love to create a page with a widget at the top that maps (and links to) all my venues – just like the map view of events.

Is there a somewhat straightforward way to do this? Just thought I’d ask… Thanks!

[Nico]

Hey @wheretogokiddo,

Glad to help out on this issue as well!

There’s actually no easy way of doing this, but if you have some basic coding skills and I can point you in the right direction to build this page.

Please let me know about it and we can explore some options to get this working,
Best,
Nico

[Emily Holton]

Yes I can do some basic coding so if you could point me in the right direction that would be amazing!

[Nico]

Thanks for the patience while I worked on this one!

I created a basic shortcode for this: [tribe_venue_map]. Add the code to your theme’s (or child theme’s) functions.php file and then you can put the shortcode in a new page:

/* 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: 400px;
}
</style>
<script>
function tribe_venue_map() {

var map = new google.maps.Map(document.getElementById('tribe-venue-map'), {
center: {lat: 34.5133, lng: -94.1629},
zoom: 4
});

<?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 );

if ( $coordinates['lat'] != 0 && $coordinates['lng'] != 0 ) { ?>

new google.maps.Marker({
position: {lat: <?php echo $coordinates['lat']; ?>, lng: <?php echo $coordinates['lng']; ?>},
map: map,
title: "<?php echo $venue->post_title; ?>"
});
<?php
}
} ?>
}

</script>

<?php });

return '<div id="tribe-venue-map"></div>';

}
add_shortcode( 'tribe_venue_map', 'tribe_venue_map_logic' );


The code is pretty basic, and will surely need to be adjusted but I guess it’s a pretty good starting point 🙂

Hope it helps,
Nico

[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