Why does geocoding let me choose an exact address and then once clicked show different city name? - geocoding

Question

This question concerns a variation on the Try It Yourself section on the Google Maps Place Autocomplete Address Sample, from which you can get a Fiddle with a demo API key.
The problem is I thought I had it working perfectly just now after spending two hours trying to get it to work the way I want. When I typed an address where I used to live, the autosuggest suggested my address, 82 hopkins rd, northfield, ct, then when I click the result it fills in my town as being Litchfield, CT, which is actually the larger town one town over, and also the same name of the County that Northfield is in. Google obviously knows about Northfield though it is a tiny town, because it shows the exact address I want but when I click it why would it show Litchfield? If I try some other towns, etc. I don't see this happening. I imagine there is no solution because when I tried to change:
{types: ['geocode']}); to {types: ['(cities)']}); and tried typing in Northfield, then it showed other states with the town Northfield but not Connecticut. So I guess my old town is too small for Google to care about but then why show it in the autosuggest? Strange...
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = {
locality: 'short_name',
administrative_area_level_1: '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;
}
}lat = place.geometry.location.lat();
lng = place.geometry.location.lng();
document.getElementById('lat').value = lat;
document.getElementById('lon').value = lng;
}
// 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());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=NOTMYREALKEYHERE&libraries=places&callback=initAutocomplete"
async defer></script>

Answer 1

You're seeing these results because Northfield is not a city. According to Wikipedia, Northfield, CT is "an unincorporated village in the town of Litchfield, Litchfield County, Connecticut". However, you're in luck: The example that you're viewing is using the API output address_component, where formatted_address for your place is correctly listed as 82 Hopkins Rd, Northfield, CT 06778, USA.
From the "Geocoding Address Types section" in the Google Maps Javascript API documentation, there are a wide variety of types of geocoding result. Some, like locality, require incoporation; sublocality_level_1 through sublocality_level_5 refer to areas narrower than that.
Even without your Javascript, you can do a search:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=YOUR_KEY&inputtype=textquery&input=82+hopkins+rd,+northfield,+ct
...to get a place ID of ChIJZYpAVT2W54kRPnm9uVA3cpc, and then you can do a subsequent place search:
https://maps.googleapis.com/maps/api/place/details/json?key=YOUR_KEY&place_id=ChIJZYpAVT2W54kRPnm9uVA3cpc
...to reveal the different types of address component:
"address_components" : [
{
"long_name" : "82",
"short_name" : "82",
"types" : [ "street_number" ]
},
{
"long_name" : "Hopkins Road",
"short_name" : "Hopkins Rd",
"types" : [ "route" ]
},
{
"long_name" : "Northfield",
"short_name" : "Northfield",
"types" : [ "neighborhood", "political" ]
},
{
"long_name" : "Litchfield",
"short_name" : "Litchfield",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Litchfield",
"short_name" : "Litchfield",
"types" : [ "administrative_area_level_3", "political" ]
},
{
"long_name" : "Litchfield County",
"short_name" : "Litchfield County",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Connecticut",
"short_name" : "CT",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "United States",
"short_name" : "US",
"types" : [ "country", "political" ]
},
{
"long_name" : "06778",
"short_name" : "06778",
"types" : [ "postal_code" ]
}
To your point, this also gives a formatted_address of 82 Hopkins Rd, Northfield, CT 06778, USA, which is what you're looking for.
In the example you quoted, which is the "try it yourself" section on the Place Autocomplete Address Form sample, there are two separate processes happening: The Autocomplete searches for your address and suggests a formatted address, and then the place details call unpacks the structured pieces of the address as needed. However, as in the code comments:
<!-- Note: Selection of address components in this example is typical.
You may need to adjust it for the locations relevant to your app. See
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
-->
Thus, by tweaking the form as I have in this Fiddle, you can see that your formatted address includes Northfield, listed as a Neighborhood, even though the city is properly Litchfield. Note that this is also location-specific behavior, as "1600 Pennsylvania Avenue, Washington DC" returns a Neighborhood of "Northwest Washington" is omitted from the formatted address.
Thus, to get the behavior you want, just use the formatted_address, or consider expanding the address_components to provide the granularity you need.