Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set the language of google autocomplete form to English?

I'm following this Google example of places autocomplete adressform.

The problem is that if I insert "Rome, Italy" the form returns in City "Roma" and in Country "Italia" (the language is Italian). I don't want the italian name, I want the English name. In the same example, if I insert "Roma, Italia" or "Rome, Italy" I want the form returns in City "Rome" and in Country "Italy".

What should I do for setting the language of the form only in English?

Here the javascript part:

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

And here the api with the key:

<script src="https://maps.googleapis.com/maps/api/js?key=[API key]&libraries=places&callback=initAutocomplete" async defer></script>

Thanks in advance

like image 748
fabius Avatar asked Jan 23 '26 04:01

fabius


1 Answers

You can change the language by adding &language=[language here] to the script tag. For English, that would be: &language=en

An example:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=en"
type="text/javascript">
</script>

This is described here and there is a working example here.

like image 86
Dexter Avatar answered Jan 24 '26 19:01

Dexter