Restrict Google Autocomplete results using bounds option - google-maps

Question

I am trying to use Google Places Autocomplete and restrict the results to a specific city in Canada, namely Toronto. I am aware that using the componentRestrictions option will allow me to restrict the results to Canada by using componentRestrictions: {country: 'CA'}. In order to further restrict the results to Toronto, I understand that I have to add the bounds property to the options object. The LatLngBounds expects south-west and north-east corners, which are also referred to as bottom-left and top-right corners.
I found this sample code which implements this strategy for the City of Hyderabad in Pakistan and it works perfectly:
var input = document.getElementById('searchTextField');
var southWest = new google.maps.LatLng( 25.341233, 68.289986 );
var northEast = new google.maps.LatLng( 25.450715, 68.428345 );
var HyderabadBounds = new google.maps.LatLngBounds( southWest, northEast );
var options = {
bounds: HyderabadBounds,
types: ['address'],
componentRestrictions: { country: 'PK' }
};
var autocomplete = new google.maps.places.Autocomplete( input, options);
When I try to modify the code to work for an area in Canada, for some reason it is not working. Here is my modified code:
var input = document.getElementById('searchTextField');
var southWest = new google.maps.LatLng( 43.941160, -78.895187 );
var northEast = new google.maps.LatLng( 42.946172, -81.296577 );
var TorontoBounds = new google.maps.LatLngBounds( southWest, northEast );
var options = {
bounds: TorontoBounds,
types: ['address'],
componentRestrictions: { country: 'CA' }
};
var autocomplete = new google.maps.places.Autocomplete( input, options);
The only thing different about my modified code is the country designation CA and the LatLng coordinates which I believe to be correct. I double-checked my coordinates and the southWest coordinate refers to a location southWest of Toronto and the northEast coordinate refers to a location northEast of Toronto, so I would expect that these should work. Although my results are properly restricted to Canada, they are not within my bounds as specified by the LatLng coordinates.
Can anyone see what I might be doing wrong?

Answer 1

Your northEast and southWest points are named incorrectly. Change their names:
var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);
If I set them to:
var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);
The bounds object is correct.
proof of concept fiddle
code snippet:
// 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">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var input = document.getElementById('searchTextField');
var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);
var SWmark = new google.maps.Marker({
map: map,
position: southWest,
title: southWest.toUrlValue(6),
label: "SW"
});
var NEmark = new google.maps.Marker({
map: map,
position: northEast,
title: northEast.toUrlValue(6),
label: "NE"
});
var TorontoBounds = new google.maps.LatLngBounds(southWest, northEast);
var rectangle = new google.maps.Rectangle({
map: map,
bounds: TorontoBounds
});
map.fitBounds(TorontoBounds);
var options = {
bounds: TorontoBounds,
types: ['address'],
componentRestrictions: {
country: 'CA'
}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="pac-container">
<input id="searchTextField" type="text" placeholder="Enter a location">
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>