https://bloezem.nl/wp-content/themes/sk-bl/js/map/simple.js?ver=1.0.366

1// Constants
2const CONFIG = {
3    DEFAULT_CENTER: { lat: jQuery('.single-location-map-embed').data('lat'), lng: jQuery('.single-location-map-embed').data('lng') },
4    DEFAULT_ZOOM: 15,
5    MAP_ID: 'map',
6    MARKER_ICON: {
7        PATH: sk_bl_map_simple.marker_icon,
8        WIDTH: '39px',
9        HEIGHT: '46px'
10    }
11};
12
13class SimpleMapManager {
14    constructor() {
15        this.map = null;
16        this.marker = null;
17        this.directionsService = null;
18        this.directionsRenderer = null;
19    }
20
21    async initialize() {
22        try {
23            // Load required libraries
24            const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
25                google.maps.importLibrary("maps"),
26                google.maps.importLibrary("marker")
27            ]);
28
29            // Initialize the map
30            this.map = new Map(document.getElementById("simple-map"), {
31                zoom: CONFIG.DEFAULT_ZOOM,
32                center: CONFIG.DEFAULT_CENTER,
33                mapId: CONFIG.MAP_ID,
34                zoomControl: false,
35                mapTypeControl: false,
36                streetViewControl: false,
37                fullscreenControl: false,
38            });
39
40            // Create marker content
41            const markerContent = document.createElement('div');
42            markerContent.className = 'custom-marker';
43            
44            const markerImage = document.createElement('img');
45            markerImage.src = CONFIG.MARKER_ICON.PATH;
46            markerImage.style.width = CONFIG.MARKER_ICON.WIDTH;
47            markerImage.style.height = CONFIG.MARKER_ICON.HEIGHT;
48            markerContent.appendChild(markerImage);
49
50            // Add marker to map
51            this.marker = new AdvancedMarkerElement({
52                position: CONFIG.DEFAULT_CENTER,
53                content: markerContent,
54                map: this.map
55            });
56
57            // Initialize directions service
58            this.directionsService = new google.maps.DirectionsService();
59            this.directionsRenderer = new google.maps.DirectionsRenderer({
60                map: this.map
61            });
62
63            // Add click listeners to route elements
64            this.setupRouteListeners();
65
66        } catch (error) {
67            console.error('Failed to initialize map:', error);
68        }
69    }
70
71    setupRouteListeners() {
72        document.querySelectorAll('.map-route').forEach(element => {
73            element.addEventListener('click', () => {
74                if ('geolocation' in navigator) {
75                    navigator.geolocation.getCurrentPosition(
76                        (position) => {
77                            const origin = {
78                                lat: position.coords.latitude,
79                                lng: position.coords.longitude
80                            };
81                            this.calculateAndDisplayRoute(origin);
82                        },
83                        (error) => {
84                            console.error('Error getting location:', error);
85                            alert('Unable to get your location. Please enable location services.');
86                        }
87                    );
88                } else {
89                    alert('Geolocation is not supported by your browser');
90                }
91            });
92        });
93    }
94
95    calculateAndDisplayRoute(origin) {
96        const destination = this.marker.position;
97        
98        this.directionsService.route({
99            origin: origin,
100            destination: destination,
101            travelMode: google.maps.TravelMode.DRIVING
102        }, (response, status) => {
103            if (status === 'OK') {
104                this.directionsRenderer.setDirections(response);
105            } else {
106                console.error('Directions request failed:', status);
107                alert('Could not calculate route');
108            }
109        });
110    }
111}
112
113// Initialize map when DOM is ready
114jQuery(document).ready(() => {
115    const mapElement = document.getElementById('simple-map');
116    if (mapElement) {
117        const mapManager = new SimpleMapManager();
118        mapManager.initialize().catch(error => {
119            console.error('Failed to initialize SimpleMapManager:', error);
120        });
121    } else {
122        console.log('Map element not found on page, skipping map initialization');
123    }
124});