CODEWITHSUNDEEP
javascriptgoogle-mapsbounds
MrGoodfellow
MrGoodfellow

Reputation: 89

limit the bounds for google maps api search to only one area

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);

Upvotes: 3

Views: 7781

Answers (1)

sabotero
sabotero

Reputation: 4365

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

Upvotes: 5

Related Questions