From 62d700a91686b70dcc2c716555cb4f2e7e74199d Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Wed, 22 Aug 2018 17:58:31 -0400
Subject: [PATCH] Replace list & detail google map code with leaflet map code

---
 glm-member-db/views/front/members/detail.html | 215 ++---
 glm-member-db/views/front/members/list.html   | 790 +++++++++++-------
 2 files changed, 568 insertions(+), 437 deletions(-)

diff --git a/glm-member-db/views/front/members/detail.html b/glm-member-db/views/front/members/detail.html
index b3b44d3..b85bac5 100644
--- a/glm-member-db/views/front/members/detail.html
+++ b/glm-member-db/views/front/members/detail.html
@@ -1,11 +1,9 @@
 {include file='front/members/header.html'}
 
-
-
 {apply_filters('glm-member-db-front-members-detail-pageTop', '', $member.id)}
 
 {if $haveMember}
-<!--        <script src="http://maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>-->
+
     {if $settings.detail_show_map}
 <!--        <div id="glm-locationMap-container" class="row">
             <div id="glm-locationMap" class="glm-map small-12 columns">(map loads here)</div>
@@ -144,23 +142,33 @@
 
                 {if $settings.detail_show_map}
                 <div id="glm-member-detail-map-wrapper" class="">
-                    <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
                     <div id="glm-locationMap-container" style="height: 140px;">
-                        <div id="glm-locationMap" class="glm-map">(map loads here)</div>
-                    </div>
-                    <div id="glm-member-detail-map-button" class="button map-button">view map</div>
-
-                        <div id="member-lat" rel="{$member.lat}"></div>
-                        <div id="member-lon" rel="{$member.lon}"></div>
-                        <form id="MemberDrivingDirectionsForm" name="MemberDrivingDirectionsForm" method="post" action="">
-                            <input type="hidden" id="MemberLocation" name="MemberLocation" value="{$member.member_name|escape}">
-                            <input type="hidden" id="MemberLat" name="MemberLat" value="{$member.lat}">
-                            <input type="hidden" id="MemberLon" name="MemberLon" value="{$member.lon}">
-                            <input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmit" name="MemberDrivingDirectionSubmit" value="Directions">
-                            <input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmitMobile" name="MemberDrivingDirectionSubmit" value="Driving Directions">
-                        </form>
+      {if $settings.selected_map_interface == 1}
+                    <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="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
+                    <script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
+                    <div id="LeafletMapContainer" style="height: 250px; width: 100%;">(map loads here)</div>
+      {/if}
+      {if $settings.selected_map_interface == 2}
+                    <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
+                    <script type="text/javascript">var enableDraggable = true;</script>
+                    <div id="glm-locationMap" class="glm-map glmgrid-small-12 glmgrid-columns">(map loads here)</div>
+      {/if}   
                 </div>
-                {/if}
+                <div id="glm-member-detail-map-button" class="button map-button">view map</div>
+
+                    <div id="member-lat" rel="{$member.lat}"></div>
+                    <div id="member-lon" rel="{$member.lon}"></div>
+                    <form id="MemberDrivingDirectionsForm" name="MemberDrivingDirectionsForm" method="post" action="">
+                        <input type="hidden" id="MemberLocation" name="MemberLocation" value="{$member.member_name|escape}">
+                        <input type="hidden" id="MemberLat" name="MemberLat" value="{$member.lat}">
+                        <input type="hidden" id="MemberLon" name="MemberLon" value="{$member.lon}">
+                        <input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmit" name="MemberDrivingDirectionSubmit" value="Directions">
+                        <input type="submit" class="button map-button text-center" id="MemberDrivingDirectionSubmitMobile" name="MemberDrivingDirectionSubmit" value="Driving Directions">
+                    </form>
+                </div>
+     {/if}
             </div>
 
 
@@ -571,17 +579,66 @@
                 $(this).html(mapBtnTxt);
             });
 
+      {if $settings.selected_map_interface == 1}    
+            
+            /*
+             *  Leaflet Map
+             *  API reference: https://leafletjs.com/reference-1.3.2.html
+             */
+
+            // Get member location if available, otherwise use this site's default locatgion
+            var myLocation = false;
+        {if $member.lat != 0 && $member.lon != 0}
+            var memberLat = {$member.lat};
+            var memberLon = {$member.lon};
+        {else}
+            var memberLat = {$settings.maps_default_lat}};
+            var memberLon = {$settings.maps_default_lon}};
+        {/if}
+
+            function initMap() {
+            
+                var leafletMap = L.map('LeafletMapContainer').setView([memberLat, memberLon], {$settings.maps_default_zoom});
+                var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
+                var leafletMinZoom = 5;
+                var leafletMaxZoom = 18;
+                var geocoder;
+
+
+                // Tile server
+                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);
+
+                var loadingControl = L.Control.loading({
+                    separate: true,
+                    delayIndicator: 500
+                });
+                leafletMap.addControl(loadingControl);
+                
+                // Marker
+                var leafletMarker = L.marker([memberLat, memberLon]).addTo(leafletMap);
+            
+            }
+        
+      {/if}
+
+      {if $settings.selected_map_interface == 2}    
+      
             /*
              * Google Maps
              *  API reference: https://developers.google.com/maps/documentation/javascript/reference
              */
 
             var myLocation = false;
-          {if $member.lat != 0 && $member.lon != 0}
+         {if $member.lat != 0 && $member.lon != 0}
             var memberlocation = new google.maps.LatLng({$member.lat}, {$member.lon});
-          {else}
+         {else}
             var memberlocation = new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon});
-          {/if}
+         {/if}
 
             function initMap() {
 
@@ -594,7 +651,7 @@
                 });
 
                 // Create a marker for this member
-             {if $member.lat != 0 && $member.lon != 0}
+         {if $member.lat != 0 && $member.lon != 0}
                 var marker = new google.maps.Marker({
                     map: map,
                     position: new google.maps.LatLng({$member.lat}, {$member.lon}),
@@ -602,120 +659,20 @@
                     animation: google.maps.Animation.DROP,
                     title: '{$member.member|escape}'
                 });
-             {/if}
-                // Don't Try HTML5 to get user geolocation
-                //if(navigator.geolocation) {
-                  //navigator.geolocation.getCurrentPosition(function(position) {
-                    //myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
-                    //var pinIcon = new google.maps.MarkerImage(
-                        //'https://maps.google.com/mapfiles/kml/shapes/man.png',
-                        //null, /* size is determined at runtime */
-                        //null, /* origin is 0,0 */
-                        //null, /* anchor is bottom center of the scaled image */
-                        //new google.maps.Size(30, 30)
-                    //);
-                    //var myMarker = new google.maps.Marker({
-                        //map: map,
-                        //position: myLocation,
-                        //draggable: false,
-                        //animation: google.maps.Animation.DROP,
-                        //title: 'My Location',
-                        //icon: pinIcon,
-                        //zIndex: 100
-                    //});
-                    //$('#glm-startLocation').attr('placeholder', 'Leave blank for your current location or enter address here.');
-                  //});
-                //}
+         {/if}
 
             }
 
             // Load map
             google.maps.event.addDomListener(window, 'load', initMap);
 
-
+      {/if}
+          
     {/if} {*detail_show_map*}
-
-//    Direction code is below, but since we're sending them offsite to google maps this is no longer necessary.
-//
-//    {if $settings.detail_show_directions}
-//
-//            var directionsDisplay;
-//            var directionsService = new google.maps.DirectionsService();
-//
-//            // Display map with route from specified location to member location
-//            function calcRoute() {
-//
-//            	// If an address was input, use that, otherwise use detected location if available
-//            	var start = $('#glm-startLocation').val();
-//                if (start == '' ) {
-//                	if (myLocation != false) {
-//                		start = myLocation;
-//                	}
-//                }
-//
-//                // If no start location available, tell user
-//                if (start == '') {
-//                	alert('No starting location. Please enter address.');
-//                	return;
-//                }
-//
-//                // Switch to directions map being visible
-//                $('#glm-directionsMap-container').removeClass('glm-hidden');
-//                $('#glm-locationMap-container').addClass('glm-hidden');
-//                $('#glm-showLocationButton').removeClass('glm-hidden');
-//
-//                // Initialize the directions map with a default center location
-//                directionsDisplay = new google.maps.DirectionsRenderer();
-//                var mapOptions = {
-//                    zoom:7,
-//                    center: memberlocation
-//                }
-//                directionsMap = new google.maps.Map(document.getElementById("glm-directionsMap"), mapOptions);
-//                directionsDisplay.setMap(directionsMap);
-//
-//                // Get directions type selected
-//                var directionsType = $('#directionsType').find(':selected').val();
-//
-//                // Specify origin and destination then get route
-//                var request = {
-//                	origin: start,
-//                    destination: memberlocation,
-//                    travelMode: google.maps.TravelMode[directionsType]
-//                };
-//                directionsService.route(request, function(result, status) {
-//                    if (status == google.maps.DirectionsStatus.OK) {
-//                        directionsDisplay.setDirections(result);
-//                        $('#directions-panel').html('');
-//                        directionsDisplay.setPanel(document.getElementById('directions-panel'));
-//                    }
-//                });
-//
-//                // Check for first map idle (completely loaded) - Check max initial zoom
-//                var mapLoadedListener = google.maps.event.addListener(directionsMap, 'idle', function() {
-//                    if (directionsMap.getZoom() > 16) {
-//                        this.setZoom(16);
-//                    }
-//                    google.maps.event.removeListener(mapLoadedListener);
-//                });
-//
-//            }
-//
-//            // Trigger route map either by button or input of address
-//            $('#glm-showDirectionsButton' ).click( function() {
-//                calcRoute();
-//            });
-//            $('#glm-startLocation' ).change( function() {
-//                calcRoute();
-//            });
-//
-//            // Switch back to member location map
-//        	$('#glm-showLocationButton').click( function() {
-//                $('#glm-directionsMap-container').addClass('glm-hidden');
-//                $('#glm-locationMap-container').removeClass('glm-hidden');
-//                $('#glm-showLocationButton').addClass('glm-hidden');
-//        	});
-//
-//    {/if} {*detail_show_directions*}
+            
+            $(window).load(function(){
+                initMap();
+            });
 
         }); // jquery
 
diff --git a/glm-member-db/views/front/members/list.html b/glm-member-db/views/front/members/list.html
index 4688e14..09d427e 100644
--- a/glm-member-db/views/front/members/list.html
+++ b/glm-member-db/views/front/members/list.html
@@ -1,8 +1,25 @@
-
 <div class="glm-member-db-list glm-member-db-{$view}-view
 {if $settings.list_map_show_opened}map-opened {else}map-closed {/if}
 {if $settings.list_show_search_filters_opened}filters-opened {else}filters-closed {/if}
 ">
+
+            {if $settings.selected_map_interface == 1} 
+                <!--  Leaflet Map -->
+                <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="{$jsUrl}/LeafletMarkerCluster/dist/MarkerCluster.Default.css" />
+                <script src="{$jsUrl}/LeafletMarkerCluster/dist/leaflet.markercluster-src.js"></script>
+                <link rel="stylesheet" href="{$jsUrl}/Leaflet.loading/src/Control.Loading.css" />
+                <script src="{$jsUrl}/Leaflet.loading/src/Control.Loading.js"></script>
+            {/if}
+            
+            {if $settings.selected_map_interface == 2}            
+                <!-- Google Map -->
+                <script src="//maps.googleapis.com/maps/api/js?&key={$settings.google_maps_api_key}"></script>
+            {/if}
+
+
+
 {include file='front/members/header.html'}
     {apply_filters('glm-member-db-front-members-list-pageTop', '')}
 <div class="glm-member-list-inner-wrapper">
@@ -115,71 +132,111 @@
 </div> <!-- glm-member-list-wrapper -->
 {/if} {*list_show_search*}
 {if $settings.list_show_map}
-    <script src="//maps.googleapis.com/maps/api/js?sensor=true&key={$settings.google_maps_api_key}"></script>
-    {apply_filters('glm-member-db-front-members-list-mapTop', '')}
-    <div id="glm-locationMap-container">
-        <div id="glm-locationMap" class="glm-map">(map loads here)</div>
-    </div>
-    {apply_filters('glm-member-db-front-members-list-mapBottom', '')}
-{/if}
-{apply_filters('glm-member-db-front-members-list-listHeaderTop', '')}
 
+        {apply_filters('glm-member-db-front-members-list-mapTop', '')}
+        <div id="glm-locationMap-container">
 
- <!-- Member information displayed in map bubbles -->
-    <div id="glm-map-bubbles-container"> <!-- endless map bubbles -->
-    {foreach $mapItems as $m}
-        <div id="map_info_{$m.id}" class="glm-hidden">
-            {apply_filters('glm-member-db-front-members-list-mapBubbleTop', '', $m.member)}
-            {if $m.logo && $settings.list_map_show_logo}
-                <div class="glm-member-list-image">
-                    <img src="{$glmPluginMediaUrl}/images/{$settings.list_map_logo_size}/{$m.logo}">
-                </div>
+            {if $settings.selected_map_interface == 1} 
+                <!--  Leaflet Map -->
+                <div id="LeafletMapContainer" style="height: 400px; width: 100%; border: 1px black solid; z-index: +0;"></div>
             {/if}
-            <div class="glm-map-member-name">
-                {if $settings.list_map_show_detaillink && !$m.has_no_profile}
-                    <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/{if $settings.enable_multiple_profiles}{$m.id}/{/if}">{$m.member_name}</a>
-                {else}
-                    {$m.member_name}
+            
+            {if $settings.selected_map_interface == 2}            
+                <!-- Google Map -->
+                <div id="glm-locationMap" class="glm-map">(map loads here)</div>
+            {/if}
+
+        </div>
+        {apply_filters('glm-member-db-front-members-list-mapBottom', '')}
+    {/if}
+    {apply_filters('glm-member-db-front-members-list-listHeaderTop', '')}
+
+
+     <!-- Member information displayed in map bubbles -->
+    <div id="glm-map-bubbles-container"> <!-- endless map bubbles -->
+        {foreach $mapItems as $m}
+            <div id="map_info_{$m.id}" class="glm-hidden">
+                {apply_filters('glm-member-db-front-members-list-mapBubbleTop', '', $m.member)}
+                {if $m.logo && $settings.list_map_show_logo}
+                    <div class="glm-member-list-image">
+                        <img src="{$glmPluginMediaUrl}/images/{$settings.list_map_logo_size}/{$m.logo}">
+                    </div>
                 {/if}
-            </div>
-            {if $settings.list_map_show_address}
-                <p class="glm-map-member-address">
-                    {if $settings.list_map_show_street}
-                        {if $m.addr1}{$m.addr1}<br>{/if}
-                        {if $m.addr2}{$m.addr2}<br>{/if}
-                    {/if}
-                    {if $settings.memb_info_location && $settings.list_map_show_citystatezip}
-                        {if $m.city}{$m.city}{if $m.state}, {/if}{/if}{if $m.state}{$m.state}{/if}{if $m.zip} {$m.zip}{/if}
+                <div class="glm-map-member-name">
+                    {if $settings.list_map_show_detaillink && !$m.has_no_profile}
+                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$m.member_slug}/{if $settings.enable_multiple_profiles}{$m.id}/{/if}">{$m.member_name}</a>
+                    {else}
+                        {$m.member_name}
                     {/if}
-                    {if $m.country && $settings.list_map_show_country}
+                </div>
+                {if $settings.list_map_show_address}
+                    <p class="glm-map-member-address">
+                        {if $settings.list_map_show_street}
+                            {if $m.addr1}{$m.addr1}<br>{/if}
+                            {if $m.addr2}{$m.addr2}<br>{/if}
+                        {/if}
+                        {if $settings.memb_info_location && $settings.list_map_show_citystatezip}
+                            {if $m.city}{$m.city}{if $m.state}, {/if}{/if}{if $m.state}{$m.state}{/if}{if $m.zip} {$m.zip}{/if}
+                        {/if}
+                        {if $m.country && $settings.list_map_show_country}
                             {$m.country}
+                        {/if}
+                    </p>
+                {/if} {*list_map_show_address*}
+                <div class="glm-member-list-info">
+                    <p>
+                        {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> {apply_filters('glm_associate_phone_filter', $m.phone)}<br>{/if}
+                        {if $m.toll_free && $settings.list_map_show_tollfree}{apply_filters('glm_associate_phone_filter', $m.toll_free)}<br>{/if}
+                        {if $m.url && $settings.list_map_show_url}<b>Web site:</b> <a href="{$m.url}"{if $settings.list_map_show_url_newtarget} target="_blank"{/if}>{$m.url}</a><br>{/if}
+                        {if $m.email && $settings.list_map_show_email}<b>E-Mail Address:</b> <a href="mailto:{$m.email}">{$m.email}</a><br>{/if}
+                        {if $m.region && $settings.list_map_show_region}<b>Region:</b> {$m.region}{/if}
+                    </p>
+    <!-- Not using Description for now - Use short descr for maps {literal}
+                    {if $m.descr && $settings.list_map_show_descr}{$m.descr|nl2br}<br>{/if}
+    {/literal} -->
+                    {if $m.short_descr && $settings.list_map_show_short_descr}{$m.short_descr}<br>{/if}
+    <!-- Not using categories for now  {literal}
+                    {if $m.categories && $settings.list_map_show_categories}
+                        <div class="glm-member-list-items">
+                            <b>{$terms.term_member_cap} Categories</b>
+                            <ul>
+                            {foreach $m.categories as $c}
+                                <li>
+                                    {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
+                                </li>
+                            {/foreach}
+                            </ul>
+                        </div>
                     {/if}
-                </p>
-            {/if} {*list_map_show_address*}
-            <div class="glm-member-list-info">
-                <p>
-                    {if $m.phone && $settings.list_map_show_phone}<b>Phone:</b> {apply_filters('glm_associate_phone_filter', $m.phone)}<br>{/if}
-                    {if $m.toll_free && $settings.list_map_show_tollfree}{apply_filters('glm_associate_phone_filter', $m.toll_free)}<br>{/if}
-                    {if $m.url && $settings.list_map_show_url}<b>Web site:</b> <a href="{$m.url}"{if $settings.list_map_show_url_newtarget} target="_blank"{/if}>{$m.url}</a><br>{/if}
-                    {if $m.email && $settings.list_map_show_email}<b>E-Mail Address:</b> <a href="mailto:{$m.email}">{$m.email}</a><br>{/if}
-                    {if $m.region && $settings.list_map_show_region}Region: {$m.region}{/if}
-                </p>
-                {if $m.short_descr && $settings.list_map_show_short_descr}{$m.short_descr}<br>{/if}
-                {if $settings.list_map_show_amenities}
-                    <div class="glm-member-list-items">
-                        <b>Amenities:</b>
-                        <ul>
-                        {foreach $m.amenities as $a}
-                            <li>{$a.name}</li>
-                        {/foreach}
-                        </ul>
-                    </div>
-                {/if}
-            </div>
-            {apply_filters('glm-member-db-front-members-list-mapBubbleBottom', '', $m.member)}
-        </div> <!-- End of information displayed in map bubbles -->
-    {/foreach}
+     {/literal} -->
+    <!-- Not using credit cards for now  {literal}
+                    {if $m.cc_type && $settings.list_map_show_creditcards}
+                        <div class="glm-member-list-items">
+                            <b>Credit Cards Accepted:</b>
+                            <ul>
+                            {foreach $m.cc_type.names as $c}
+                                <li>{$c}</li>
+                            {/foreach}
+                            </ul>
+                        </div>
+                    {/if}
+     {/literal} -->
+                    {if $settings.list_map_show_amenities}
+                        <div class="glm-member-list-items">
+                            <b>Amenities:</b>
+                            <ul>
+                            {foreach $m.amenities as $a}
+                                <li>{$a.name}</li>
+                            {/foreach}
+                            </ul>
+                        </div>
+                    {/if}
+                </div>
+                {apply_filters('glm-member-db-front-members-list-mapBubbleBottom', '', $m.member)}
+            </div> <!-- End of information displayed in map bubbles -->
+        {/foreach}
     </div>
+
 {if $settings.list_show_list && !$blankStart}
 {if $settings.list_header_text}
     <h3 class="glm-member-db-list-header-title">{$settings.list_header_text}</h3>
@@ -188,6 +245,7 @@
 {/if}
 
 {if $haveMembers}
+
     <div id="glm-member-list-terms">{$terms.term_member_plur_cap} found: {$membersFound}<br></div>
 
     {apply_filters('glm-member-db-front-members-list-listHeaderBottom', '')}
@@ -293,16 +351,16 @@
         </li> <!-- end of li.glm-member-list-record -->
     {/foreach} {*$members*}
     </ul>
-<!-- Grid view above -->
+    <!-- Grid view above -->
 
-{else}
+    {else}
 
-<!-- List view below -->
-    {foreach $members as $member}
-    {apply_filters('glm-member-db-front-members-list-memberAbove', '', $member.member_pointer)}
-         <div class="glm-member-list-container glm-member-container small-12 columns">
-            {apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)}
-             <!-- Member Logo - Medium and up-->
+    <!-- List view below -->
+        {foreach $members as $member}
+        {apply_filters('glm-member-db-front-members-list-memberAbove', '', $member.member_pointer)}
+            <div class="glm-member-list-container glm-member-container small-12 columns">
+                {apply_filters('glm-member-db-front-members-list-memberTop', '', $member.member_pointer)}
+                 <!-- Member Logo - Medium and up-->
 
                 <div class="glm-member-list-data small-12 columns">
                 {if $member.logo && $settings.list_show_logo}
@@ -318,17 +376,17 @@
                         </div>
                    </div>
                 {/if}
-                 <div class="glm-member-list-active-info small-12 medium-8 columns">
-<!-- Member name, address, and basic information -->
-                {apply_filters('glm-member-db-front-members-list-memberInfoTop', '', $member.member_pointer)}
-                <h4 class="glm-member-title">
-                    {if $settings.list_show_detail_link && !$member.has_no_profile.value}
-                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">{$member.member}</a>
-                    {else}
-                        {$member.member}
-                    {/if}
-                </h4>
-                {if $settings.list_show_address}
+                    <div class="glm-member-list-active-info small-12 medium-8 columns">
+     <!-- Member name, address, and basic information -->
+                    {apply_filters('glm-member-db-front-members-list-memberInfoTop', '', $member.member_pointer)}
+                    <h4 class="glm-member-title">
+                        {if $settings.list_show_detail_link && !$member.has_no_profile.value}
+                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">{$member.member}</a>
+                        {else}
+                            {$member.member}
+                        {/if}
+                    </h4>
+                    {if $settings.list_show_address}
                     <div class="glm-member-list-address-wrapper">
                         {apply_filters('glm-member-db-front-members-list-memberAddressTop', '', $member.member_pointer)}
                         {if $settings.list_show_street}
@@ -336,242 +394,328 @@
                         {if $member.addr2 && $settings.list_show_address}<div>{$member.addr2}</div>{/if}
                         {/if}
                         {if $settings.memb_info_location && $settings.list_show_citystatezip}
-                            <div>
-                                {if $member.city}
-                                    <span>{$member.city}{if $member.state.value}, {/if}</span>
-                                {/if}
-                                {if $member.state.value}
-                                    <span>{$member.state.value}</span>
-                                {/if}
-                                {if $member.zip}
-                                    {$member.zip}
-                                {/if}
-                            </div>
+                        <div>
+                            {if $member.city}
+                            <span>{$member.city}{if $member.state.value}, {/if}</span>
+                            {/if}
+                            {if $member.state.value}
+                            <span>{$member.state.value}</span>
+                            {/if}
+                            {if $member.zip}
+                                {$member.zip}
+                            {/if}
+                        </div>
                         {/if}
                         {if $member.country.name && $settings.list_show_country}
-                            <div>{$member.country.name}</div>
+                        <div>{$member.country.name}</div>
                         {/if}
                         {apply_filters('glm-member-db-front-members-list-memberAddressBottom', '', $member.member_pointer)}
                     </div>
-                {/if}
-                {apply_filters('glm-member-db-front-members-list-memberDetailTop', '', $member.member_pointer)}
-                {if ($settings.memb_info_contact && $member.phone && $settings.list_show_phone) || ($settings.memb_info_contact && $member.toll_free && $settings.list_show_tollfree)}
+                    {/if}
+                    {apply_filters('glm-member-db-front-members-list-memberDetailTop', '', $member.member_pointer)}
+                    {if ($settings.memb_info_contact && $member.phone && $settings.list_show_phone) || ($settings.memb_info_contact && $member.toll_free && $settings.list_show_tollfree)}
                     <div>
                         {if $member.phone && $settings.list_show_phone}<span class="glm-member-db-phone">Phone: {apply_filters('glm_associate_phone_filter', $member.phone)} </span>{/if}
                         {if $member.toll_free && $settings.list_show_tollfree}<span class="glm-member-db-phone-tollfree">{apply_filters('glm_associate_phone_filter', $member.toll_free)}</span>{/if}
                     </div>
-                {/if}
-                {if $settings.memb_info_location && $member.region && $settings.list_show_region}<div><b>Region:</b> {$member.region}</div>{/if}
-
-                <div class="glm-member-list-links">
-                    {apply_filters('glm-member-db-front-members-list-memberLinksTop', '', $member.member_pointer)}
-                    {if $member.url && $settings.list_show_url}<a class='glm-member-list-website-link' data-member-id="{$member.member_pointer}" data-member-slug="{$member.member_slug}" href="{$member.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if} >Visit Website</a>{/if}
-                    {if $member.email && $settings.list_show_email}<a href="mailto:{$member.email}">Email</a>{/if}
-                    {if $member.reservation_url}<a target="_blank" href="{$member.reservation_url}">Reserve Now</a>{/if}
-                    {if $settings.list_show_live_cam}
-                        {if $member.live_cam_type.name == "Web Page" && $member.live_cam_url && $settings.list_show_live_cam}
-                            <a target="_blank" href="{$member.live_cam_url}">{$terms.term_webcam_cap}</a>
-                        {else if $member.live_cam_type.name == "Camera Image"}
-                            <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}?expanded=live-cam">{$terms.term_webcam_cap}</a>
-                        {/if}
                     {/if}
-                    {apply_filters('glm-member-db-front-members-list-linksBottom', '', $member.member_pointer)}
-                 </div>
-                <div class="glm-member-db-socials">
-                   {apply_filters('glm-member-db-front-members-social-list', '', $member.member_pointer)}
-                </div>
+                    {if $settings.memb_info_location && $member.region && $settings.list_show_region}<div><b>Region:</b> {$member.region}</div>{/if}
+
+                    <div class="glm-member-list-links">
+                        {apply_filters('glm-member-db-front-members-list-memberLinksTop', '', $member.member_pointer)}
+                        {if $member.url && $settings.list_show_url}<a class='glm-member-list-website-link' data-member-id="{$member.member_pointer}" data-member-slug="{$member.member_slug}" href="{$member.url}"{if $settings.list_show_url_newtarget} target="_blank"{/if} >Visit Website</a>{/if}
+                        {if $member.email && $settings.list_show_email}<a href="mailto:{$member.email}">Email</a>{/if}
+                        {if $member.reservation_url}<a target="_blank" href="{$member.reservation_url}">Reserve Now</a>{/if}
+                        {if $settings.list_show_live_cam}
+                            {if $member.live_cam_type.name == "Web Page" && $member.live_cam_url && $settings.list_show_live_cam}
+                                <a target="_blank" href="{$member.live_cam_url}">{$terms.term_webcam_cap}</a>
+                            {else if $member.live_cam_type.name == "Camera Image"}
+                                <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}?expanded=live-cam">{$terms.term_webcam_cap}</a>
+                            {/if}
+                        {/if}
+                        {apply_filters('glm-member-db-front-members-list-linksBottom', '', $member.member_pointer)}
+                    </div>
+                    <div class="glm-member-db-socials">
+                       {apply_filters('glm-member-db-front-members-social-list', '', $member.member_pointer)}
+                    </div>
 
-            <div class="glm-member-list-description small-12 columns">
-                <div>
-                {apply_filters('glm-member-db-front-members-list-memberDescriptionTop', '', $member.member_pointer)}
-                {if $member.short_descr && $settings.list_show_short_descr}
-                    {$member.short_descr|nl2br}
-                    {if $settings.list_show_detail_link}
-                        <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">More</a>
-                    {/if}
-                {/if}
-                {apply_filters('glm-member-db-front-members-list-memberDescriptionBottom', '', $member.member_pointer)}
-                </div>
-                {if $member.categories && $settings.list_show_categories}
-                <div class="glm-member-list-items">
-                    <b>{$terms.term_member_cap} Categories</b>
-                    <ul>
-                        {foreach $member.categories as $c}
-                            <li>
-                                {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
-                            </li>
-                        {/foreach}
-                    </ul>
-                {/if}
-                {if $member.cc_type && $settings.list_show_creditcards}
-                    <b>Credit Cards Accepted:</b>
-                    <ul>
-                        {foreach $member.cc_type.names as $c}
-                            <li>{$c}</li>
-                        {/foreach}
-                    </ul>
-                {/if}
-                {if $member.amenities && $settings.list_show_amenities}
-                    <b>{$terms.term_member_cap} Amenities</b>
-                    <ul>
-                        {foreach $member.amenities as $A}
-                            <li>
-                                {$A.name}
-                            </li>
-                        {/foreach}
-                    </ul>
-                {/if}
+                    <div class="glm-member-list-description small-12 columns">
+                        <div>
+                        {apply_filters('glm-member-db-front-members-list-memberDescriptionTop', '', $member.member_pointer)}
+                        {if $member.short_descr && $settings.list_show_short_descr}
+                            {$member.short_descr|nl2br}
+                            {if $settings.list_show_detail_link}
+                                <a href="{$siteBaseUrl}{$settings.canonical_member_page}/{$member.member_slug}/{if $settings.enable_multiple_profiles}{$member.id}/{/if}">More</a>
+                            {/if}
+                        {/if}
+                        {apply_filters('glm-member-db-front-members-list-memberDescriptionBottom', '', $member.member_pointer)}
+                        </div>
+                        {if $member.categories && $settings.list_show_categories}
+                        <div class="glm-member-list-items">
+                            <b>{$terms.term_member_cap} Categories</b>
+                            <ul>
+                                {foreach $member.categories as $c}
+                                    <li>
+                                        {if $c.parent_name}{$c.parent_name}: {/if}{$c.name}
+                                    </li>
+                                {/foreach}
+                            </ul>
+                        {/if}
+                        {if $member.cc_type && $settings.list_show_creditcards}
+                            <b>Credit Cards Accepted:</b>
+                            <ul>
+                                {foreach $member.cc_type.names as $c}
+                                    <li>{$c}</li>
+                                {/foreach}
+                            </ul>
+                        {/if}
+                        {if $member.amenities && $settings.list_show_amenities}
+                            <b>{$terms.term_member_cap} Amenities</b>
+                            <ul>
+                                {foreach $member.amenities as $A}
+                                    <li>
+                                        {$A.name}
+                                    </li>
+                                {/foreach}
+                            </ul>
+                        {/if}
+                        </div>
+                    </div>
+                        {apply_filters('glm-member-db-front-members-list-memberDetailBottom', '', $member.member_pointer)}
                 </div>
-            </div>
-                {apply_filters('glm-member-db-front-members-list-memberDetailBottom', '', $member.member_pointer)}
-             </div>
 
 
-                <!-- Laury - This is the one that should go underneath all the address and description area -->
+                        <!-- Laury - This is the one that should go underneath all the address and description area -->
             {apply_filters('glm-member-db-front-members-list-memberDataBelow', '', $member.member_pointer)}
             {apply_filters('glm-member-db-front-members-list-memberBottom', '', $member.member_pointer)}
             </div>
-             {apply_filters('glm-member-db-front-members-list-memberBelow', '', $member.member_pointer)}
-<!-- Member Description -->
+            {apply_filters('glm-member-db-front-members-list-memberBelow', '', $member.member_pointer)}
+    <!-- Member Description -->
 
- {/foreach} {*$members*}
-     </div>
+         {/foreach} {*$members*}
+        </div>
 
-{/if} {*end grid view check*}
+ {/if} {*end grid view check*}
 
-{if $paging && !apply_filters("is_page", 'search')}
-    <br>
-    <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if $smarty.request.s}&s={$textSearch}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>Previous page</a>
-    <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if $smarty.request.s}&s={$textSearch}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page</a>
-    <br>
-    showing {$start} through {$lastDisplayed} of {$filteredMembersFound}
-{/if}
+    {if $paging && !apply_filters("is_page", 'search')}
+        <br>
+        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if $smarty.request.s}&s={$textSearch}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>Previous page</a>
+        <a href="{$thisUrl}?glm_action=list&textSearch={$textSearch}{if $smarty.request.s}&s={$textSearch}{/if}&categorySearch={$catSearchSelected}&regionSearch={$regionSearchSelected}&pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&limit={$limit}&alpha={$alphaSelected}" class="glm-alpha-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page</a>
+        <br>
+        showing {$start} through {$lastDisplayed} of {$filteredMembersFound}
+    {/if}
 
-    {apply_filters('glm-member-db-front-members-list-pageBottom', '')}
-{else}
-    <div>(no {$terms.term_member_plur} listed)</div>
-{/if}
+        {apply_filters('glm-member-db-front-members-list-pageBottom', '')}
+ {else}
+        <div>(no {$terms.term_member_plur} listed)</div>
+ {/if}
 
-{/if} {*list_show_list*}
-<script type="text/javascript">
-    jQuery(document).ready(function($) {
+    {/if} {*list_show_list*}
+    <script type="text/javascript">
+        jQuery(document).ready(function($) {
 
-        jQuery('select[multiple]').asmSelect();
+            jQuery('select[multiple]').asmSelect();
 
-        // Show search filters box
-        {if $settings.list_show_search}
+            // Show search filters box
+            {if $settings.list_show_search}
 
-            // Float filter box
+                // Float filter box
 
-                var fixmeTop = $('#glm-member-list-filters-button').offset().top;
-                $(window).scroll(function() {
+                    var fixmeTop = $('#glm-member-list-filters-button').offset().top;
+                    $(window).scroll(function() {
 
-                    var currentScroll = $(window).scrollTop();
-                    if (currentScroll >= fixmeTop-{$settings.list_floating_search_distance_top} && {$settings.list_floating_search}) {
-                        $('#glm-member-list-filters-wrapper').css({
-                            position: 'fixed',
-                            top: '{$settings.list_floating_search_distance_top}px',
-                            transform: 'translateX(0%)'
-                        });
-                    } else {
-                        $('#glm-member-list-filters-wrapper').css({
-                            position: 'relative',
-                            top: '0',
-                            transform: 'translateX(0%)'
-                        });
-                    }
+                        var currentScroll = $(window).scrollTop();
+                        if (currentScroll >= fixmeTop-{$settings.list_floating_search_distance_top} && {$settings.list_floating_search}) {
+                            $('#glm-member-list-filters-wrapper').css({
+                                position: 'fixed',
+                                top: '{$settings.list_floating_search_distance_top}px',
+                                transform: 'translateX(0%)'
+                            });
+                        } else {
+                            $('#glm-member-list-filters-wrapper').css({
+                                position: 'relative',
+                                top: '0',
+                                transform: 'translateX(0%)'
+                            });
+                        }
 
-                });
-            $(".glm-member-list-filters-toggle").click( function() {
-                $(".glm-member-db-{$view}-view").toggleClass("filters-opened");
-                $(".glm-member-db-{$view}-view").toggleClass("filters-closed");
-                $("#glm-locationMap-container").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
-                    function() {
-                        var center = map.getCenter();
-                        google.maps.event.trigger(map, "resize");
-                        map.setCenter(center);
                     });
-                });
-        {/if} // settings.list_show_search
-
-        {if $settings.list_show_map}
-                    /*
-                     * Google Maps
-                     *  API reference: https://developers.google.com/maps/documentation/javascript/reference
-                     */
-
-
-                    // Create a Google Map object
-                    var map = new google.maps.Map(document.getElementById('glm-locationMap'), {
-                            center: new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}),
-                            zoom: {$settings.maps_default_zoom},
-                        disableDefaultUI: false,
-                        mapTypeId: google.maps.MapTypeId.MAP,
+                $(".glm-member-list-filters-toggle").click( function() {
+                    $(".glm-member-db-{$view}-view").toggleClass("filters-opened");
+                    $(".glm-member-db-{$view}-view").toggleClass("filters-closed");
+                    $("#glm-locationMap-container").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
+                        function() {
+                            var center = map.getCenter();
+                            google.maps.event.trigger(map, "resize");
+                            map.setCenter(center);
+                        });
                     });
+            {/if} // settings.list_show_search
+
+    {if $settings.list_show_map}
+
+            /*
+             * Map operations
+             */
+             
+            var startLat = $('#glmLat').val();
+            var startLon = $('#glmLng').val();
+            var defZoom = Number({$settings.maps_default_zoom});
+            
+      {if $settings.selected_map_interface == 1}    
+                    
+            /*
+             *  Leaflet Map
+             *  API reference: https://leafletjs.com/reference-1.3.2.html
+             */
+
+            function initMap() {
+
+                var leafletMap = L.map('LeafletMapContainer').setView([{$settings.maps_default_lat}, {$settings.maps_default_lon}], defZoom);
+                var leafletTileServer = '{$settings.leaflet_tile_server}/{$settings.leaflet_tile_server_key}/' + {literal}'{z}/{x}/{y}.png'{/literal};
+                var leafletMinZoom = 3;
+                var leafletMaxZoom = 19;
+                var clusterRadiusMax = 40;
+                var geocoder;
+    
+                // 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);
+    
+    
+            {if $mapItems}
 
-                    $("#glm-member-list-map-toggle").click( function() {
-                        $(".glm-member-db-{$view}-view").toggleClass("map-opened");
-                        $(".glm-member-db-{$view}-view").toggleClass("map-closed");
-                        var center = map.getCenter();
-                        google.maps.event.trigger(map, "resize");
-                        map.setCenter(center);
-
-                        var currentScroll = $(window).scrollTop(); // get current position
-                        var mapTop = $("#glm-locationMap-container").offset().top-10;
-                        {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if}
-                        if (currentScroll >= mapTop) {
-                            $('body,html').animate({
-                            scrollTop: $("#glm-locationMap-container").offset().top-100
-                            }, 50);
-                        } else {
-                            $('body,html').animate({
-                                scrollTop: $("#glm-locationMap-container").offset().top-100
-                            }, 400);
-                        }
-                    });
-                    var geocoder = new google.maps.Geocoder();
-                    var bounds = new google.maps.LatLngBounds();
-                    var infowindow = new google.maps.InfoWindow();
-
-                    // Don't Try HTML5 to get user geolocation
-                    //if(navigator.geolocation) {
-                        //navigator.geolocation.getCurrentPosition(function(position) {
-                            //var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
-                            //var pinIcon = new google.maps.MarkerImage(
-                                    //'https://maps.google.com/mapfiles/kml/shapes/man.png',
-                                //null, /* size is determined at runtime */
-                                //null, /* origin is 0,0 */
-                                //null, /* anchor is bottom center of the scaled image */
-                                //new google.maps.Size(30, 30)
-                            //);
-                            //var myMarker = new google.maps.Marker({
-                                //map: map,
-                                //position: myLocation,
-                                //draggable: false,
-                                //animation: google.maps.Animation.DROP,
-                                //title: 'My Location',
-                                //icon: pinIcon,
-                                //zIndex: 100
-                            //});
+              {if $settings.use_cluster_markers}
+                var markerGroup = L.markerClusterGroup({
+                    maxClusterRadius: clusterRadiusMax
+                });
+              {else}
+                var markerGroup = L.featureGroup({
+                    maxClusterRadius: clusterRadiusMax
+                });
+              {/if}
+        
+                            
+              {foreach $mapItems as $m}
+                {if $m.lat != 0 && $m.lon != 0}
+    
+                // Create marker for this member and and to Feature Group 
+                var leafletMarker = L.marker([{$m.lat}, {$m.lon}], { title:  '{$m.member_name|escape:quotes}' })
+                    .bindPopup($('#map_info_' + {$m.id}).html())
+                    .addTo(markerGroup);
+    
+            {/if}
+              {/foreach}          
+    
+                leafletMap.addLayer(markerGroup);
+    
+                // Get outer bounds of all markers in the Feature Group
+                leafletMap.fitBounds(markerGroup.getBounds());               
+    
+            {/if} // havemembers
+    
+                // When a marker is clicked, display the pop-up near the center of the map.
+    
+                leafletMap.on('popupopen', function(e) {
+                    var px = leafletMap.project(e.popup._latlng);
+                    px.y -= e.popup._container.clientHeight/2;
+                    leafletMap.panTo(leafletMap.unproject(px),{ animate: true });
+                });
+    
+
+            }
+
+      {/if}
+            
+      {if $settings.selected_map_interface == 2}    
+    
+            /*
+             * Google Maps
+             *  API reference: https://developers.google.com/maps/documentation/javascript/reference
+             */
+    
+             function initMap() {
+    
+                // Create a Google Map object
+                var map = new google.maps.Map(document.getElementById('glm-locationMap'), {
+                        center: new google.maps.LatLng({$settings.maps_default_lat}, {$settings.maps_default_lon}),
+                        zoom: {$settings.maps_default_zoom},
+                    disableDefaultUI: false,
+                    mapTypeId: google.maps.MapTypeId.MAP,
+                });
+    
+                var center = map.getCenter();
+                google.maps.event.trigger(map, "resize");
+                map.setCenter(center);
+    
+                var currentScroll = $(window).scrollTop(); // get current position
+                var mapTop = $("#glm-locationMap-container").offset().top-10;
+                {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if}
+                if (currentScroll >= mapTop) {
+                    $('body,html').animate({
+                    scrollTop: $("#glm-locationMap-container").offset().top-100
+                    }, 50);
+                } else {
+                    $('body,html').animate({
+                        scrollTop: $("#glm-locationMap-container").offset().top-100
+                    }, 400);
+               }
+    
+                var geocoder = new google.maps.Geocoder();
+                var bounds = new google.maps.LatLngBounds();
+                var infowindow = new google.maps.InfoWindow();
+        
+                // Don't Try HTML5 to get user geolocation
+                //if(navigator.geolocation) {
+                    //navigator.geolocation.getCurrentPosition(function(position) {
+                        //var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+                        //var pinIcon = new google.maps.MarkerImage(
+                                //'https://maps.google.com/mapfiles/kml/shapes/man.png',
+                            //null, /* size is determined at runtime */
+                            //null, /* origin is 0,0 */
+                            //null, /* anchor is bottom center of the scaled image */
+                            //new google.maps.Size(30, 30)
+                        //);
+                        //var myMarker = new google.maps.Marker({
+                            //map: map,
+                            //position: myLocation,
+                            //draggable: false,
+                            //animation: google.maps.Animation.DROP,
+                            //title: 'My Location',
+                            //icon: pinIcon,
+                            //zIndex: 100
                         //});
-                    //}
-
+                    //});
+                //}
+        
+    
             {if $mapItems}
-                    var markers = [];
+                var markers = [];
                 {foreach $mapItems as $m}
                   {if $m.lat != 0 && $m.lon != 0}
-
+    
                     // Create a marker for this member
                     var marker = new google.maps.Marker({
                         map: map,
                         position: new google.maps.LatLng({$m.lat}, {$m.lon}),
                         draggable: false,
                         animation: google.maps.Animation.DROP,
-                            title: '{$m.member_name|escape:quotes}',
+                        title: '{$m.member_name|escape:quotes}',
                         descr: $('#map_info_' + {$m.id}).html(),
                         memberID: {$m.member}
                     });
-
+    
                     // Add a click listener for this marker
                     marker.addListener('click', function() {
                             infowindow.setOptions({
@@ -579,28 +723,28 @@
                             });
                         infowindow.open(map,this);
                     });
-
-                        markers.push(marker);
-
+    
+                    markers.push(marker);
+    
                     // Extend the map bounds to include this marker
                     bounds.extend(marker.position);
-
+    
                  {/if}
                 {/foreach}
-
-                    {if $settings.use_cluster_markers}
-                        var markerCluster = new MarkerClusterer(map, markers,
-                        {
-                            imagePath: '{$baseUrl}/js/googleMapsMarkerClusterer/images/m',
-                            gridSize: 30,
-                            maxZoom: 14,
-                            minimunClusterSize: 3
-                        });
-                    {/if}
-
+    
+                {if $settings.use_cluster_markers}
+                    var markerCluster = new MarkerClusterer(map, markers,
+                    {
+                        imagePath: '{$baseUrl}/js/googleMapsMarkerClusterer/images/m',
+                        gridSize: 30,
+                        maxZoom: 14,
+                        minimunClusterSize: 3
+                    });
+                {/if}
+    
                     // Fit map to bounds of all markers
                     map.fitBounds(bounds);
-
+    
                     // Check for first map idle (completely loaded) - Check max zoom
                     var mapLoadedListener = google.maps.event.addListener(map, 'idle', function() {
                         if (map.getZoom() > 14) {
@@ -609,31 +753,61 @@
                         google.maps.event.removeListener(mapLoadedListener);
                     });
 
-            {else}
-
-
-            {/if} // havemembers
-
-
-        {/if}   // settings.list_show_map
-
-        // Processes click-through counts for website links
-        $('.glm-member-list-website-link').on('click', function() {
-
-            // Get member ID
-            var memberId = $(this).attr('data-member-id');
-            var memberSlug = $(this).attr('data-member-slug');
-
-            // Send AJAX action to record click.
-            $.ajax({
-               url: "{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=memberClickThrough&memberId=" + memberId + "&memberSlug=" + memberSlug
+             } // initMap
+                    
+        {else}
+
+
+        {/if} // havemembers
+
+      {/if}                
+
+    {/if}   // settings.list_show_map
+
+            // Handle Map View/Hide
+            var mapInitialized = false;
+            $("#glm-member-list-map-toggle").click( function() {
+                $(".glm-member-db-{$view}-view").toggleClass("map-opened");
+                $(".glm-member-db-{$view}-view").toggleClass("map-closed");
+                if (!mapInitialized) {
+                    initMap();
+                    mapInitialized = true;
+                }
+                var currentScroll = $(window).scrollTop(); // get current position
+                var mapTop = $("#glm-locationMap-container").offset().top-10;
+                {if $settings.list_show_search}fixmeTop = $('#glm-member-list-filters-button').offset().top;{/if}
+                if (currentScroll >= mapTop) {
+                    $('body,html').animate({
+                    scrollTop: $("#glm-locationMap-container").offset().top-100
+                    }, 50);
+                } else {
+                    $('body,html').animate({
+                        scrollTop: $("#glm-locationMap-container").offset().top-100
+                    }, 400);
+               }
             });
+        {if $settings.list_map_show_opened}
+            // Start with map opened
+            initMap();
+            mapInitialized = true;
+        {/if}
+            
+            // Processes click-through counts for website links
+            $('.glm-member-list-website-link').on('click', function() {
+
+                // Get member ID
+                var memberId = $(this).attr('data-member-id');
+                var memberSlug = $(this).attr('data-member-slug');
+
+                // Send AJAX action to record click.
+                $.ajax({
+                   url: "{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=memberClickThrough&memberId=" + memberId + "&memberSlug=" + memberSlug
+                });
 
+            });
         });
-    });
-        </script>
+            </script>
 
-    </div><!-- glm-member-list-inner-wrapper-->
-</div><!-- glm-member-db-list-view -->
+        </div><!-- glm-member-list-inner-wrapper-->
+    </div><!-- glm-member-db-list-view -->
 {include file='front/footer.html'}
-<!-- if not generic view passed in member list shortcode-->
-- 
2.17.1