{"id":4623,"date":"2022-12-07T11:17:26","date_gmt":"2022-12-07T11:17:26","guid":{"rendered":"https:\/\/www.brandon.ded.aveqdev.nl\/test\/"},"modified":"2023-03-02T08:53:42","modified_gmt":"2023-03-02T08:53:42","slug":"test","status":"publish","type":"page","link":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/test\/","title":{"rendered":"test"},"content":{"rendered":"<div class=\"filter-bar\">\n<div class=\"form-group\">\n    <label for=\"map4625-address\">Address<\/label>\n    <input type=\"search\" id=\"map4625-address\" value=\"\" placeholder=\"Please give an Address\">\n<\/div>\n<div class=\"form-group\">\n    <label for=\"map4625-category\">Choose a category<\/label>\n    <select name=\"categories\" id=\"map4625-category\">\n        <option value=\"\">Show all<\/option>\n        <option value=\"3\">default<\/option><option value=\"5\">dylan<\/option><option value=\"4\">new<\/option><option value=\"6\">test<\/option>\n    <\/select>\n<\/div><\/div>\n<style>\n    #map-4625 {\n      height: 600px;\n      width: 100%;\n    }\n<\/style>\n<div class=\"google-maps-container\">\n    <div class=\"map\" id=\"map-4625\"><\/div>\n<\/div>\n<script async defer>\nasync function initMap4625() {\n    let mapOptions = {\n        zoom: 5,\n        center: new google.maps.LatLng(49.815273, 6.129583),\n        mapTypeId: \"terrain\",\n        zoomControl: true,\n        mapTypeControl: true,\n        scaleControl: true,\n        streetViewControl: true,\n        rotateControl: true,\n        fullscreenControl: true\n    }\n    mapOptions.styles = [\r\n    {\r\n        \"featureType\": \"all\",\r\n        \"elementType\": \"geometry.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"weight\": \"2.00\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"all\",\r\n        \"elementType\": \"geometry.stroke\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#9c9c9c\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"all\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"all\",\r\n        \"elementType\": \"labels.text\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"administrative\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"weight\": \"0.78\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"administrative\",\r\n        \"elementType\": \"geometry\",\r\n        \"stylers\": [\r\n            {\r\n                \"lightness\": \"-4\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"landscape\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#f2f2f2\"\r\n            },\r\n            {\r\n                \"weight\": \"0.01\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"landscape\",\r\n        \"elementType\": \"geometry.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#ffffff\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"landscape.man_made\",\r\n        \"elementType\": \"geometry.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#ffffff\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"landscape.man_made\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"poi\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"saturation\": -100\r\n            },\r\n            {\r\n                \"lightness\": 45\r\n            },\r\n            {\r\n                \"weight\": \"0.45\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road\",\r\n        \"elementType\": \"geometry.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#eeeeee\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road\",\r\n        \"elementType\": \"labels.text.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#7b7b7b\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road\",\r\n        \"elementType\": \"labels.text.stroke\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#ffffff\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road.highway\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"simplified\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road.highway\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"road.arterial\",\r\n        \"elementType\": \"labels.icon\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"transit\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"transit\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"transit\",\r\n        \"elementType\": \"labels.text\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"transit\",\r\n        \"elementType\": \"labels.icon\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"transit.line\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"transit.station\",\r\n        \"elementType\": \"labels\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"water\",\r\n        \"elementType\": \"all\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#e2eff4\"\r\n            },\r\n            {\r\n                \"visibility\": \"on\"\r\n            },\r\n            {\r\n                \"lightness\": \"67\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"water\",\r\n        \"elementType\": \"geometry.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#e3e9e8\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"water\",\r\n        \"elementType\": \"labels.text\",\r\n        \"stylers\": [\r\n            {\r\n                \"visibility\": \"off\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"water\",\r\n        \"elementType\": \"labels.text.fill\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#070707\"\r\n            }\r\n        ]\r\n    },\r\n    {\r\n        \"featureType\": \"water\",\r\n        \"elementType\": \"labels.text.stroke\",\r\n        \"stylers\": [\r\n            {\r\n                \"color\": \"#ffffff\"\r\n            }\r\n        ]\r\n    }\r\n]\n\n    let map = new google.maps.Map(document.getElementById(\"map-4625\"), mapOptions);\n\n    const url = new URL(window.location);\n    let category = url.searchParams.get('category') ?? undefined;\nif (category && !isNaN(category)) {\n    category = Number(category);\n}\nconst categoryFilterOptions = document.querySelectorAll(\"#map4625-category option\");\nfor (categoryFilterOption of categoryFilterOptions) {\n  if (Number(categoryFilterOption.value) === category) {\n    categoryFilterOption.selected = 'selected';\n  }\n}\n    let address = url.searchParams.get('address');\nif (address) {\n    const geocoder = new google.maps.Geocoder();\n    geocoder.geocode({ address }, function(results, status) {\n        if (status == 'OK') {\n            const place = results[0];\n            if (place.geometry.viewport) {\n                map.fitBounds(place.geometry.viewport);\n            } else {\n                map.setCenter(place.geometry.location);\n                map.setZoom(17);\n            }\n            mapOptions.center = map.getCenter();\n        }\n    });\n}\n    \n    const response = await fetch('http:\/\/www.brandon.ded.aveqdev.nl\/wp-json\/wp\/v2\/maps\/4625\/markers');\n    const markers = await response.json();\n\n    let previousOpenedWindow = null;\n    for (let markerData of markers) {\n        let marker = new google.maps.Marker({\n            position: new google.maps.LatLng(...markerData.position),\n            icon: markerData.icon === null ? null : {\n                url: markerData.icon.url, \/\/ url\n                scaledSize: new google.maps.Size(...markerData.icon.size), \/\/ scaled size\n                origin: new google.maps.Point(0,0), \/\/ origin\n                anchor: new google.maps.Point(0, 0) \/\/ anchor\n            },\n            map,\n        });\n        markerData.marker = marker;\n        marker.setVisible(typeof category === \"undefined\" || markerData.categories.includes(category));\n        \n        let markerListItem = document.getElementById(\"list-item-\"+markerData.id);\n        if (markerListItem) {\n            markerListItem.addEventListener('click', function() {\n                map.setCenter(marker.position);\n            });\n        }\n        \n        if (markerData.content.length > 0) {\n            marker.addListener('click', function() {\n                if (previousOpenedWindow) {\n                  previousOpenedWindow.close();\n                }\n                let infowindow = new google.maps.InfoWindow({\n                    content: markerData.content,\n                });\n                previousOpenedWindow = infowindow;\n                infowindow.open(map, marker);\n            });\n        }\n    }\n\n    getMarkerObjects = () => markers.filter(el => el.marker.visible).map(el => el.marker);\n\nconst markerCluster = new markerClusterer.MarkerClusterer({ map, markers: getMarkerObjects(), renderer: {\n    render({ count, position }, stats ) {\n          \/\/ create svg url with fill color\n        const svg = window.btoa(`\n        <svg fill=\"#ff0000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 240 240\">\n          <circle cx=\"120\" cy=\"120\" opacity=\".6\" r=\"70\" \/>\n          <circle cx=\"120\" cy=\"120\" opacity=\".3\" r=\"90\" \/>\n          <circle cx=\"120\" cy=\"120\" opacity=\".2\" r=\"110\" \/>\n        <\/svg>`);\n\n        \/\/ create marker using svg icon\n        return new google.maps.Marker({\n            position,\n            icon: {\n                url: `data:image\/svg+xml;base64,${svg}`,\n                scaledSize: new google.maps.Size(45, 45),\n            },\n            label: {\n                text: String(count),\n                color: \"rgba(255,255,255,0.9)\",\n                fontSize: \"12px\",\n            },\n            title: `Cluster of ${count} markers`,\n            \/\/ adjust zIndex to be above other markers\n            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,\n        });\n    }\n}});\n\n    let addressCenter = mapOptions.center;\n    \n    \/\/ handle clicks from the list\n    jQuery('#marker-list-4625 ul').on('click', 'li', (e) => {\n        const markerId = Number(e.currentTarget.dataset.id);\n        const markerData = markers.find((el) => el.id === markerId);\n        const marker = markerData.marker;\n        map.setCenter(marker.position);\n        if (previousOpenedWindow) {\n            previousOpenedWindow.close();\n        }\n        let infowindow = new google.maps.InfoWindow({\n            content: '<p>'+markerData.content+'<\/p>',\n        });\n        previousOpenedWindow = infowindow;\n        infowindow.open(map, marker);\n        document.getElementById('map-4625').scrollIntoView({behavior: 'smooth'})\n    })\n\n    let visibleMarkers = [];\n    let page = 1;\n    const loadMoreButton = jQuery('#marker-list-4625 .load-more');\n    loadMoreButton.on('click', showMoreResults);\n    async function setListToVisibleMarkers() {\n        const markerList = document.querySelector('#marker-list-4625 ul');\n        if (markerList === null) {\n            return;\n        }\n        markerList.innerHTML = '';\n        page = 1;\n        visibleMarkers = markers.filter(el => el.marker.visible);\n        if (visibleMarkers.length > 10) {\n            loadMoreButton.show();\n        }\n        \n        if (addressCenter !== null) {\n    const lat1 = addressCenter.lat();\n    const lng1 = addressCenter.lng();\n    visibleMarkers\n    .forEach(markerData => {\n        const lat2 = markerData.marker.position.lat();\n        const lng2 = markerData.marker.position.lng();\n\n        const latDiff = (lat2-lat1) * Math.PI\/180;\n        const lnfDiff = (lng2-lng1) * Math.PI\/180;\n\n        const a = Math.sin(latDiff\/2) * Math.sin(latDiff\/2) +\n                  Math.cos(lat1 * Math.PI\/180) * Math.cos(lat2 * Math.PI\/180) *\n                  Math.sin(lnfDiff\/2) * Math.sin(lnfDiff\/2);\n        markerData.distance = Math.atan2(Math.sqrt(a), Math.sqrt(1-a));                \n    });\n}\nvisibleMarkers.sort((a, b) => a.distance - b.distance);\n        visibleMarkers\n            .slice(0, 10)\n            .forEach(markerData => {\n                markerList.innerHTML += '<li class=\"marker-list-item\" data-id=\"'+markerData.id+'\"><div>'+markerData.image+'<div class=\"marker-list-description\">'+markerData.listContent+'<\/div><\/div><\/li>';\n            });\n    }\n    setListToVisibleMarkers();\n    \n    function showMoreResults() {\n        const markerList = document.querySelector('#marker-list-4625 ul');\n        page += 1; \/\/ 20, 40\n        visibleMarkers\n            .slice(page * 10, page * 10 + 10)\n            .forEach(markerData => {\n                markerList.innerHTML += '<li class=\"marker-list-item\" data-id=\"'+markerData.id+'\"><div>'+markerData.image+'<div class=\"marker-list-description\">'+markerData.listContent+'<\/div><\/div><\/li>';\n            });\n        if (visibleMarkers.length < page * 10 + 10) {\n            loadMoreButton.hide();\n        }\n    }\n\n    \/\/ store the original event binding function\nconst inputbox = document.getElementById('map4625-address')\nconst autocomplete = new google.maps.places.Autocomplete(inputbox);\nvar _addEventListener = (inputbox.addEventListener) ? inputbox.addEventListener : inputbox.attachEvent;\n\nfunction addEventListenerWrapper(type, listener) {\n    \/\/ Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,\n    \/\/ and then trigger the original listener.\n    if (type == \"keydown\") {\n        var orig_listener = listener;\n        listener = function (event) {\n            var suggestion_selected = jQuery(\".pac-item-selected\").length > 0;\n            if (event.which == 13 && !suggestion_selected) {\n                var simulated_downarrow = jQuery.Event(\"keydown\", {keyCode:40, which:40})\n                orig_listener.apply(inputbox, [simulated_downarrow]);\n            }\n\n            orig_listener.apply(inputbox, [event]);\n        };\n    }\n\n    \/\/ add the modified listener\n    _addEventListener.apply(inputbox, [type, listener]);\n}\n\nif (inputbox.addEventListener) inputbox.addEventListener = addEventListenerWrapper;\nelse if (inputbox.attachEvent) inputbox.attachEvent = addEventListenerWrapper;\n\nautocomplete.bindTo(\"bounds\", map);\nautocomplete.addListener(\"place_changed\", () => {\n    if (previousOpenedWindow) {\n        previousOpenedWindow.close();\n    }\n    let url = new URL(window.location)\n    const place = autocomplete.getPlace();\n\n    if (!place.geometry || !place.geometry.location) {\n        map.setCenter(mapOptions.center);\n        map.setZoom(mapOptions.zoom);\n        addressCenter = null;\n        url.searchParams.delete('address');\n        window.history.replaceState(null, null, url)\n        return;\n    }\n    if (place.geometry.viewport) {\n        map.fitBounds(place.geometry.viewport);\n    } else {\n        map.setCenter(place.geometry.location);\n        map.setZoom(17);\n    }\n    const address = place.formatted_address;\n    url.searchParams.set('address', address);\n    window.history.replaceState(null, null, url)\n    if (!place.geometry || !place.geometry.location) {\n        return;\n    }\n\n    addressCenter = place.geometry.location;\n\n    setListToVisibleMarkers();\n});\n\n    \/\/ > logic for category field\ndocument.getElementById(\"map4625-category\").addEventListener('change', (e) => {\n    category = e.target.value ? Number(e.target.value) : undefined;\n    let url = new URL(window.location)\n    url.searchParams[category ? 'set' : 'delete']('category', category);\n    window.history.replaceState(null, null, url)\n    for (let markerData of markers) {\n        markerData.marker.setVisible(typeof category === \"undefined\" || markerData.categories.includes(category));\n    }\n    markerCluster.clearMarkers();\nmarkerCluster.addMarkers(getMarkerObjects());\n    if (previousOpenedWindow) {\n        previousOpenedWindow.close();\n    }\n    setListToVisibleMarkers();\n});\n}\n<\/script>\n\n            <div class=\"marker-list\" id=\"marker-list-4625\">\n                <ul><\/ul>\n                <button style=\"display:none\" class=\"load-more \">Show more<\/button>\n            <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/pages\/4623"}],"collection":[{"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/comments?post=4623"}],"version-history":[{"count":7,"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/pages\/4623\/revisions"}],"predecessor-version":[{"id":4635,"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/pages\/4623\/revisions\/4635"}],"wp:attachment":[{"href":"http:\/\/www.brandon.ded.aveqdev.nl\/en\/wp-json\/wp\/v2\/media?parent=4623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}