https://eaaci.org/wp-content/themes/eaaci/src/js/map.js?ver=7.1.2

1(function( $ ) {
2
3    /**
4     * initMap
5     *
6     * Renders a Google Map onto the selected jQuery element
7     *
8     * @date    22/10/19
9     * @since   5.8.6
10     *
11     * @param   jQuery $el The jQuery element.
12     * @return  object The map instance.
13     */
14    function initMap( $el ) {
15
16        // Find marker elements within map.
17        var $markers = $el.find('.marker');
18        let table = $('.js-map-table');
19        table.find('tbody').find('tr').each(function () {
20            let lat = $(this).data('lat');
21            let lng = $(this).data('lng');
22        })
23        $markers.each(function () {
24            $(this).each(function (i, element) {
25
26            })
27        })
28
29
30        // Create gerenic map.
31        var mapArgs = {
32            zoom        : 4,
33            mapTypeId   : google.maps.MapTypeId.ROADMAP,
34            center:  {
35                "lat": 47.376887,
36                "lng": 8.541694
37            }
38        };
39
40        var map = new google.maps.Map( $el[0], mapArgs );
41
42        // Add markers.
43        map.markers = [];
44        $markers.each(function(){
45            initMarker( $(this), map );
46        });
47        console.log($markers)
48        // Center map based on markers.
49        // centerMap( map );
50        map.setOptions({ styles: styles["default"] });
51        // Return map instance.
52        return map;
53    }
54
55    const styles = {
56        default: [
57            {
58                elementType: "geometry",
59                stylers: [{ color: "#ffffff" }],
60            },
61            {
62                elementType: "labels.icon",
63                stylers: [{ visibility: "off" }],
64            },
65            {
66                elementType: "labels.text.fill",
67                stylers: [{ color: "#7079A8" }],
68            },
69            {
70                elementType: "labels.text.stroke",
71                stylers: [{ color: "#f5f5f5" }],
72            },
73            {
74                featureType: "administrative.land_parcel",
75                elementType: "labels.text.fill",
76                stylers: [{ color: "#bdbdbd" }],
77            },
78            {
79                featureType: "poi",
80                elementType: "geometry",
81                stylers: [{ color: "#eeeeee" }],
82            },
83            {
84                featureType: "poi",
85                elementType: "labels.text.fill",
86                stylers: [{ color: "#757575" }],
87            },
88            {
89                featureType: "poi.park",
90                elementType: "geometry",
91                stylers: [{ color: "#e5e5e5" }],
92            },
93            {
94                featureType: "poi.park",
95                elementType: "labels.text.fill",
96                stylers: [{ color: "#9e9e9e" }],
97            },
98            {
99                featureType: "road",
100                elementType: "geometry",
101                stylers: [{ color: "#ffffff" }],
102            },
103            {
104                featureType: "road.arterial",
105                elementType: "labels.text.fill",
106                stylers: [{ color: "#757575" }],
107            },
108            {
109                featureType: "road.highway",
110                elementType: "geometry",
111                stylers: [{ color: "#ebeef2" }],
112            },
113            {
114                featureType: "road.highway",
115                elementType: "labels.text.fill",
116                stylers: [{ color: "#616161" }],
117            },
118            {
119                featureType: "road.local",
120                elementType: "labels.text.fill",
121                stylers: [{ color: "#9e9e9e" }],
122            },
123            {
124                featureType: "transit.line",
125                elementType: "geometry",
126                stylers: [{ color: "#e5e5e5" }],
127            },
128            {
129                featureType: "transit.station",
130                elementType: "geometry",
131                stylers: [{ color: "#eeeeee" }],
132            },
133            {
134                featureType: "water",
135                elementType: "geometry",
136                stylers: [{ color: "#ebeef2" }],
137            },
138            {
139                featureType: "water",
140                elementType: "labels.text.fill",
141                stylers: [{ color: "#9e9e9e" }],
142            },
143        ],
144    };
145
146    /**
147     * initMarker
148     *
149     * Creates a marker for the given jQuery element and map.
150     *
151     * @date    22/10/19
152     * @since   5.8.6
153     *
154     * @param   jQuery $el The jQuery element.
155     * @param   object The map instance.
156     * @return  object The marker instance.
157     */
158    function initMarker( $marker, map ) {
159        var defaultMarker = ajax_object.theme_url+"/assets/image/marker.svg";
160        var hoverMarker = ajax_object.theme_url+"/assets/image/marker-yellow.svg";
161        // Get position from marker.
162        var lat = $marker.data('lat');
163        var lng = $marker.data('lng');
164        var latLng = {
165            lat: parseFloat( lat ),
166            lng: parseFloat( lng )
167        };
168
169        // Create marker instance.
170        var marker = new google.maps.Marker({
171            position : latLng,
172            map: map,
173            animation: google.maps.Animation.DROP,
174            icon: {
175                url: defaultMarker,
176                scaledSize: new google.maps.Size(25, 27),
177
178            }
179        });
180
181        google.maps.event.addListener(marker, 'mouseover', function() {
182            marker.setIcon({
183                url: hoverMarker,
184                scaledSize: new google.maps.Size(25, 27),
185            });
186        });
187        google.maps.event.addListener(marker, 'mouseout', function() {
188            marker.setIcon({
189                url: defaultMarker,
190                scaledSize: new google.maps.Size(25, 27),
191            });
192        });
193        google.maps.event.addListener(marker,'mouseover',function(){
194            $('.feed-map__list').find('tr').each(function () {
195                let rowLat = $(this).data('lat');
196                let rowLng = $(this).data('lng');
197                if ( lat === rowLat && lng === rowLng ) {
198                    $(this).addClass('active');
199                }
200            })
201        });
202        $('.feed-map__list').find('tr').each(function () {
203            $(this).on('mouseover',function () {
204                let rowLat = $(this).data('lat');
205                let rowLng = $(this).data('lng');
206                if ( lat === rowLat && lng === rowLng ) {
207                    marker.setIcon({
208                        url: hoverMarker,
209                        scaledSize: new google.maps.Size(25, 27),
210                    });
211                }
212            })
213            $(this).on('mouseout',function () {
214                marker.setIcon({
215                    url: defaultMarker,
216                    scaledSize: new google.maps.Size(25, 27),
217                });
218            })
219        })
220        google.maps.event.addListener(marker,'mouseout',function(){
221            $('.feed-map__list').find('tr').each(function () {
222                let rowLat = $(this).data('lat');
223                let rowLng = $(this).data('lng');
224                if ( lat === rowLat && lng === rowLng ) {
225                    $(this).removeClass('active');
226                }
227            })
228        });
229        // Append to reference for later use.
230        map.markers.push( marker );
231
232        // If marker contains HTML, add it to an infoWindow.
233        if( $marker.html() ){
234

235            // Create info window.
236            var infowindow = new google.maps.InfoWindow({
237                content: $marker.html()
238            });
239
240            // Show info window when marker is clicked.
241            google.maps.event.addListener(marker, 'click', function() {
242                infowindow.open( map, marker );
243            });
244        }
245    }
246
247    /**
248     * centerMap
249     *
250     * Centers the map showing all markers in view.
251     *
252     * @date    22/10/19
253     * @since   5.8.6
254     *
255     * @param   object The map instance.
256     * @return  void
257     */
258    function centerMap( map ) {
259
260        // Create map boundaries from all map markers.
261        var bounds = new google.maps.LatLngBounds();
262        map.markers.forEach(function( marker ){
263            bounds.extend({
264                lat: marker.position.lat(),
265                lng: marker.position.lng()
266            });
267        });
268
269        // Case: Single marker.
270        console.log(bounds.getCenter())
271        if( map.markers.length == 1 ){
272            map.setCenter( bounds.getCenter() );
273
274            // Case: Multiple markers.
275        } else{
276            map.fitBounds( bounds );
277        }
278    }
279
280   
281    $('.acf-map').each(function(){
282        var map = initMap( $(this) );
283    });
284
285})(jQuery);