From c711de9201985b1e1c87b89391f4022ef3e40ece Mon Sep 17 00:00:00 2001
From: Markus Ankenbrand <markus@ankenbrand.me>
Date: Mon, 20 Feb 2017 23:06:13 +0100
Subject: [PATCH] Externalize js from template file

---
 js/page-pins-map.js | 65 +++++++++++++++++++++++++++++++++++++++++
 page-pins.php       | 71 ++-------------------------------------------
 2 files changed, 67 insertions(+), 69 deletions(-)
 create mode 100644 js/page-pins-map.js

diff --git a/js/page-pins-map.js b/js/page-pins-map.js
new file mode 100644
index 0000000..9221d92
--- /dev/null
+++ b/js/page-pins-map.js
@@ -0,0 +1,65 @@
+var places = page_pins_map.places;
+var map;
+var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['lng']) };
+var traveler = page_pins_map.traveler;
+for(var i=0; i<traveler.length; i++){
+    var opt = document.createElement('OPTION');
+    var optTxt = document.createTextNode(traveler[i]);
+    opt.appendChild(optTxt);
+    document.getElementById('travelers-select').appendChild(opt);
+}
+var markers = [];
+function initMap() {
+    markers = [];
+    map = new google.maps.Map(document.getElementById('map-stats'), {
+        center: map_center,
+        zoom: 15
+    });
+    var bounds = new google.maps.LatLngBounds();
+    for(var i = 0; i < places.length; i++){
+        var marker = new google.maps.Marker({
+            position: {lat: parseFloat(places[i]['lat']), lng: parseFloat(places[i]['lng']) },
+            title: places[i]['title'],
+            url: "/?p="+places[i]['post'],
+            traveler: places[i]['traveler'],
+            map: map
+        });
+        marker.setVisible(true);
+        markers.push(marker);
+        google.maps.event.addListener(marker, 'click', function() {
+            window.location.href = this.url;
+        });
+        bounds.extend(marker.getPosition());
+    }
+    map.fitBounds(bounds);
+    window.setTimeout(function(){
+        if(map.getZoom() > 15){
+            map.setZoom(15);
+        }
+    }, 500);
+}
+
+function filterByTravelerClick(){
+    var options = document.getElementById('travelers-select').selectedOptions;
+    var travelers = [];
+    for(var i=0; i<options.length; i++){
+        travelers.push(options[i].value);
+    }
+    filterMarkersByTravelers(travelers);
+}
+
+function filterMarkersByTravelers(travelers){
+    for(var i=0; i<markers.length; i++){
+        markers[i].setVisible(false);
+        var all_there = true;
+        for(var j=0; j<travelers.length; j++){
+            if(markers[i]['traveler'].indexOf(travelers[j]) == -1){
+                all_there = false;
+                break;
+            }
+        }
+        if(all_there){
+            markers[i].setVisible(true);
+        }
+    }
+}
\ No newline at end of file
diff --git a/page-pins.php b/page-pins.php
index f5c0bb5..89d0ccc 100644
--- a/page-pins.php
+++ b/page-pins.php
@@ -78,76 +78,9 @@
             }
         }
     endwhile;
-    var_dump($locations);
+    wp_enqueue_script('page_pins_map', get_template_directory_uri() . '/js/page-pins-map.js', array('jquery'));
+    wp_localize_script('page_pins_map', 'page_pins_map', array('places' => $locations, 'traveler' => $traveler));
 ?>
 
-<script type='text/javascript'>
-    var places = <?php echo json_encode($locations); ?>;
-    var map;
-    var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['lng']) };
-    var traveler = <?php echo json_encode(array_values($traveler)); ?>;
-    for(var i=0; i<traveler.length; i++){
-        var opt = document.createElement('OPTION');
-        var optTxt = document.createTextNode(traveler[i]);
-        opt.appendChild(optTxt);
-        document.getElementById('travelers-select').appendChild(opt);
-    }
-    var markers = [];
-    function initMap() {
-        markers = [];
-        map = new google.maps.Map(document.getElementById('map-stats'), {
-            center: map_center,
-            zoom: 15
-        });
-        var bounds = new google.maps.LatLngBounds();
-        for(var i = 0; i < places.length; i++){
-            var marker = new google.maps.Marker({
-                position: {lat: parseFloat(places[i]['lat']), lng: parseFloat(places[i]['lng']) },
-                title: places[i]['title'],
-                url: "/?p="+places[i]['post'],
-                traveler: places[i]['traveler'],
-                map: map
-            });
-            marker.setVisible(true);
-            markers.push(marker);
-            google.maps.event.addListener(marker, 'click', function() {
-                window.location.href = this.url;
-            });
-            bounds.extend(marker.getPosition());
-        }
-        map.fitBounds(bounds);
-        window.setTimeout(function(){
-            if(map.getZoom() > 15){
-                map.setZoom(15);
-            }
-        }, 500);
-    }
-
-    function filterByTravelerClick(){
-        var options = document.getElementById('travelers-select').selectedOptions;
-        var travelers = [];
-        for(var i=0; i<options.length; i++){
-            travelers.push(options[i].value);
-        }
-        filterMarkersByTravelers(travelers);
-    }
-
-    function filterMarkersByTravelers(travelers){
-        for(var i=0; i<markers.length; i++){
-            markers[i].setVisible(false);
-            var all_there = true;
-            for(var j=0; j<travelers.length; j++){
-                if(markers[i]['traveler'].indexOf(travelers[j]) == -1){
-                    all_there = false;
-                    break;
-                }
-            }
-            if(all_there){
-                markers[i].setVisible(true);
-            }
-        }
-    }
-</script>
-
 								
 <?php get_footer(); ?>
\ No newline at end of file