Proximity facet – get the ‘address_components’ and types of the clicked place

<?php

// Gets the 'address_components' of the place clicked/selected in a Proximity facet.
// Note that the 'address_components' array consists of multiple components per item. 
// E.g. for 'Amsterdam' it contains the long_name, short_name and types[] for the city, the province and the country.
// More info:
// https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult
// https://developers.google.com/maps/documentation/javascript/reference/geocoder#GeocoderAddressComponent

add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {
        $(document).on('click', '.location-result', function() {
          var $facet = $(this).closest('.facetwp-facet');
          var place_id = $(this).attr('data-id');
          var description = $(this).find('.result-description').text();

          FWP_MAP.placesService.getDetails({
            placeId: place_id,
            fields: ['address_components']
          }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              var firstaddresscomponent = place['address_components'][0]; // get only the first address_component, mostly the place name
              console.log(firstaddresscomponent['types']);
            }
          });
          
        });
      })(jQuery);
    </script>
  <?php
}, 100 );