Google map Canada country state boundary not generate

• We have tried to set state boundary for the canada country but it's not generated we have to use the boundary style polygon api for google map " https://developers.google.com/maps/documentation/javascript/dds-boundaries/style-polygon ".
• We have checked that code for other countries and it works well but only in Canada, it's not working.
• help me to solve this issue.
• Below we have mentioned the code for Alppy the Google map.

//Index.js File 

let map;
var marker;
let featureLayer;
const lat = lats[0];
const lng =lngs[0];
console.log(lats[0] , lngs[0],place_id,city);
console.log(typeof lng,typeof lat,typeof place_id ,typeof city);
async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"), {
        center: {          
            // // Atlanta Usa
            // lat: 33.748783,
            // lng: -84.388168,

            lat: lat,
            lng: lng,
        },

        zoom:12,
        mapId: "8f7f6d57a786f81a",
    });

    featureLayer = map.getFeatureLayer("LOCALITY");
    const featureStyleOptions = {
        strokeColor: "#810FCB",
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: "#810FCB",
        fillOpacity: 0.5,
    };
    featureLayer.style = (options) => {
            // Atlanta USA
        //if (options.feature.placeId == 'ChIJjQmTaV0E9YgRC2MLmS_e_mY') {
        //    return featureStyleOptions;
       // }

        // Stettler Canada 
        if (options.feature.placeId == place_id) {
           return featureStyleOptions;
        }
           
    };
   

        var point = new google.maps.LatLng(
            parseFloat(lat),
            parseFloat(lng));
        var marker = new google.maps.Marker({
            position: {
                lat: lat,
                lng: lng
            },
            map: map,
            title: 'Old Highway 80 Overpass',
            animation: google.maps.Animation.DROP
        });
        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    }

initMap();

//Index.blade.php File

@php
    $app_url = config('app.url');
    $google_map_key = config('services.google.google_map_api_key');
    $map_details = get_lat_long($areas->city);
    $place_id = $map_details['place_id'];
    if (Auth::user()->role_id != null) {
        foreach ($areas as $key => $area) {
            $area_id = Auth::user()->role_id == null ? $area : $area->region_id;
            $area = App\Models\Region::where('id', $area_id)->first();
            $area_ids[] = $area->id;
            $lat[] = floatval($area->latitude);
            $lng[] = floatval($area->longitude);
        }
    } else {
        $area_ids[] = $areas->id;
        $lat[] = floatval($areas->latitude);
        $lng[] = floatval($areas->longitude);
    }
@endphp




<div class="row mt-5">
    <div class="col-sm-12">
        <div id="map" class="responsive-map-container"></div>
    </div>
</div>

<script>
    let area_ids = {!! json_encode($area_ids) !!};
    let lats = {!! json_encode($lat) !!};
    let lngs = {!! json_encode($lng) !!};
    let place_id = {!! json_encode($place_id) !!}
    let city = {!! json_encode($areas->city) !!}
    
</script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script>
    let gkey = {!! json_encode($google_map_key) !!};
    (g => {
        var h, a, k, p = "The Google Maps JavaScript API",
            c = "google",
            l = "importLibrary",
            q = "__ib__",
            m = document,
            b = window;
        b = b[c] || (b[c] = {});
        var d = b.maps || (b.maps = {}),
            r = new Set,
            e = new URLSearchParams,
            u = () => h || (h = new Promise(async (f, n) => {
                await (a = m.createElement("script"));
                e.set("libraries", [...r] + "");
                for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                e.set("callback", c + ".maps." + q);
                a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                d[q] = f;
                a.onerror = () => h = n(Error(p + " could not load."));
                a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                m.head.append(a)
            }));
        d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() =>
            d[l](f, ...n))
    })
    ({
        key: gkey,
        v: "weekly"
    });
</script>
<script src="{{ asset('assets/js/map/map_index.js') }}"></script>

Above we have mentioned the code for the generate the marker and state boundary.

You can not mark boundaries as per the region you want for Canada country. The reason behind it is Google Maps is not having accessibility to display boundaries at its various levels such as Administrative Area 2, Locality & Postal code level of the area with its map. Google map only allows us to perform boundary marking on the Country & Administrative Area 1 level.

Additionally, you can check it with more reality cases over here using this below reference live demonstration provided by the Google Map console.
Google boundaries coverage Test URL: https://developers.google.com/maps/documentation/javascript/dds-boundaries/coverage