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