https://fraservalleyconservancy.ca/wp-content/themes/anvil-theme/scripts/maps.js?ver=1790181553

1/*
2 |----------------------------------------------------------------
3 |  Google Maps
4 |----------------------------------------------------------------
5 */
6
7
8
9
10
11/*
12*  emptyCurrentMap
13*
14*  This function will empty the existing map element
15*
16*  @type    function
17*  @date    8/11/2018
18*  @since   4.3.0
19*
20*  @param   n/a
21*  @return  n/a
22*/
23function emptyCurrentMap() {
24    $('.acf-map').empty();
25}
26
27
28/*
29*  createNewMapMarker
30*
31*  This function use data provided to create a new map marker and add the html to the map DOM element
32*
33*  @type    function
34*  @date    8/11/2018
35*  @since   4.3.0
36*
37*  @param   object {mapAddress: string, mapLat: string, mapLng: string}
38*  @return  n/a
39*/
40function createNewMapMarker(mapData) {
41    var htmlOutput = '<div class="marker" ';
42    htmlOutput += 'data-url="' + mapData.mapAddress + '" ';
43    htmlOutput += 'data-lat="' + mapData.mapLat + '" ';
44    htmlOutput += 'data-lng="' + mapData.mapLng + '" ';
45    htmlOutput += 'data-article-id="' + mapData.articleId + '" ';
46    htmlOutput += '><h6>' + mapData.title + '</h6>'
47    htmlOutput += '<p>' + mapData.mapAddress + '</p><a class="smooth-scroll" href="#';
48    htmlOutput += mapData.articleId + '">View</a></div>';
49
50    $('.acf-map').append(htmlOutput);
51}
52
53/*

54*  acfMapInit()
55*
56*  Initializes the map on the DOM element with a class name .acf-map
57*
58*  @type    function
59*  @date    8/11/2018
60*
61*  @return  n/a
62*/
63
64
65function acfMapInit() {
66    $('.acf-map').each(function(){
67        //if map loop container exists we want to clear the default map marker and use the markers generated in the loop
68        if ($('.map-loop-container').length) {
69            // Map Data element that will hold marker info
70            $el = $(".map-data");
71            //clear the maps default marker
72            emptyCurrentMap();
73            $el.each(function() {
74                var mapData = this.dataset;
75                createNewMapMarker(mapData);
76            });
77        }
78
79        // create map
80        map = new_map( $(this) );
81        var latlng = new google.maps.LatLng( mapData.mapLat, mapData.mapLng );
82        map.setZoom(1);
83        console.log('zoom');
84
85    });
86}
87
88function zoomOnMarker(mapData){
89    var latlng = new google.maps.LatLng( mapData.mapLat, mapData.mapLng );
90    map.setZoom(1);
91    map.setCenter(latlng);
92    console.log('zoom');
93}
94
95
96
97/*
98*  new_map
99*
100*  This function will render a Google Map onto the selected jQuery element
101*
102*  @type    function
103*  @date    8/11/2013
104*  @since   4.3.0
105*
106*  @param   $el (jQuery element)
107*  @return  n/a
108*/
109
110function new_map( $el ) {
111
112
113
114
115
116    // var
117    var $markers = $el.find('.marker');
118
119
120
121
122    // add a markers reference
123    map.markers = [];
124
125
126    // add markers
127    $markers.each(function(){
128
129        add_marker( $(this), map );
130
131    });
132
133
134    // center map
135    center_map( map );
136
137
138    // return
139    return map;
140
141}
142
143/*
144*  add_marker
145*
146*  This function will add a marker to the selected Google Map
147*
148*  @type    function
149*  @date    8/11/2013
150*  @since   4.3.0
151*
152*  @param   $marker (jQuery element)
153*  @param   map (Google Map object)
154*  @return  n/a
155*/
156
157function add_marker( $marker, map ) {
158
159    // var
160    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
161    var id = $marker.attr('data-article-id');
162    // create marker
163    var marker = new google.maps.Marker({
164        position    : latlng,
165        map         : map,
166        articleId   : id,
167    });
168
169    // add to array
170    map.markers.push( marker );
171
172    // if marker contains HTML, add it to an infoWindow
173    if( $marker.html() )
174    {
175        // create info window
176        var infowindow = new google.maps.InfoWindow({
177            content     : $marker.html()
178        });
179
180        // show info window when marker is clicked
181        google.maps.event.addListener(marker, 'click', function() {
182
183            infowindow.open( map, marker );
184
185        });
186    }
187
188}
189
190/*
191*  center_map
192*
193*  This function will center the map, showing all markers attached to this map
194*
195*  @type    function
196*  @date    8/11/2013
197*  @since   4.3.0
198*
199*  @param   map (Google Map object)
200*  @return  n/a
201*/
202
203function center_map( map ) {
204
205    // vars
206    var bounds = new google.maps.LatLngBounds();
207
208    // loop through all markers and create bounds
209    $.each( map.markers, function( i, marker ){
210
211        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
212
213        bounds.extend( latlng );
214
215    });
216
217    // only 1 marker?
218    if( map.markers.length == 1 )
219    {
220        // set center of map
221        map.setCenter( bounds.getCenter() );
222    }
223    else
224    {
225        // fit to bounds
226        map.fitBounds( bounds );
227    }
228
229}
230
231/*
232*  document ready
233*
234*  This function will render each map when the document is ready (page has loaded)
235*
236*  @type    function
237*  @date    8/11/2013
238*  @since   5.0.0
239*
240*  @param   n/a
241*  @return  n/a
242*/
243// global var
244var map = null;
245
246jQuery(function($){
247    // This seems to be the most reliable loading method, it waits until all assets are loaded and
248    // seems to ensure that google maps is loaded
249    // before initializing
250    window.onload = acfMapInit;
251
252
253});
254
255/*
256    |----------------------------------------------------------------
257    | Map Scripts
258    | Create a marker element for each map data element in the map loop container
259    |----------------------------------------------------------------
260    */
261
262// $(".map-loop-container").each(function() {
263//     var $el = $(".map-data");
264//     $el.click(function(e) {
265//         e.preventDefault();
266//         var mapData = this.dataset;
267//         zoomOnMarker(mapData);

268//         smoothScroll(e);
269//     });
270//     $el.each(function() {
271//         var mapData = this.dataset;
272//         createNewMapMarker(mapData);
273//     });
274// });
275//
276// $('.acf-map').on('click', 'a', smoothScroll);