https://www.zahnaerzte-hh.de/_assets/4f02bbfe86537ce138cc483bd41a7…/Ractive/DentistMapComponent.js?1746809631

1(function ($, _) {
2
3    "use strict";
4
5    if ($('#dentist-map-component-template').length === 0) {
6        return;
7    }
8
9    window.DentistMapComponent = Ractive.extend({
10        isolated: true,
11        template: '#dentist-map-component-template',
12        debug: true,
13
14        data: function () {
15            return {
16                updating: false,
17                map: null,
18                items: [],
19                markers: []
20            };
21        },
22        computed: {},
23
24        oninit: function () {
25            new Promise((resolve) => {
26                let intervalOnInit = setInterval(() => {
27                    if (google.maps !== undefined && this.get('map') !== null) {
28                        clearInterval(intervalOnInit);
29                        resolve();
30                    }
31                }, 100);
32            }).then(() => {
33                var self = this;
34
35                var updateMarkers = function () {
36                    var items = self.get('items'),
37                        map = self.get('map')
38                    var bounds = new google.maps.LatLngBounds();
39                    var zoomChangeBoundsListener = null;
40                    var markers = self.get('markers');
41
42                    var boundParams = {lat: {min: null, max: null}, lng: {min: null, max: null}}
43                    if (items) {
44                        items.forEach(function (item) {
45                            var infowindow = new google.maps.InfoWindow();
46                            var marker = new google.maps.Marker({
47                                id: item.uid,
48                                title: item.label,
49                                position: {lat: item.geo.lat, lng: item.geo.lng},
50                                map: map,
51                                infoWindowVisible: false,
52                                showInfoWindow: function () {
53                                    for (var m in markers) {
54                                        markers[m].hideInfoWindow();
55                                    }
56                                    $('.dentist .item').removeClass('active');
57                                    infowindow.open(this.map, this);
58                                    this.infoWindowVisible = true;
59                                    $('#item-' + marker.id).addClass('active');
60                                },
61                                hideInfoWindow: function () {
62                                    infowindow.close();
63                                    this.infoWindowVisible = false;
64                                    $('#item-' + marker.id).removeClass('active');
65                                }
66                            });
67                            google.maps.event.addListener(marker, 'mouseover', function () {
68                                $('#item-' + marker.id).addClass('highlight');
69                            });
70                            google.maps.event.addListener(marker, 'mouseout', function () {
71                                $('#item-' + marker.id).removeClass('highlight');
72                            });
73                            google.maps.event.addListener(marker, 'click', function () {
74                                if (marker.infoWindowVisible) {
75                                    marker.hideInfoWindow();
76                                } else {
77                                    infowindow.setContent($('div[data-id=' + item.uid + ']').html());
78                                    marker.showInfoWindow();
79                                }
80                            });
81
82                            if (marker.position) {
83                                boundParams.lat.min = boundParams.lat.min == null || marker.position.lat() < boundParams.lat.min ? marker.position.lat() : boundParams.lat.min;
84                                boundParams.lat.max = boundParams.lat.max == null || marker.position.lat() > boundParams.lat.max ? marker.position.lat() : boundParams.lat.max;
85                                boundParams.lng.min = boundParams.lng.min == null || marker.position.lng() < boundParams.lng.min ? marker.position.lng() : boundParams.lng.min;
86                                boundParams.lng.max = boundParams.lng.max == null || marker.position.lng() > boundParams.lng.max ? marker.position.lng() : boundParams.lng.max;
87                            }
88
89                            self.push('markers', marker);
90                        })
91
92                        $(document).on('mouseover', '.dentist-result-list--item .

92item', function () {
93                            var id = $(this).attr('id').split('-')[1];
94                            var marker = _.find(self.get('markers'), function (marker) {
95                                return marker['id'] == id;
96                            })
97
98                            marker.setAnimation(google.maps.Animation.BOUNCE);
99
100                            $(this).addClass('highlight');
101                        })
102
103                        $(document).on('mouseout', '.dentist-result-list--item .item', function () {
104                            var id = $(this).attr('id').split('-')[1];
105                            var marker = _.find(self.get('markers'), function (marker) {
106                                return marker['id'] == id;
107                            })
108                            marker.setAnimation(null);
109
110                            $(this).removeClass('highlight');
111                        });
112
113                        var lngOffset = boundParams.lng.max - boundParams.lng.min;
114                        var myLatLng1 = {lat: boundParams.lat.min, lng: boundParams.lng.min - lngOffset};
115                        var myLatLng2 = {lat: boundParams.lat.max + 0.005, lng: boundParams.lng.max};
116
117                        bounds.extend(myLatLng1);
118                        bounds.extend(myLatLng2);
119
120                        google.maps.event.addListener(map, 'zoom_changed', function () {
121                            zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function (event) {
122                                if (this.getZoom() > 15 && this.initialZoom == true) {
123                                    this.setZoom(15);
124                                    this.initialZoom = false;
125                                }
126                                google.maps.event.removeListener(zoomChangeBoundsListener);
127                            });
128                        });
129                        map.initialZoom = true;
130                        map.fitBounds(bounds);
131                    }
132                }
133
134                var clearMap = function () {
135                    var markers = self.get('markers');
136
137                    if (markers) {
138                        markers.forEach(function (marker, index) {
139                            markers[index].setMap(null);
140                        })
141                    }
142
143                    self.set('markers', []);
144                }
145
146                this.root.on('results.change', function () {
147                    self.set('updating', true);
148                    clearMap()
149                });
150
151                this.root.on('results.changed', function (event, items) {
152                    window.setTimeout(function () {
153                        self.set('items', items);
154                        self.set('updating', false);
155
156                        updateMarkers()
157
158                        setTimeout(function () {
159                            window.scrollBy(0,1)
160                            window.scrollBy(0,-1)
161                        }, 100)
162                    }, 400)
163                });
164            });
165        },
166
167        onrender: function () {
168            new Promise(function (resolve) {
169                let intervalOnRender = setInterval(function () {
170                    if (google.maps !== undefined && $.trim($('#map .dis

170play').html())) {
171                        clearInterval(intervalOnRender);
172                        resolve();
173                    }
174                }, 100);
175            }).then(() => {
176                var mapDisplay = $('#map .display');
177                var myLatLng = {lat: 53.566401, lng: 10.000581};
178
179                this.set('map', new google.maps.Map(mapDisplay[0], {
180                    zoom: 12,
181                    center: myLatLng,
182                    scrollwheel: false,
183                    draggable: true,
184                    mapTypeControl: false,
185                    streetViewControl: false,
186                    styles: [{
187                        stylers: [{
188                            saturation: -100
189                        }]
190                    }]
191                }))
192
193                function resizeMap() {
194                    var $map = $('#map');
195                    var $contentElement = mapDisplay.closest('.content-element');
196                    var offset = $contentElement.offset();
197                    var rect = $contentElement[0].getBoundingClientRect();
198                    var headerHeight = $('.dentist-map-header').height();
199                    var mapHeight = Math.min($contentElement.outerHeight(), window.innerHeight);
200
201                    offset.top += headerHeight;
202
203                    if ($contentElement.outerHeight() > window.innerHeight) {
204                        if (rect.top < -headerHeight && rect.bottom > window.innerHeight) {
205                            $map.css({
206                                position: 'fixed',
207                                top: 0,
208                                left: 0,
209                                right: 0,
210                                width: '100%',
211                                height: mapHeight
212                            });
213                        } else if (rect.bottom >= window.innerHeight) {
214                            $map.css({
215                                position: 'absolute',
216                                top: 'auto',
217                                left: 0,
218                                right: 0,
219                                width: '100%',
220                                height: mapHeight
221                            });
222                        } else {
223                            $map.css({
224                                position: 'absolute',
225                                top: offset.top + $contentElement.outerHeight() - Math.min($contentElement.outerHeight(), window.innerHeight),
226                                left: 0,
227                                right: 0,
228                                width: '100%',
229                                height: mapHeight-130
230                            });
231                        }
232                    } else {
233                        $map.css({
234                            position: 'absolute',
235                            top: 'auto',
236                            left: 0,
237                            right: 0,
238                            width: '100%',
239                            height: mapHeight-130
240                        });
241                    }
242                }
243
244                $(window).on('load resize scroll', resizeMap);
245            });
246        }
247    });
248
249    Ractive.components.dentistMap = DentistMapComponent;
250
251})(jQuery, _);