How to use containsLocation + searchBox Maps API?

Question

I have a polygon, and I want to know if an adrres entered in the Search Box is inside or outside the polygon. I always get 'No' as answer, no matter if the marker is inside or outside.

I think the problem is that containsLocation() is not detecting the polygon or something like that. But I already make a lot of changes and in this way is the closest I've got.

js code:

let map;
function initMap() {
    const myLatLng = {
        lat: 17.566220,
        lng: -99.400292
    };
    const map = new google.maps.Map(document.getElementById('map'), {
        center: myLatLng,
        zoom: 15,
        fullscreenControl: true,
        zoomControl: true,
        streetViewControl: false,
        mapTypeId: 'roadmap',
        mapTypeControl: false
    });


    const areaCoords = [{
            lat: 17.560037, //1
            lng: -99.4107077
        },
        {
            lat: 17.5597318, //2
            lng: -99.4088448
        },
        {
            lat: 17.5597312, //3
            lng: -99.4088533
        },
        {
            lat: 17.5596135, //4
            lng: -99.404423
        },
        {
            lat: 17.5589393, //5
            lng: -99.4036844
        },
        {
            lat: 17.5581569, //6
            lng: -99.4025945
        },
        {
            lat: 17.5576839, //7
            lng: -99.4026235
        },
        {
            lat: 17.5574645, //8
            lng: -99.398004
        },
        {
            lat: 17.5631744, //13
            lng: -99.3961746
        },
        {
            lat: 17.5636651, //14
            lng: -99.3946825
        },
        {
            lat: 17.5652166, //16
            lng: -99.3936269
        },
        {
            lat: 17.5675632, //17
            lng: -99.3930563
        },
        {
            lat: 17.5676036, //19
            lng: -99.3924198
        },
        {
            lat: 17.5693821, //20
            lng: -99.3910463
        },
        {
            lat: 17.572555, //22
            lng: -99.3922026
        },
        {
            lat: 17.5748519, //23
            lng: -99.3915589
        },
        {
            lat: 17.5754315, //24
            lng: -99.3948688
        },
        {
            lat: 17.5759028, //25
            lng: -99.3964329
        },
        {
            lat: 17.5652623, //26
            lng: -99.4094539
        },
    ];

    const areaCover = new google.maps.Polygon({
        paths: areaCoords,
        strokeColor: "#E6943B",
        strokeWeight: 1,
        fillColor: "#E6943B",
        fillOpacity: 0.35,
    });
   areaCover.setMap(map);
    

    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox(input);


    map.addListener("bounds_changed", () => {
        searchBox.setBounds(map.getBounds());
    });
    let markers = [];

    searchBox.addListener("places_changed", () => {
        const places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }
        // Clear out the old markers.
        markers.forEach((marker) => {
            marker.setMap(null);
        });
        markers = [];
        // For each place, get the icon, name and location.
        const bounds = new google.maps.LatLngBounds();
        places.forEach((place) => {
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }
            const icon = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25),
            };
            // Create a marker for each place.
            markers.push(
                new google.maps.Marker({
                    map,
                    icon,
                    title: place.name,
                    position: place.geometry.location,
                })
            );

            const coords = place.geometry.location.toUrlValue(6);
            var point = new google.maps.LatLng(coords);

            if (google.maps.geometry.poly.containsLocation(point, areaCover) == true) {
                console.log(coords);
            } else {
                console.log('no');
            }



            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);

    });

}

Answer 1

I already solved it. This is what I did.

let map;

function initMap() {
    const myLatLng = {
        lat: 17.566220,
        lng: -99.400292
    };
    const map = new google.maps.Map(document.getElementById('map'), {
        center: myLatLng,
        zoom: 15,
        fullscreenControl: true,
        zoomControl: true,
        streetViewControl: false,
        mapTypeId: 'roadmap',
        mapTypeControl: false
    });


    const areaCoords = [{
            lat: 17.560037, //1
            lng: -99.4107077
        },
        {
            lat: 17.5597318, //2
            lng: -99.4088448
        },
        {
            lat: 17.5597312, //3
            lng: -99.4088533
        },
        {
            lat: 17.5596135, //4
            lng: -99.404423
        },
        {
            lat: 17.5589393, //5
            lng: -99.4036844
        },
        {
            lat: 17.5581569, //6
            lng: -99.4025945
        },
        {
            lat: 17.5576839, //7
            lng: -99.4026235
        },
        {
            lat: 17.5574645, //8
            lng: -99.398004
        },
        {
            lat: 17.5631744, //13
            lng: -99.3961746
        },
        {
            lat: 17.5636651, //14
            lng: -99.3946825
        },
        {
            lat: 17.5652166, //16
            lng: -99.3936269
        },
        {
            lat: 17.5675632, //17
            lng: -99.3930563
        },
        {
            lat: 17.5676036, //19
            lng: -99.3924198
        },
        {
            lat: 17.5693821, //20
            lng: -99.3910463
        },
        {
            lat: 17.572555, //22
            lng: -99.3922026
        },
        {
            lat: 17.5748519, //23
            lng: -99.3915589
        },
        {
            lat: 17.5754315, //24
            lng: -99.3948688
        },
        {
            lat: 17.5759028, //25
            lng: -99.3964329
        },
        {
            lat: 17.5652623, //26
            lng: -99.4094539
        },
    ];

    const areaCover = new google.maps.Polygon({
        paths: areaCoords,
        strokeColor: "#E6943B",
        strokeWeight: 1,
        fillColor: "#E6943B",
        fillOpacity: 0.35,
    });
    
    areaCover.setMap(map);

    const input = document.getElementById("pac-input");
    const searchBox = new google.maps.places.SearchBox(input);


    map.addListener("bounds_changed", () => {
        searchBox.setBounds(map.getBounds());
    });
    let markers = [];

    searchBox.addListener("places_changed", () => {
        const places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }
        // Clear out the old markers.
        markers.forEach((marker) => {
            marker.setMap(null);
        });
        markers = [];
        // For each place, get the icon, name and location.
        const bounds = new google.maps.LatLngBounds();
        places.forEach((place) => {
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }
            const icon = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25),
            };
            // Create a marker for each place.
            markers.push(
                new google.maps.Marker({
                    map,
                    icon,
                    title: place.name,
                    position: place.geometry.location,
                })
            );



            if (google.maps.geometry.poly.containsLocation(place.geometry.location, areaCover) == true) {
                console.log('yes');
            } else {
                console.log('no');
            }



            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);

    });

}