I have configured the Google places autocomplete and after selecting search I am getting URL form data like so: http://127.0.0.1:8000/location/?term=1 York Street, Sydney NSW, Australia. I would like to get it configured so that it returns multiple name/value pairs like so: http://127.0.0.1:8000/location/?inputNumber=1&inputStreet=York Street&inputCity=Sydney&inputState=NSW&inputZip=2000

This is required as I am using a Django and would like to use the name/value pairs to help with retrieving data from the model.

This what I have configured in my script tags:

<script>
    function initMap() {
      var input = document.getElementById('search_term');
      const options = { types: ["address"], };
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.setComponentRestrictions({ country: ["au"], });
    }
  </script>
  <script async
    src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&libraries=places&callback=initMap">
  </script>

Any help would be appreciated?

CodePudding user response：

The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds. The service can be used to provide autocomplete functionality for text-based geographic searches, by returning places such as businesses, addresses and points of interest as a user types.

CodePudding user response：

To get the Google Places Autocomplete to return multiple name/value pairs in the URL, you can modify the initMap function to extract the individual components of the selected address and add them as query parameters to the URL.

Here's an example of how you can do this:

function initMap() {
  // Get the search term input element
  var input = document.getElementById('search_term');

  // Set the autocomplete options
  const options = { types: ["address"], };

  // Create the autocomplete object
  var autocomplete = new google.maps.places.Autocomplete(input);

  // Set the country restrictions
  autocomplete.setComponentRestrictions({ country: ["au"], });

  // Add a listener to the place_changed event to extract the address components
  // and add them as query parameters to the URL
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    var url = '/location/';
    var queryParams = [];

    // Iterate through the address components and add them as query parameters
    for (var i = 0; i < place.address_components.length; i  ) {
      var addressType = place.address_components[i].types[0];
      var shortName = place.address_components[i].short_name;
      if (addressType == 'street_number') {
        queryParams.push('inputNumber='   shortName);
      } else if (addressType == 'route') {
        queryParams.push('inputStreet='   shortName);
      } else if (addressType == 'locality') {
        queryParams.push('inputCity='   shortName);
      } else if (addressType == 'administrative_area_level_1') {
        queryParams.push('inputState='   shortName);
      } else if (addressType == 'postal_code') {
        queryParams.push('inputZip='   shortName);
      }
    }

    // Add the query parameters to the URL
    if (queryParams.length > 0) {
      url  = '?'   queryParams.join('&');
    }

    // Navigate to the URL
    window.location.href = url;
  });
}

This code sets up a listener for the place_changed event of the autocomplete object, which is triggered when the user selects a place from the autocomplete list. When the event is triggered, the code extracts the individual address components from the place object and adds them as query parameters to the URL. It then navigates to the URL using the window.location.href property.