From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 1 May 2018 19:00:26 +0000 (-0400)
Subject: drawing line between markers for distance measuring
X-Git-Tag: v1.0.0^2~12
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=4a10ebdb2b86c760335d285a1f681d1f2f84db64;p=WP-Themes%2Fdiscoverkalamazoo2018.git

drawing line between markers for distance measuring
---

diff --git a/sections/brewery-map.php b/sections/brewery-map.php
index 828e420..54ff27f 100644
--- a/sections/brewery-map.php
+++ b/sections/brewery-map.php
@@ -11,11 +11,12 @@
 
 <?php $url = get_stylesheet_directory_uri(). '/assets/markers/'; ?>
 <script>
+    var map;
     function initMap() {
         // Styles a map in night mode.
         var url = '<?php echo $url ?>';
         console.log(url);
-        var map = new google.maps.Map(document.getElementById('brewery-map'), {
+        map = new google.maps.Map(document.getElementById('brewery-map'), {
             center: {lat: 42.2903325, lng: -85.5853277	},
             zoom: 14,
             styles: [
@@ -234,6 +235,23 @@
             strokeWeight:2,
             map:map
         });
+        var distancePath = new google.maps.Polyline();
+        function drawLine(point1, point2) {
+            
+            var coordinates = [point1,point2];
+
+            distancePath.setMap(null);
+
+            distancePath = new google.maps.Polyline({
+                path: coordinates,
+                geodesic: true,
+                strokeColor: '#91311D',
+                strokeOpacity: 1.0,
+                strokeWeight: 2
+            });
+
+            distancePath.setMap(map);
+        }
         function getMiles(i) {
             return i*0.000621371192;
         }
@@ -397,12 +415,11 @@
                 
             
                 compare.push(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
-                var current = feature.position;
                 if(compare.length >= 2){
                     // console.log(`${previous}, ${current}`)
                     distance = `<div class="distance-marker"><span class="marker-label">Distance:</span> ${Math.round(convertMetersToFeet(google.maps.geometry.spherical.computeDistanceBetween(last(compare), compare[compare.length - 2] ) ) * 10) / 10} Miles</div>`;
                     // console.log(distance)
-
+                    drawLine(last(compare),compare[compare.length - 2])
                 } else {
                     distance = '';
                 }