Can't find any examples of google.maps.places.PlacesServices() that searches from an input field with ponent restrictions, just like autoplete. Google site only has reference material, no examples

I have this below but getting an error saying

TypeError: Cannot read property 'innerHTML' of undefined

and

TypeError: Cannot read property 'findPlaceFromQuery' of null

findLocationFromPlaces() {
    this.placesService = new google.maps.places.PlacesService(this.cityInput);

    const request = {
      query: 'San Francisco',
      fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry']
    };

    this.placesService.findPlaceFromQuery(request
      // {
      //   types: ['(cities)']
      //   // ponentRestrictions: { country: this.countrySelected },
      //   // types: ['geocode']  // 'establishment' / 'address' / 'geocode'
      // }
    ,
    (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        
      }
      else {
          
      }
    }
    );
  }

Can't find any examples of google.maps.places.PlacesServices() that searches from an input field with ponent restrictions, just like autoplete. Google site only has reference material, no examples

I have this below but getting an error saying

TypeError: Cannot read property 'innerHTML' of undefined

and

TypeError: Cannot read property 'findPlaceFromQuery' of null

findLocationFromPlaces() {
    this.placesService = new google.maps.places.PlacesService(this.cityInput);

    const request = {
      query: 'San Francisco',
      fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry']
    };

    this.placesService.findPlaceFromQuery(request
      // {
      //   types: ['(cities)']
      //   // ponentRestrictions: { country: this.countrySelected },
      //   // types: ['geocode']  // 'establishment' / 'address' / 'geocode'
      // }
    ,
    (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        
      }
      else {
          
      }
    }
    );
  }

My "this.cityInput" is

@ViewChild('city') cityInput: HTMLDivElement;

<input appGooglePlaces id="city" (onSelect)="setAddress($event)" (keydown.Tab)="onTabAway($event)" (focusout)="focusOutFunction($event)" (input)="onLocationChange($event)" [ngClass]="{'is-invalid': registerForm.get('city').errors && registerForm.get('city').touched}"
  formControlName="city" class="form-control google-place-input" [placeholder]="placeholder">

• javascript
• google-maps
• google-places-api
• google-places-autoplete

1 Answer 1

The Places service is used for place searches. It cannot behave like the Autoplete service does. Furthermore, you cannot pass ponentRestrictions to findPlaceFromQuery(). This method takes 3 parameters only: query, fields and the optional locationBias (which biases but does not restrict the area to search).

The documentation for Find Place from Query can be found here, and here's a working example.

If you also wish to implement Autoplete functionality and e.g. restrict results to a specific country, please use the actual Autoplete service.

Edit for mapless options:

1. Find place from query

   function findLocationFromPlaces() {
       let placesService = new google.maps.places.PlacesService(document.getElementById("map")); // i.e. <div id="map"></div>
   
       const request = {
           query: 'San Francisco',
           fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry']
       };
   
       placesService.findPlaceFromQuery(request, function(results, status) {
           if (status === google.maps.places.PlacesServiceStatus.OK) {
               console.log(results[0].formatted_address) // San Francisco, CA, USA
           }
           else {
               console.log("doesn't work");
           }
       });
   }
   

2. Autoplete in address form (full example here) + country restriction

   function initAutoplete() {
     // Create the autoplete object, restricting the search predictions to
     // geographical location types.
     autoplete = new google.maps.places.Autoplete(
         document.getElementById('autoplete'), {types: ['geocode'], ponentRestrictions: {country: 'us'}});
   
     // Avoid paying for data that you don't need by restricting the set of
     // place fields that are returned to just the address ponents.
     autoplete.setFields(['address_ponent']);
   
     // When the user selects an address from the drop-down, populate the
     // address fields in the form.
     autoplete.addListener('place_changed', fillInAddress);
   }
   
   function fillInAddress() {
     // Get the place details from the autoplete object.
     var place = autoplete.getPlace();
   
     for (var ponent in ponentForm) {
       document.getElementById(ponent).value = '';
       document.getElementById(ponent).disabled = false;
     }
   
     // Get each ponent of the address from the place details,
     // and then fill-in the corresponding field on the form.
     for (var i = 0; i < place.address_ponents.length; i++) {
       var addressType = place.address_ponents[i].types[0];
       if (ponentForm[addressType]) {
         var val = place.address_ponents[i][ponentForm[addressType]];
         document.getElementById(addressType).value = val;
       }
     }
   }
   

3. Find Place web service (documentation here)

   https://maps.googleapis./maps/api/place/findplacefromtext/json?input=San%20Francisco&inputtype=textquery&fields=photos,formatted_address,name,rating,opening_hours,geometry&key=YOUR_API_KEY

4. Autoplete web service (documentation here) + country restriction

   https://maps.googleapis./maps/api/place/autoplete/json?input=San+Francisco&types=geocode&ponents=country:us&key=YOUR_API_KEY

Hope this clarifies your question!