From 8d016179d1e1d681fe1af0a2281afcc3bcc9a4cc Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Tue, 20 Aug 2019 14:31:43 -0400
Subject: [PATCH] updating the brewery map to use google maps

switching the brewery map to use google maps instead of leaflet
---
 parts/header-meta.php    |   2 +-
 sections/brewery-map.php | 613 +++++++++++++++++++++++++--------------
 style.css                |   2 +-
 3 files changed, 392 insertions(+), 225 deletions(-)

diff --git a/parts/header-meta.php b/parts/header-meta.php
index 410b873..05f1ed3 100644
--- a/parts/header-meta.php
+++ b/parts/header-meta.php
@@ -3,7 +3,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><?php wp_title(); ?></title>
     <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/animate.min.css">
-    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/app.css?v=1.0.31">
+    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/app.css?v=1.0.32">
     <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri() ; ?>/assets/favicon.ico">
     <link href='https://fonts.googleapis.com/css?family=Montserrat:400,400italic,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="https://use.typekit.net/vqf0bqy.css">
diff --git a/sections/brewery-map.php b/sections/brewery-map.php
index 93e6d60..1c10fb1 100644
--- a/sections/brewery-map.php
+++ b/sections/brewery-map.php
@@ -5,233 +5,272 @@
 </div>
 <div class="row">
     <div id="member-breweries" class="small-12 large-8 columns no-float">
-        <div id="LeafletMapContainer"></div>
         <?php echo do_shortcode('[glm-members-list category="23" view="no-map"]'); ?>
     </div>
 </div>
 
 <?php $url = get_stylesheet_directory_uri(). '/assets/markers/'; ?>
-<?php $plugin_url = plugin_dir_url('glm-member-db') . 'glm-member-db/js'; ?>
-<!-- <script src="https://maps.googleapis.com/maps/api/js?place=Kalamazoo,+MI&amp;key=AIzaSyCBFqeBtlAGoVcpFBa5Ldrb1QajYnbCrac&amp;callback=initMap&amp;libraries=geometry" async="" defer=""></script> -->
-
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
-<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
-<link rel="stylesheet" href="<?php echo $plugin_url; ?>/LeafletMarkerCluster/dist/MarkerCluster.Default.css" />
-<script src="<?php echo $plugin_url; ?>/LeafletMarkerCluster/dist/leaflet.markercluster-src.js"></script>
-<link rel="stylesheet" href="<?php echo $plugin_url; ?>/Leaflet.loading/src/Control.Loading.css" />
-<script src="<?php echo $plugin_url; ?>/Leaflet.loading/src/Control.Loading.js"></script>
-<script src="<?php echo get_template_directory_uri(); ?>/js/leaflet.geometryutil.js"></script>
 <script>
-    var leafletMap;
+    var map;
     function initMap() {
-
-        // var distancePath = new google.maps.Polyline();
-        
         // Styles a map in night mode.
         var url = '<?php echo $url ?>';
-        leafletMap = L.map('brewery-map', {
-            center: [42.2903325, -85.5853277],
-            zoom: 14
-        });
-        var leafletTileServer = 'https://maps.gaslightmedia.com/08172018-4c95c314f0934e680190f27ef99c6dcc/{z}/{x}/{y}.png';
-        var leafletMinZoom = 3;
-        var leafletMaxZoom = 19;
-
-
-        // Loading features
-        // var loadingControl = L.Control.loading({
-        //     separate: true,
-        //     delayIndicator: 500
-        // });
-        // leafletMap.addControl(loadingControl);
-        
-        // Init Map
-        L.tileLayer(leafletTileServer, {
-            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>',
-            minZoom: leafletMinZoom,
-            maxZoom: leafletMaxZoom,
-            id: 'nothot'
-        }).addTo(leafletMap);
 
-        // add border around the downtown coordinates
+        map = new google.maps.Map(document.getElementById('brewery-map'), {
+            center: {lat: 42.2903325, lng: -85.5853277	},
+            zoom: 14,
+            styles: [
+                {
+                    "featureType": "administrative.neighborhood",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#a3a470"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "landscape.man_made",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#eec081"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "landscape.natural",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#eec081"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "landscape.natural.landcover",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#eec081"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "landscape.natural.terrain",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#eec081"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.attraction",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.attraction",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.business",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.business",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.government",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.government",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.medical",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.medical",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.park",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#a3a470"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.place_of_worship",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.place_of_worship",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.school",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#a3a470"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.school",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "poi.sports_complex",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#bb8f63"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "road.highway",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#ffffff"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "road.highway",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#ffffff"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "transit.line",
+                    "elementType": "geometry.stroke",
+                    "stylers": [
+                    {
+                        "color": "#9b321b"
+                    }
+                    ]
+                },
+                {
+                    "featureType": "water",
+                    "elementType": "geometry.fill",
+                    "stylers": [
+                    {
+                        "color": "#728890"
+                    }
+                    ]
+                }
+            ]
+        });
         var downtown = [
-          [42.295482,  -85.578543],
-          [42.294493,  -85.590343],
-          [ 42.288731,  -85.597809],
-          [ 42.288811,  -85.579227],
-          [ 42.295482,  -85.578543],
+          {lat: 42.295482, lng: -85.578543},
+          {lat: 42.294493, lng: -85.590343},
+          {lat: 42.288731, lng: -85.597809},
+          {lat: 42.288811, lng: -85.579227},
+          {lat: 42.295482, lng: -85.578543},
         ];
-        var polyline = L.polyline(downtown, {color: '#91311D', weight: 2}).addTo(leafletMap);
+        var poly = new google.maps.Polyline({
+            path:downtown,
+            strokeColor: '#91311D',
+            strokeOpacity: 2.0,
+            strokeWeight:2,
+            map:map
+        });
+        poly.setMap(map);
+        var distancePath = new google.maps.Polyline();
+        function drawLine(point1, point2) {
+            
+            var coordinates = [point1,point2];
 
-        // markers for each of the breweries
-        var brewers = [
-            {
-                position: [42.295573, -85.571195],
-                brewery: 'Arcadia Brewing Co',
-                address: '701 E Michigan Ave, Kalamazoo, MI 49007',
-                contact: '(269) 276-0458',
-                website: "http://arcadiaales.com/",
-                icon: 'arcadia.png',
-        
-                }, {
-                position: [42.2947, -85.5789],
-                brewery: "Bell’s Eccentric Cafe",
-                address: '355 E Kalamazoo Ave, Kalamazoo, MI 49007',
-                contact: '(269) 382-2332',
-                website: 'https://www.bellsbeer.com/',
-                icon: 'bells.png',
-                }, {
-                position: [42.291180, -85.589856],
-                brewery: 'Gonzo’s BiggDog Brewing',
-                address: '140 S Westnedge Ave, Kalamazoo, MI 49007',
-                contact: '(269) 382-2739',
-                website: 'http://gonzosbiggdoggbrewing.com/',
-                icon: 'gonzo.png'
-                }, {
-                position: [42.291812, -85.581529],
-                brewery: 'Olde Peninsula Brewpub',
-                address: '200 E Michigan Ave, Kalamazoo, MI 49007',
-                contact: '(269) 343-2739',
-                website: 'http://oldepenkazoo.com/',
-                icon: 'olde.png'
-                }, {
-                position: [42.290428, -85.594139],
-                brewery: 'Rupert’s Brew House',
-                address: '773 W Michigan Ave, Kalamazoo, MI 49007',
-                contact: '(269) 337-9911',
-                website: 'http://www.rupertsbrewhouse.com/',
-                icon: 'rupert.png'
-                }, {
-                position: [42.288456, -85.583898],
-                brewery: 'Tibbs Brewing Co.',
-                address: '402 S Burdick St, Kalamazoo, MI 49007',
-                contact: '(877) 762-7397',
-                website: 'http://tibbsbrewing.com/',
-                icon: 'tibbs.png'
-                }, {
-                position: [42.302854, -85.577619],
-                brewery: 'Boatyard Brewing Co',
-                address: '432 E Paterson St, Kalamazoo, MI 49009',
-                contact: '(269) 226-0300',
-                website: 'https://boatyardbrewing.com/',
-                icon: 'boatyard.png'
-                }, {
-                position: [42.281642, -85.582770],
-                brewery: 'Brite Eyes Brewing',
-                address: '1156 S Burdick St A, Kalamazoo, MI 49001',
-                contact: '(269) 220-5001',
-                website: 'http://briteeyesbrewingco.com/',
-                icon: 'brite.png'
-                }, {
-                position: [42.205118, -85.560470],
-                brewery: 'Latitude 42 Brewing Co.',
-                address: '7842 Portage Rd, Portage, MI 49002',
-                contact: '(269) 459-4242',
-                website: 'https://latitude42brewingco.com/',
-                icon: 'latitude.png'
-                }, {
-                position: [42.248718, -85.559042],
-                brewery: 'One Well Brewing',
-                address: '4213 Portage Street, Kalamazoo, MI 49001',
-                contact: '(269) 459-9240',
-                website: 'http://onewellbrewing.com/',
-                icon: 'one.png'
-                }, {
-                position: [42.204832, -85.686902],
-                brewery: 'Texas Corners Brewery',
-                address: '6970 Texas Dr, Kalamazoo, MI 49009',
-                contact: '(269) 870-7724',
-                website: 'http://texascornersbrewing.com/',
-                icon: 'texas.png'
-                }, {
-                position: [42.121430, -85.533167],
-                brewery: 'Distant Whistle Brewhouse',
-                address: '118 S Main St, Vicksburg, MI 49097',
-                contact: '(269) 475-5447',
-                website: 'http://www.distantwhistle.com/',
-                icon: 'distant.png'
-                }, {
-                position: [42.2716, -85.6307],
-                brewery: 'Bilbo’s Pizza in a Pan',
-                address: '3307 Stadium Dr, Kalamazoo, MI 49008',
-                contact: '(269) 382-5544',
-                website: 'http://www.bilbospizza.com/',
-                icon: 'bilbos.png'
-                }, {
-                position: [42.239304, -85.560769],
-                brewery: 'Bravo! Restaurant & Cafe',
-                address: '5402 Portage Rd, Portage, MI 49002',
-                contact: '(269) 344-7700',
-                website: 'https://bravokalamazoo.com/',
-                icon: 'bravo.png'
-                }, {
-                position: [42.296176,  -85.582958],
-                brewery: 'Final Gravity Brewing Co',
-                address: '246 N Burdick St, Kalamazoo, MI 49007',
-                contact: '(269) 350-5136',
-                website: 'https://www.finalgravitybrew.com/',
-                icon: 'final.png'
-            },{
-                position: [42.314597, -85.538995],
-                brewery: 'Wax Wings Brewing Co',
-                address: '3480 Gull Rd, Kalamazoo, MI 49048',
-                contact: '(269) 459-9494',
-                website: 'https://waxwingsbrewing.com/',
-                icon: 'waxwings.png'
-            },
-        ];
-        var previous, distance, path, compare = [];
-        brewers.forEach(function(brewer){
-            let info = `<div class="marker-title">${brewer.brewery}</div><div>${brewer.address}</div><div>${brewer.contact}</div><div><a href="${brewer.website}">${brewer.website}</a></div>`;
+            distancePath.setMap(null);
 
-            var breweryIcon = L.icon({
-                iconUrl: url+brewer.icon,
-                iconSize: [65, 95],
-                iconAnchor: [22, 94],
-                popupAnchor: [-3, -76],
-                shadowSize: [68, 95],
-                shadowAnchor: [22, 94]
+            distancePath = new google.maps.Polyline({
+                path: coordinates,
+                geodesic: true,
+                strokeColor: '#91311D',
+                strokeOpacity: 1.0,
+                strokeWeight: 2
             });
-            var leafletMarker = L.marker(
-                [brewer.position[0], brewer.position[1]], 
-                { 
-                    title:  brewer.brewery,
-                    icon: breweryIcon
-                }
-            )
-            .addTo(leafletMap)
-            .bindPopup(info)
-            .on('click', function(e){
-                let lat = e.latlng.lat;
-                let lng = e.latlng.lng;
-                compare.push(L.latLng(e.latlng.lat, e.latlng.lng) );
-                if(compare.length >= 2){
-                    // console.log(L.GeometryUtil. distance(leafletMap,last(compare), compare[compare.length - 2] ))
-                    distance = `<div class="distance-marker"><span class="marker-label">Distance:</span> ${convertMetersToFeet(L.GeometryUtil.length([last(compare), compare[compare.length - 2]] ) ).toFixed(2)} Miles</div>`;
-                    this._popup.setContent(info + distance)
-                 
-                    drawLine(last(compare),compare[compare.length - 2]);
-                    
-                } else {
-                    distance = '';
-                }
-                })
-        });
+
+            distancePath.setMap(map);
+        }
         function getMiles(i) {
-            return i * 0.00018939;
-        };
+            return i*0.000621371192;
+        }
         function convertMetersToFeet(meters) {
             if (meters < (0)) {
                 return 'input cannot be less than zero'; 
             } else {
-                if(getMiles((meters / 0.3048)) <= 0){
-                    return `< 1 mile`;
-                }else{
-                    return getMiles((meters / 0.3048));
-                }
-                
+                return getMiles((meters/0.3048));
             }
-        };
+        }
         last =  function(array, n) {
             if (array == null) 
                 return void 0;
@@ -239,23 +278,151 @@
                 return array[array.length - 1];
             return array.slice(Math.max(array.length - n, 0));  
         };
-        let prev;
-        function drawLine(point1, point2) {
-            let distancePath;
-            let p1 = [point1.lat, point1.lng];
-            let p2 = [point2.lat, point2.lng];
-            let coordinates = [p1,p2];
-            if(prev){
-                leafletMap.removeLayer(prev);
-            }
+        // Get the path form polyLine
+        
+
+        var brewers = [
+            {
+            position: new google.maps.LatLng(42.295573, -85.571195),
+            brewery: 'Arcadia Brewing Co',
+            address: '701 E Michigan Ave, Kalamazoo, MI 49007',
+            contact: '(269) 276-0458',
+            website: "http://arcadiaales.com/",
+            icon: 'arcadia.png',
+    
+            }, {
+            position: new google.maps.LatLng(42.2947, -85.5789),
+            brewery: "Bell’s Eccentric Cafe",
+            address: '355 E Kalamazoo Ave, Kalamazoo, MI 49007',
+            contact: '(269) 382-2332',
+            website: 'https://www.bellsbeer.com/',
+            icon: 'bells.png',
+            }, {
+            position: new google.maps.LatLng(42.291180, -85.589856),
+            brewery: 'Gonzo’s BiggDog Brewing',
+            address: '140 S Westnedge Ave, Kalamazoo, MI 49007',
+            contact: '(269) 382-2739',
+            website: 'http://gonzosbiggdoggbrewing.com/',
+            icon: 'gonzo.png'
+            }, {
+            position: new google.maps.LatLng(42.291812, -85.581529),
+            brewery: 'Olde Peninsula Brewpub',
+            address: '200 E Michigan Ave, Kalamazoo, MI 49007',
+            contact: '(269) 343-2739',
+            website: 'http://oldepenkazoo.com/',
+            icon: 'olde.png'
+            }, {
+            position: new google.maps.LatLng(42.290428, -85.594139),
+            brewery: 'Rupert’s Brew House',
+            address: '773 W Michigan Ave, Kalamazoo, MI 49007',
+            contact: '(269) 337-9911',
+            website: 'http://www.rupertsbrewhouse.com/',
+            icon: 'rupert.png'
+            }, {
+            position: new google.maps.LatLng(42.288456, -85.583898),
+            brewery: 'Tibbs Brewing Co.',
+            address: '402 S Burdick St, Kalamazoo, MI 49007',
+            contact: '(877) 762-7397',
+            website: 'http://tibbsbrewing.com/',
+            icon: 'tibbs.png'
+            }, {
+            position: new google.maps.LatLng(42.302854, -85.577619),
+            brewery: 'Boatyard Brewing Co',
+            address: '432 E Paterson St, Kalamazoo, MI 49009',
+            contact: '(269) 226-0300',
+            website: 'https://boatyardbrewing.com/',
+            icon: 'boatyard.png'
+            }, {
+            position: new google.maps.LatLng(42.281642, -85.582770),
+            brewery: 'Brite Eyes Brewing',
+            address: '1156 S Burdick St A, Kalamazoo, MI 49001',
+            contact: '(269) 220-5001',
+            website: 'http://briteeyesbrewingco.com/',
+            icon: 'brite.png'
+            }, {
+            position: new google.maps.LatLng(42.205118, -85.560470),
+            brewery: 'Latitude 42 Brewing Co.',
+            address: '7842 Portage Rd, Portage, MI 49002',
+            contact: '(269) 459-4242',
+            website: 'https://latitude42brewingco.com/',
+            icon: 'latitude.png'
+            }, {
+            position: new google.maps.LatLng(42.248718, -85.559042),
+            brewery: 'One Well Brewing',
+            address: '4213 Portage Street, Kalamazoo, MI 49001',
+            contact: '(269) 459-9240',
+            website: 'http://onewellbrewing.com/',
+            icon: 'one.png'
+            }, {
+            position: new google.maps.LatLng(42.204832, -85.686902),
+            brewery: 'Texas Corners Brewery',
+            address: '6970 Texas Dr, Kalamazoo, MI 49009',
+            contact: '(269) 870-7724',
+            website: 'http://texascornersbrewing.com/',
+            icon: 'texas.png'
+            }, {
+            position: new google.maps.LatLng(42.121430, -85.533167),
+            brewery: 'Distant Whistle Brewhouse',
+            address: '118 S Main St, Vicksburg, MI 49097',
+            contact: '(269) 475-5447',
+            website: 'http://www.distantwhistle.com/',
+            icon: 'distant.png'
+            }, {
+            position: new google.maps.LatLng(42.2716, -85.6307),
+            brewery: 'Bilbo’s Pizza in a Pan',
+            address: '3307 Stadium Dr, Kalamazoo, MI 49008',
+            contact: '(269) 382-5544',
+            website: 'http://www.bilbospizza.com/',
+            icon: 'bilbos.png'
+            }, {
+            position: new google.maps.LatLng(42.239304, -85.560769),
+            brewery: 'Bravo! Restaurant & Cafe',
+            address: '5402 Portage Rd, Portage, MI 49002',
+            contact: '(269) 344-7700',
+            website: 'https://bravokalamazoo.com/',
+            icon: 'bravo.png'
+            }, {
+            position: new google.maps.LatLng(42.296176,  -85.582958),
+            brewery: 'Final Gravity Brewing Co',
+            address: '246 N Burdick St, Kalamazoo, MI 49007',
+            contact: '(269) 350-5136',
+            website: 'https://www.finalgravitybrew.com/',
+            icon: 'final.png'
+            },
+        ];
+        
+        // Create markers.
+        var infowindow = new google.maps.InfoWindow();
+        var previous, distance, path, compare = [];
+        
+        brewers.forEach(function(feature) {
             
-            distancePath = L.polyline(coordinates, {
-                color: '#91311D',
+            // console.log(path)
+            let info = `<div class="marker-title">${feature.brewery}</div><div>${feature.address}</div><div>${feature.contact}</div><div><a href="${feature.website}">${feature.website}</a></div>`;
+            var marker = new google.maps.Marker({
+                position: feature.position,
+                icon: url+feature.icon,
+                map: map,
+                html: `<img src="${url}${feature.icon}"/>`
             });
-            distancePath.addTo(leafletMap);
-            prev = distancePath;
-        }
-    }
-    initMap();
-</script>
 
+            // Add a click listener for this marker
+            marker.addListener('click', function(event) {
+                compare.push(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
+                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>`;
+    
+                    drawLine(last(compare),compare[compare.length - 2])
+                } else {
+                    distance = '';
+                }
+                infowindow.setOptions({
+                        content: info + `${distance}`
+                });
+                infowindow.open(map,this);
+            });
+        });
+    }
+//     </script>
+<script src="https://maps.googleapis.com/maps/api/js?place=Kalamazoo,+MI&amp;key=AIzaSyBI5cGUyyZdQOUPCa2I5mvjyOZKSDoijro&amp;callback=initMap&amp;libraries=geometry" async="" defer=""></script>
\ No newline at end of file
diff --git a/style.css b/style.css
index ef719ad..8a142a8 100644
--- a/style.css
+++ b/style.css
@@ -3,5 +3,5 @@ Theme Name: Discover Kalamazoo 2018
 Author: Gaslight Media
 Author URI: http://www.gaslightmedia.com
 Description: A theme for Discover Kalamazoo
-Version: 1.0.31
+Version: 1.0.32
 */
-- 
2.17.1