https://peekvision.org/wp-content/themes/peekwebsite/js/custom-map.js

1(function ($) {
2  const evt = new CustomEvent('map-filtration-ajax-success');
3
4  class CustomGoogleMap {
5    mapHolder = null;
6    markerImg = null;
7    map = null;
8    markers = [];
9    infowindow = null;
10    bounds = null;
11
12    constructor () {
13      this.mapHolder = document.getElementById('map');
14
15      if (this.mapHolder) {
16        this.initMap();
17      }
18
19      document.addEventListener('map-filtration-ajax-success', () => {
20        this.removeMarkers();
21        this.addMarkers();
22      })
23    }
24
25    async initMap () {
26      const initialPosition = this.mapHolder.getAttribute('data-position').split(', ');
27      const initialZoom = Number(this.mapHolder.getAttribute('data-zoom'));
28      this.markerImg = this.mapHolder.getAttribute('data-pin-img');
29
30      const { Map } = await google.maps.importLibrary("maps");
31
32      this.map = new Map(document.getElementById("map"), {
33        center: {
34          lat: isNaN(+initialPosition[0]) ? 0 : +initialPosition[0],
35          lng: isNaN(+initialPosition[1]) ? 0 : +initialPosition[1],
36        },
37        zoom: initialZoom,
38        disableDefaultUI: true,
39        cameraControl: false,
40      });
41
42      this.bounds = new google.maps.LatLngBounds();
43      this.infowindow = new google.maps.InfoWindow({
44        maxWidth: 290
45      });
46
47      this.addMarkers();
48    }
49
50    addMarkers () {
51      const markersJson = JSON.parse(this.mapHolder.getAttribute('data-locations'));
52      if (!markersJson) return;
53
54      let makeContent = (item) => ` <div class='map-popup'>
55									<img src=${item.image} alt=${item.title}>
56									<div class='map-popup-body'>
57										<h6>${item.title}</h6>
58										<p>${item.text}</p>
59									</div>
60								</div>`;
61
62      markersJson.forEach((item) => {
63        let contentString = makeContent(item);
64
65        const marker = new google.maps.Marker({
66          position: { lat: item.map.lat, lng: item.map.lng },
67          title: item.title,
68          icon: this.markerImg,
69          map: this.map
70        });
71
72        marker.addListener("click", () => {
73          this.infowindow.setContent(contentString);
74          this.infowindow.open({
75            anchor: marker,
76            map: this.map,
77          });
78        });
79
80        this.markers.push(marker);
81
82        this.zoomToVisibleMarkers();
83      })
84    }
85
86    removeMarkers () {
87      if (!this.markers || !this.markers.length) return;
88      this.markers.forEach((item) => {
89        item.setMap(null);
90      })
91
92      this.markers = [];
93    }
94
95    zoomToVisibleMarkers () {
96      if (!this.markers || !this.markers.length) return;
97
98      if (this.markers.length > 1) {
99        this.markers.forEach((item) => {
100          this.bounds.extend(item.getPosition());
101        })
102
103        this.map.fitBounds(this.bounds);
104      } else {
105        this.map.setCenter(this.markers[0].getPosition());
106      }
107    }
108  }
109
110  new CustomGoogleMap();
111
112  $('#filtration-map').on('change', (function (e) {
113    e.preventDefault();
114    ajaxFilter();
115  }));
116
117  function ajaxFilter () {
118    if (!('obj' in window)) {
119      window.obj = {};
120    }
121
122    var data = {
123      'action': 'get_locations',
124      'nonce': obj.nonce,
125    };
126
127    jQuery('#filtration-map select').each(function (i, elm) {
128      data[elm.name] = elm.value;
129    })
130
131    $.ajax({
132      url: obj.ajaxurl,
133      data: data,
134      type: 'POST',
135      success: function (data) {
136        if (data) {
137          $('#map').attr("data-locations", data);
138          document.dispatchEvent(evt);
139        }
140      },
141      error: function (error) {
142        console.log(error);
143      }
144    });
145  }
146})(jQuery);