Omphaloskepsis/.page-experience-by-locations.php

<?php
   /**
	* The template for displaying archive pages.
	*
	* @subpackage Omphaloskepsis
	* @since Omphaloskepsis 1.0
	*/
?>

<?php get_header(); ?>

<?php	$loop = new WP_Query( $args ); ?>    
<header class="entry-content tile location-block">
   <div class="post-header-title">
		<h1 id="page-title">Experience</h1>
		<h2 id="page-subtitle">by location</h2>
		<?php
		while ( have_posts() ) :
			the_post();
			?>
		<div class="entry-content" id="taxonomy-description">
			<?php the_content(); ?>
		<div>
			<a class="hyperlink-button" href="?view=countries">Countries</a>
			<!--<a class="hyperlink-button" href="?view=regions">Regions</a>-->
			<a class="hyperlink-button" href="?view=locations">Locations</a>
		</div>
		</div>
		<?php endwhile; ?>
   </div>
</header>

<?php
   $locations = get_terms( 'location', array( 'hide_empty' => 0 ) );
   // Gets all of the top-level location terms.
$terms = get_terms(
	array(
		'taxonomy' => 'location',
		'term_args' => array( 'parent' => 0 ),
	)
);
?>

<div id="primary" class="content-area">
   <main id="company-main" class="site-main" role="main">
		<div class="row">
		<div id="map" style="height:100vh; width:100%;"></div>
		</div>
		<?php if ( ! empty( $locations ) ) : ?> 
			<?php if ( $_GET['view'] == 'countries' ) : ?>
				<?php
				$locationsSubset = array_filter(
					$locations,
					function ( $t ) {
						return $t->parent != 0 && get_term( $t->parent, 'location' )->parent == 0;
					}
				);
				?>
		<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
		<script type="text/javascript">
			google.charts.load('current', {'packages':['geochart']});
			google.charts.setOnLoadCallback(drawMap);
			
			function drawMap() {
			var data = google.visualization.arrayToDataTable([
				['Country'],
				<?php foreach ( (array) $locationsSubset as $term ) : ?>
				['<?php echo $term->description; ?>'],
			<?php endforeach; ?>
			]);
			var options = {};
			var chart = new google.visualization.GeoChart(document.getElementById('map'));
			
			chart.draw(data, options);
			}
		</script>
		<?php elseif ( $_GET['view'] == 'locations' ) : ?>
			<?php
			$locationsSubset = array_filter(
				$locations,
				function ( $t ) {
					return $t->parent != 0 && get_term( $t->parent, 'location' )->parent != 0 && get_term( get_term( $t->parent, 'location' )->parent, 'location' )->parent != 0 && get_term( get_term( get_term( $t->parent, 'location' )->parent, 'location' )->parent, 'location' )->parent == 0;
				}
			);
			?>
		<script type="text/javascript">
			var locations = [
			<?php foreach ( (array) $locationsSubset as $term ) : ?>
			{<?php echo $term->description; ?>},
			<?php endforeach; ?>
			]
			
			function initMap() {
			var map = new google.maps.Map(document.getElementById('map'), {
				zoom: 3,
				center: {lat: 51.483462, lng: 0.0586198}
			});
			
			// Create an array of alphabetical characters used to label the markers.
			var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
			
			// Add some markers to the map.
			// Note: The code uses the JavaScript Array.prototype.map() method to
			// create an array of markers based on a given "locations" array.
			// The map() method here has nothing to do with the Google Maps API.
			var markers = locations.map(function(location, i) {
				return new google.maps.Marker({
			position: location,
			label: labels[i % labels.length]
				});
			});
			
			// Add a marker clusterer to manage the markers.
			var markerCluster = new MarkerClusterer(map, markers, {
				imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
			});
			}
		</script>
		<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBsMPnuCM59sC_n11CGxbpbqNY7FRUXnD0&callback=initMap"></script>
		<?php endif; ?>
		<?php endif; ?>
   </main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_footer(); ?>