https://zeroo.ch/wp-content/themes/Avada/js/joe_1_autocomplete1.js

1const input = document.getElementById("pac-input");
2// Define Place Autocomplete Search Center
3const center = {
4    lat: 47.5569497,
5    lng: 8.8567757
6};
7// Define Place Autocomplete Search Priority Bound
8const defaultBounds = {
9    north: center.lat + 0.3,
10    south: center.lat - 0.3,
11    east: center.lng + 0.3,
12    west: center.lng - 0.3,
13  };
14// Create Place Autocomplete Option
15const options = {
16    bounds: defaultBounds,
17    componentRestrictions: {
18        country: "ch"
19    },
20    // fields: ["formatted_address", "geometry", "name"],
21    fields: ["geometry"],
22    origin: center,
23    strictBounds: false,
24    types: ["address"],
25};
26// Set default result for testing and no-result value
27var last_result = "0";
28var query_result = "no result..."
29
30// initiate Place Autocomplete
31function initPAC() {
32    const autocomplete = new google.maps.places.Autocomplete(input, options);
33    autocomplete.addListener("place_changed", () => {
34        // get dynamic Parameters here
35        var res_service_layer_name = "project_res:parcel_4566";
36        var query = []
37        var place = autocomplete.getPlace();
38        query_result = "no result..."
39        if (place.geometry.location) {
40            pos = place.geometry.location
41            var lat = pos.lat()
42            var lng = pos.lng()
43            query["parcel_area_min"] = 1000 // Dynamic parameter to fetch from Wordpress
44            query["cz_canton"] = "Wohn-_und_Arbeitszone_2" // Dynamic parameter to fetch from Wordpress
45            query_result = `LAT: ${lat}, LON: ${lng} <br>`
46            var source = new proj4.Proj('EPSG:4326');    //source coordinates will be in Longitude/Latitude
47            proj4.defs("EPSG:21781","+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs");
48            var dest = new proj4.Proj('EPSG:21781');     //destination coordinates in LCC, south of France
49            var p = new proj4.Point(lng,lat);   //any object will do as long as it has 'x' and 'y' properties
50            p_21781 = proj4.transform(source, dest, p);   //do the transformation.  x and y are modified in place
51            
52
53            // **if Query is needed
54            // var CQL_FILTER_TEXT = `parcel_area> ${query["parcel_area_min"]} and strToLowerCase(cz_canton) like '%${query["cz_canton"]}%' and INTERSECTS(geom, Point(${lng} ${lat}))`
55            
56            // **if Query is not needed
57            var CQL_FILTER_TEXT = `INTERSECTS(geom, Point(${p_21781.x} ${p_21781.y}))`
58
59            // Print out Query Text
60            console.log(`Query text: ${CQL_FILTER_TEXT}`)
61
62            // fetch the JSON from server
63            $.ajax('https://apps.joe.in.th/proxy/http://46.243.90.203:8080/geoserver/project_res/ows', {
64                type: 'GET',
65                data: {
66                    service: 'WFS',
67                    version: '1.1.0',
68                    request: 'GetFeature',
69                    typename: res_service_layer_name,
70                    CQL_FILTER: CQL_FILTER_TEXT,
71                    srs: 'EPSG:4326',
72                    outputFormat: 'text/javascript',
73                },
74                dataType: 'jsonp',
75                jsonpCallback: 'callback:handleJson',
76                jsonp: 'format_options',
77                // success: function() {
78                //     console.log(this.url)
79                // }
80            })
81        }
82        $("#query-result").html(query_result)
83
84    })
85}
86
87function handleJson(geojson_data) {
88    // show result in Wordpress
89    // ...
90    result_temp = geojson_data
91    query_result += 
92    `
93    <pre class="line-numbers">
94        <code class="lang-js">
95          ${JSON.stringify(geojson_data, undefined, 2)} 
96        </code>
97     </pre>
98    `
99    if (geojson_data.features.length !== 0) {
100        query_result += "Flag: true"
101        
102        flag = true
103        $("#query-result").html(query_result)
104    } else {
105        query_result += "Flag: false"
106        flag = false
107        $("#query-result").html(query_result)
108    }
109}