Custom Address for Google Autocomplete Search Box

Question

I have an autocomplete (Places Autocomplete by Google) on my website that works fine and is restricted to the boundaries I have. But there are some locations that are missing when somebody types it in the search box, even though these locations do exist on the actual Google Maps. The javascript implementation for the Autocomplete is below.

function initAutocomplete(){
      var areaboundary = new google.maps.LatLngBounds(
          new google.maps.LatLng(51.377809, -3.508688),
          new google.maps.LatLng(51.628119, -2.954925)
      );


  var options = {
    bounds: areaboundary,
    strictBounds: true,
    types: ['geocode'],
    componentRestrictions: {country: 'uk'}
  };
  var input = document.getElementById('property-location');
  autocomplete = new google.maps.places.Autocomplete(input, options);



  autocomplete.addListener('place_changed', function(){
    var place = autocomplete.getPlace();

    if(place.length === 0){
      return;
    }

    if(place.formatted_address == "Cardiff, UK"){
      jQuery("#property-radius-sale option[value=5]").prop("selected", true);
      jQuery("#property-radius-rent option[value=5]").prop("selected", true);
    }

    var lat = place.geometry.location.lat();
    var lng = place.geometry.location.lng();
    var coordinates = [lat, lng];

    var hidden_input = document.getElementById("lat-lng-location");
    hidden_input.value = coordinates;
  });
}

The location I am trying to add is this one:

Location to be added

The reason why I need this specific address is because the addresses the come up on the website do include Cardiff Bay as well.

My question is, how can one add a custom address/location with the lng and lat to the Places Autocomplete?

Answer 1

The specific issue you have with Cardiff Bay, UK is caused by the types parameter. The place is considered as a natural feature and is not returned by the API if you specify the geocode type.

It will be listed though if you don't specify a type, or use types: ['geocode', 'establishment'] which according to the docs is identical to specifying no type.

 function initialize() { var ac = new google.maps.places.Autocomplete( (document.getElementById('autocomplete')), { componentRestrictions: { country: 'uk' } }); ac.addListener('place_changed', function() { var place = ac.getPlace(); if (!place.geometry) { // User entered the name of a Place that was not suggested and // pressed the Enter key, or the Place Details request failed. window.alert("No details available for input: '" + place.name + "'"); return; } var html = '<div>Latitude: ' + place.geometry.location.lat() + '</div>'; html += '<div>Longitude: ' + place.geometry.location.lng() + '</div>'; document.getElementById('geometry').innerHTML = html; }); }

 body, html { padding: 10px; } #autocomplete { width: 400px; } #geometry { margin-top: 10px; background: lightblue; padding: 10px 20px; }

 <input id="autocomplete" value="Cardiff Bay" type="text"> <div id="geometry"> </div> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initialize"> </script>