[Google Places] [Google Autocomplete] country restriction

[Google Places] [Google Autocomplete] country restriction

  
Forge Component
(5)
Published on 3 Apr by Ouen Worth
5 votes
Published on 3 Apr by Ouen Worth

how do i add restriction for countries in the Google Autocomplete Widget?

Hello M E,

First, be careful, because this component has as dependency the ARDO JSon component that does not have a version for platform 10 (that has their own actions to serialize/deserialize JSon), and on certain situations (in the recent past), in platform 10 we had conflicts with him (specifically in the FullCalendar2).

In any case, while is possible to limit the list of countries (you can see the answer here and the documentation mentioned in the components page), it seems that there is no "direct way" of passing options to the component.

So, or you clone the component and implement it yourself (maybe suggest the code to change), or you can try to do it through JavaScript in your page, but I think it will be a "mess" to it this way...

Hope it helps.

Cheers,
Eduardo Jauch

As to change the component, in the AddressLookup web block, you probably would have to change the code.
Now it is like this:

"<script>
function initialise(inputWidgetId, returnGoogleResultId) {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete[inputWidgetId] = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(inputWidgetId)),
      { types: " + If(TypeId = Entities.Type.all,"[]","['" + EncodeJavaScript(GetType(TypeId).Type.typetext) + "']") + " });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete[inputWidgetId], 'place_changed', function() {
    fillInAddress(inputWidgetId, returnGoogleResultId);
  });
}
</script>"

And you should change to something like this:

"<script>
function initialise(inputWidgetId, returnGoogleResultId) {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  
var options = {
    types: " + If(TypeId = Entities.Type.all,"[]","['" + EncodeJavaScript(GetType(TypeId).Type.typetext) + "']") + "
    componentRestrictions: {country: "us"}
};
  autocomplete[inputWidgetId] = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(inputWidgetId)), options);
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete[inputWidgetId], 'place_changed', function() {
    fillInAddress(inputWidgetId, returnGoogleResultId);
  });
}
</script>"

Hope it helps (I didn't tested it, it is just an idea)
Cheers,
Eduardo Jauch