How to automatically draw a geofence over a searched area?

See more:

Javascript

Google-Maps

HTML5

, +

The Requirement -> When we search a place in google map it comes with a thin border around the searched place. I require that same thing in my angular app.

Here is the script which I am using in the code:- https://maps.googleapis.com/maps/api/jskey=&libraries=visualization,geometry,places

Open this link to what I am expecting: - https://i.stack.imgur.com/cWd6c.png

What I have tried:

app.component.html

<input type="text" id="pac-input" placeholder="Search.." class="form-control" maxlength="100"/>

app.component.ts

initAutocomplete() { 
    const input = document.getElementById('pac-input') as HTMLInputElement;
    const searchBox = new google.maps.places.SearchBox(input);
    const markers: google.maps.Marker[] = []; 
    searchBox.addListener('places_changed', () => {
      const places = searchBox.getPlaces();
      this.findOrganisation.Center = {};
      this.findOrganisation.GeoFence = [];
      if (places.length === 0) {
        this.showGeoCodeNotAvailable = true;
        return;
      }
      const resultPlace = places[0];
      this.findOrganisation.Address = resultPlace.formatted_address;
      if (!resultPlace.geometry) {
        this.registerService.getLatLngByLocation(resultPlace.formatted_address).subscribe((res) => {
          if (res['status'] === 'OK') {
            this.findOrganisation.Center = {
              Lat: res['results'][0].geometry.location.lat,
              Lng: res['results'][0].geometry.location.lng
            };
            this.findOrganisation.GeoFence = this.generateGeoJSONCircle(new google.maps.LatLng(this.findOrganisation.Center.Lat, this.findOrganisation.Center.Lng),
              this.distance, this.directions);
          } else {
            this.showGeoCodeNotAvailable = true;
          }
        }, (err) => {
          this.showGeoCodeNotAvailable = true;
        });
      } 
    });
  }