I would like to limit the search results for my google map to within a specific latLngBounds range.

places search api - lists this this addListener function to change the bounds:

google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});

I replaced this with:

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

searchBox.setBounds(defaultBounds);

However it doesn't seem to work. Can anyone point me in the right direction to limit the search results to the default bounds regardless of current map viewpoint?

Here is the current code I have based on the API:

function initialize() {

var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.9128292, -98.8563538),
new google.maps.LatLng(30.0964251, -97.9431152));
map.fitBounds(defaultBounds);

// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
  document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}

// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
  var image = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  };

  // Create a marker for each place.
  var marker = new google.maps.Marker({
    map: map,
    icon: image,
    title: place.name,
    position: place.geometry.location
  });

  markers.push(marker);

  bounds.extend(place.geometry.location);
}

map.fitBounds(bounds);
});
// [END region_getplaces]

   searchBox.setBounds(defaultBounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

I would like to limit the search results for my google map to within a specific latLngBounds range.

places search api - lists this this addListener function to change the bounds:

google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});

I replaced this with:

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

searchBox.setBounds(defaultBounds);

However it doesn't seem to work. Can anyone point me in the right direction to limit the search results to the default bounds regardless of current map viewpoint?

Here is the current code I have based on the API:

function initialize() {

var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.9128292, -98.8563538),
new google.maps.LatLng(30.0964251, -97.9431152));
map.fitBounds(defaultBounds);

// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
  document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}

// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
  var image = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  };

  // Create a marker for each place.
  var marker = new google.maps.Marker({
    map: map,
    icon: image,
    title: place.name,
    position: place.geometry.location
  });

  markers.push(marker);

  bounds.extend(place.geometry.location);
}

map.fitBounds(bounds);
});
// [END region_getplaces]

   searchBox.setBounds(defaultBounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

• javascript
• google-maps
• bounds

1 Answer 1

This is not "TO CHANGE" the bounds but to listen when the bounds were changed:

google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});

Pass {bound : new LatLngBounds.... } to:

new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

So something like this

Having your bounds object:

 var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

Pass it to contructor :

new google.maps.places.SearchBox(input, {bounds: defaultBounds});

Check out the reference for google.maps.places.SearchBox