https://visitbr7.co.il/wp-content/themes/qs-starter-child/build/js/map.js

1var markerobj = site_settings_child.epicenter_loactions;
2var filtered_markers = [];
3
4if( jQuery("#epicenter_map").length ){
5    initMapEpicenter_map(terms_obj);
6}
7
8jQuery('.epicenter_sort .checkbox_wrap').on('change', 'input[type="checkbox"]', function () {
9    cats = get_selected_map_terms();
10    console.log( cats );
11    filterMarkers( cats );
12});
13
14function get_selected_map_terms(){
15    cats = [];
16    jQuery('.epicenter_sort .checkbox_wrap input:checked').each( function(){
17        //cats.push( parseInt(jQuery(this).val()) );
18        cats.push( jQuery(this).val() );
19    });
20    return cats;
21}
22
23function initMapEpicenter_map(terms_obj) {
24    var infoBubble;
25    var bounds      = new google.maps.LatLngBounds();
26	map = new google.maps.Map(document.getElementById('epicenter_map'), {
27	      zoom: 14,
28	      center: new google.maps.LatLng( site_settings_child.epicenter_loactions[0].lat, site_settings_child.epicenter_loactions[0].lng ),
29	      mapTypeId: google.maps.MapTypeId.ROADMAP,
30    });
31
32    var marker, i;
33
34    for (i = 0; i < markerobj.length; i++) {
35
36        // '<button class="close-marker-window" data-id="' + markerobj[i].id + '"><img src="' + site_settings_child.theme_url + '/images/close-sms.svg"></button>'+
37
38        var contentString = '<div id="marker-article" data-id="' + markerobj[i].id + '">'+
39            '<div class="marker-post-thumbnail" style="background-image: url('+markerobj[i].thumbnail+'); ">'+
40                '<img class="hidden_img" src="' + markerobj[i].thumbnail + '" />' +
41            '</div>' +
42            '<div class="marker-post-content">' +
43                '<div class="wrap_title_address">' +
44                    '<div class="the-title">'+ markerobj[i].title +'</div>' +
45                    '<div class="the-address">'+ markerobj[i].address +'</div>' +
46                '</div>' +
47                '<div class="the-permalink">'+
48                    '<a aria-label="'+ markerobj[i].btn_title +'" title="'+ markerobj[i].title +'" href="' + markerobj[i].permalink + '">'+
49                        markerobj[i].btn_title +
50                    '</a>' +
51                '</div>' +
52            '</div>' +
53        '</div>';
54
55        var marker_icon = site_settings_child.theme_url+'/images/anchor_icon.png';
56
57        if( markerobj[i].marker_icon ){
58            marker_icon = markerobj[i].marker_icon;
59        }
60
61		marker = new google.maps.Marker({
62			position  : new google.maps.LatLng(markerobj[i].lat, markerobj[i].lng),
63			map       : map,
64            title     : markerobj[i].title,
65            post_type : markerobj[i].post_type,
66            category  : markerobj[i].category,
67			icon      : marker_icon,
68			animation : google.maps.Animation.DROP,
69            info      : contentString
70		});
71
72        infoBubble = new InfoBubble({
73            map: map,
74            //position: new google.maps.LatLng(-35, 151),
75            shadowStyle: 1,
76            padding: 0,
77            //backgroundColor: 'rgb(57,57,57)',
78            borderRadius: 0,
79            minWidth: 400,
80            minHeight: 210,
81            // maxHeight : 210,
82            arrowSize: 12,
83            borderWidth: 0,
84            borderColor: '#fff',
85            disableAutoPan: true,
86            hideCloseButton: true,
87            arrowPosition: 50,
88            hideCloseButton: false,
89            closeSrc: '/wp-content/themes/qs-starter-child/images/new-button.png',
90            backgroundClassName: 'info_bubble_wrap',
91            //pixelOffset: new google.maps.Size(30, 20),
92            arrowStyle: 0
93        });
94
95        bounds.extend(marker.position);
96
97        google.maps.event.addListener( marker, 'click', ( function(marker, i) {
98            return function() {
99                infoBubble.setContent( this.info );
100                infoBubble.open( map, this );
101            }
102        })(marker, i));
103
104        filtered_markers.push(marker);
105    }
106}
107
108function filterMarkers(cats){
109
110   for (i = 0; i < filtered_markers.length; i++) {
111
112      marker = filtered_markers[i];

113
114      // console.log( cats );
115      // console.log( 'marker.post_type: ', marker.post_type );
116
117      if( cats.includes(marker.post_type) ){
118          marker.setVisible(true);
119      } else {
120         marker.setVisible(false);
121      }
122
123    }
124}
125
126function zoomToObject(obj, map){
127    var bounds = new google.maps.LatLngBounds();
128    var points = obj.getPath().getArray();
129    for (var n = 0; n < points.length ; n++){
130        bounds.extend(points[n]);
131    }
132    map.fitBounds(bounds);
133}
134
135function points_of_interest_map( points ){
136
137    console.log(points);
138
139    var map = new google.maps.Map(document.getElementById('track-attractions-map'), {
140      zoom   : 12,
141      center : { lat : points[0].lat, lng : points[0].lng },
142      //mapTypeId: 'terrain'
143    });
144
145    var userCoor = [];
146    var userCoorPath = [];
147    var infowindow = null;
148
149    infowindow = new google.maps.InfoWindow({
150		content: "Loading..."
151	});
152
153    jQuery.each(points, function(k, v){
154        userCoor.push([ v.lat, v.lng, v.title]);
155        userCoorPath.push(new google.maps.LatLng( v.lat, v.lng ));
156    });
157
158    var userCoordinate = new google.maps.Polyline({
159        path         : userCoorPath,
160        strokeColor  : "#20a3da",
161        strokeOpacity: 1,
162        strokeWeight : 3
163    });
164

165    userCoordinate.setMap(map);
166
167    // center map
168    zoomToObject(userCoordinate, map);
169
170    var marker, i;
171
172    for (i = 0; i < userCoor.length; i++) {
173
174        marker = new google.maps.Marker({
175            position : new google.maps.LatLng( userCoor[i][0], userCoor[i][1] ),
176            map      : map,
177            icon     : site_settings_child.theme_url + '/images/red-marker-map.png',
178            title    : userCoor[i][2]
179        });
180
181        google.maps.event.addListener(marker, "click", function () {
182			infowindow.setContent(this.title);
183			infowindow.open(map, this);
184		});
185
186    }
187
188}