https://www.hoteltentrem.com/wp-content/themes/tentrem-core/js/map.js?01_52_24&ver=1.2.6

1(function ($) {
2
3    function initMap() {
4        var center = [parseFloat(map_config.markers[0].latitude), parseFloat(map_config.markers[0].longitude)];
5        const map = new google.maps.Map(document.getElementById('map-canvas'), {
6            zoom: map_config.map_zoom,
7            center: new google.maps.LatLng(center[0], center[1]),
8            // gestureHandling: "none",
9            styles: styleResolved
10        });
11
12        // Hotel marker
13        let marker = new google.maps.Marker({
14            position: {
15                lat: parseFloat(map_config.markers[0].latitude),
16                lng: parseFloat(map_config.markers[0].longitude)
17            },
18            map: map,
19            title: map_config.markers[0].title,
20            icon: map_config.markers[0].icon_hotel,
21        });
22
23        // InfoWindow content
24        const contentString = '<div style="padding: 20px;"><h3 class="the_subtitle">' + map_config.markers[0].title + '</h3><div class="address">' + map_config.markers[0].address + '</div></div>';
25
26        const infowindow = new google.maps.InfoWindow({
27            content: contentString
28        });
29
30        marker.addListener('click', function () {
31            infowindow.open(map, marker);
32        });
33
34
35        if ($('body').hasClass('page-template-template-contacts')) {
36            let markers = [];
37            var infowindows = [];
38            // Create markers and infowindows
39            map_config.markers.forEach(function (marker) {
40                var marker = new google.maps.Marker({
41                    position: new google.maps.LatLng(marker.latitude, marker.longitude),
42                    map: map,
43                    icon: marker.icon_hotel,
44                    title: marker.title,
45                    address: marker.address,
46                    id_poi: marker.id_poi,
47                });
48
49                const contentString = '<div style="padding: 20px;"><h3 class="the_subtitle">' + marker.title + '</h3><div class="address">' + marker.address + '</div></div>';
50
51                var infowindow = new google.maps.InfoWindow({
52                    content: contentString
53                });
54
55                markers[marker.id_poi] = marker;
56                infowindows[marker.id_poi] = infowindow;
57
58                // Add click event listener to open infowindow
59                marker.addListener('click', function () {
60                    // Close all infowindows
61                    infowindows.forEach(function (infowindow) {
62                        infowindow.close();
63                    });
64
65                    // Open the infowindow for the clicked marker
66                    infowindow.open(map, marker);
67                });
68            });
69
70
71            // Function to trigger click event on a marker
72            function triggerMarkerClick(markerId) {
73                if (markers[markerId]) {
74                    google.maps.event.trigger(markers[markerId], 'click');
75                }
76            }
77
78            // Event listener for select change
79            document.getElementById('change_hotel_contact').addEventListener('change', function () {
80                var selectedId = this.value;
81                var selectedLocation = map_config.markers.find(location => location.id_poi === selectedId);
82
83                if (selectedLocation) {
84                    var newCenter = new google.maps.LatLng(selectedLocation.latitude, selectedLocation.longitude);
85                    map.setZoom(15); // Set the desired zoom level here
86                    map.setCenter(newCenter);
87
88                    // Trigger click event on the selected marker
89                    triggerMarkerClick(selectedId);
90                }
91            });
92        }
93
94
95        directionsService = new google.maps.DirectionsService(), directionsDisplay = new google.maps.DirectionsRenderer({
96            suppressMarkers: false,
97            markerOptions: {zIndex: 10}
98        });
99
100
101        if ($('#map_info').size() > 0) {
102            initialize_calc_route();
103            $('#itinerarySubmit').on('click', function () {
104
105                var start = $('input#itineraryFrom').val();
106                calcRoute(start, detectMode(), map);
107            });
108        }
109    }
110
111
112    function detectMode() {
113        var anchorSelected = $('.itinerary_mode.active');
114        return anchorSelected.attr('data-travelmode');
115    }
116
117    function initialize_calc_route() {
118        itinerary_map_config = {mode: 'car', currentHotel: {}};
119        //$('#itinerarySubmit').click(calcRoute);
120        $('#itineraryMode').click(function () {
121            if ($(this).hasClass('car')) {
122                itinerary_map_config.mode = 'feet';
123                $(this).removeClass('car').addClass('feet').html($(this).attr('data-feet')).attr('title', $(this).attr('data-feet'));
124            } else {
125                itinerary_map_config.mode = 'car';
126                $(this).removeClass('feet').addClass('car').html($(this).attr('data-car')).attr('title', $(this).attr('data-car'));

127            }
128        });
129    }
130
131    function calcRoute(start, mode, map) {
132        mode = mode || (itinerary_map_config.mode == 'car' ? 'DRIVING' : 'WALKING');
133
134        var end = map_config.markers[0].latitude + ',' + map_config.markers[0].longitude,
135            request = {
136                origin: start,
137                destination: end,
138                travelMode: google.maps.DirectionsTravelMode[mode]
139            }, itineraryTitle;
140
141
142        if ($.trim(start) == '') {
143            alert('Insert the starting point');
144            return;
145        }
146
147        directionsService.route(request, function (response, status) {
148            if (status == google.maps.DirectionsStatus.OK) {
149                itineraryTitle = $('#itinerary_container .title span').html() + ' ' +
150                    ':';
151                if ($('.itineraryPanelWrapper').length == 0) {
152                    $('#map_directions_content').append(
153                        $('<div/>', {'class': 'itineraryPanelWrapper'})
154                            .append($('<div/>', {'class': 'title'}))
155                            .append($('<div/>', {id: 'itineraryPanel'}))
156                    );
157                }
158                directionsDisplay.setMap(map);
159                directionsDisplay.setPanel(document.getElementById('itineraryPanel'));
160                directionsDisplay.setDirections(response);
161
162                if ($('#map_directions').size() > 0) {
163
164                    $('#map_directions').fadeIn(function () {
165                        $('.close').click(function () {
166
167                            $('#map_directions').fadeOut(function () {
168                                directionsDisplay.setMap(null);
169
170                                if ($('body').hasClass('single-hotel')) {
171                                    var hotel = new google.maps.LatLng(map.markers[0]['latitude'], map.markers[0]['longitude']);
172                                    map.setZoom(map_zoom);
173                                    map.setCenter(hotel);
174                                } else {
175                                    map.setZoom(map_zoom);
176                                    map.fitBounds(all_bounds['map_canvas']);
177                                }
178                            });
179                        });
180                    });
181                }
182            } else {
183                alert('ERROR');
184            }
185        });
186    }
187
188
189    window.addEventListener('load', (event) => {
190        initMap();
191    });
192
193}(jQuery));