Toggle Wordpress Locations on a google map using ACF - wordpress

Question

I'm building a website with a page that shows all locations (Custom Post Type) on a Google map. I use ACF (Advanced Custom Fields) to add the map location to the specific location. Furthermore I give each location a category (Parking, Hotel, ect.).
At this point all locations are show on the map correctly. But I'm trying to find a way to toggle these locations based on their category. So initially I want to hide all markers on the map and toggle their visibility based on a click (anchor or checkbox, doesn't matter).
I did see some answers that looked promising, but I can't figure this out with the code provided by ACF. I hope someone can help me with this. And can tell me where to add some extra code to setvisibility and toggle this based on a category select.
The code provide by ACF is shown below:
<script type="text/javascript">
(function($) {
/*
* new_map
*
* This function will render a Google Map onto the selected jQuery element
*
* #type function
* #date 8/11/2013
* #since 4.3.0
*
* #param $el (jQuery element)
* #return n/a
*/
function new_map( $el ) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( $el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker( $(this), map );
});
// center map
center_map( map );
// return
return map;
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* #type function
* #date 8/11/2013
* #since 4.3.0
*
* #param $marker (jQuery element)
* #param map (Google Map object)
* #return n/a
*/
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
/*
* center_map
*
* This function will center the map, showing all markers attached to this map
*
* #type function
* #date 8/11/2013
* #since 4.3.0
*
* #param map (Google Map object)
* #return n/a
*/
function center_map( map ) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){
var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
bounds.extend( latlng );
});
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}
}
/*
* document ready
*
* This function will render each map when the document is ready (page has loaded)
*
* #type function
* #date 8/11/2013
* #since 5.0.0
*
* #param n/a
* #return n/a
*/
// global var
var map = null;
$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});
})(jQuery);
</script>
The code that renders my markers is as follows:
<div class="acf-map">
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php
$location = get_field('google_maps_adres');
if( !empty($location) ):
?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4 class="marker__title"><?php the_title(); ?></h4>
<div class="marker__address">
<?php $contact_address = get_field('google_maps_adres');$address = explode( "," , $contact_address['address']); ?>
<div class="marker__address-street"><?php echo $address[0].', ';?></div>
<div class="marker__address-city"><?php echo $address[1];?></div>
</div>
<a class="marker__link" href="<?php the_permalink();?>">Meer informatie</a>
</div>
<?php endif; ?>
<?php endwhile;?>
<?php wp_reset_postdata(); ?>
</div>

Answer 1

I could help with this but maybe it's already answered here. Take a look and try the solution proposed there. If that doesn't work for you let me know and we can work it together ;)
EDIT:
Ok, let´s try to do this then. First of all you need to distinguish each marker, with a class or an ID. Let's do it with classes since we are using the categories and each marker can belong to several categories.
Change your code as follows:
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php $cats = get_the_category(); //this gives me the categories of the post (marker) ?>
<?php $catsString = implode(", ",$cats); // this gives me the categories as a String separated with ", " ?>
<?php
$location = get_field('google_maps_adres');
if( !empty($location) ):
?>
<div class="marker <?php echo $catsString; ?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4 class="marker__title"><?php the_title(); ?></h4>
<div class="marker__address">
<?php $contact_address = get_field('google_maps_adres');$address = explode( "," , $contact_address['address']); ?>
<div class="marker__address-street"><?php echo $address[0].', ';?></div>
<div class="marker__address-city"><?php echo $address[1];?></div>
</div>
<a class="marker__link" href="<?php the_permalink();?>">Meer informatie</a>
</div>
<?php endif; ?>
<?php endwhile;?>
All I've done is for each marker get the categories and used them as classes for the main marker container.
Now you have all your markers with their classes set. That's good. The next step is to use some input to control the visibility of those markers. Let's use a checkbox for example.
For each category you should have a checkbox:
<?php $categories = get_categories();
foreach( $categories as $category ) {
echo '<label><input class="markerToggle" type="checkbox" id="'. $category->name .'">'. $category->name .'</label>';
}
?>
Then you would need some simple Javascript to hide/show each marker
$('.markerToggle').change(function() {
if($(this).is(":checked")) {
//'checked' event code
$('.marker.' + this.id).show();
return;
}
$('.marker.' + this.id).hide();
//'unchecked' event code
});