CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangular-google-maps
Johhan Santana
Johhan Santana

Reputation: 2425

Filter Angular Google Maps search box to a place or radius

I'm trying to create a filter with angular-google-maps search box.

Right now, it displays every place possible but I would like it to only search cities in Puerto Rico

My code is similar from this example.

html:

<div class="row" style="margin-top: 15px;">
  <div class="col s12">
    <div id="map_canvas">
      <div id="searchbox">
        <label>Enter an address: </label>
      </div>
      <script type="text/ng-template" id="searchbox.tpl.html">
        <input type="text" placeholder="Search Box">
      </script>
    </div>
  </div>
  <div class="col s12">
    <!-- JUST ONE MARKER -->
    <ui-gmap-google-map
    center="pickUp || map.center"
    events="map.events"
    zoom="map.zoom">
      <ui-gmap-search-box
      parentdiv="'searchbox'"
      template="searchbox.template"
      events="searchbox.events"></ui-gmap-search-box>
      <ui-gmap-marker
      coords="pickUp"
      options="marker.options"
      events="marker.events"
      fit="true"
      idKey="0"></ui-gmap-marker>
    </ui-gmap-google-map>
  </div>
</div>

And here's the controller:

// SET MAP POSITION AND MARKER WHEN SEARCHING
var events = {
  places_changed: function (searchBox) {
    var place = searchBox.getPlaces()[0];
    console.log(place.geometry.location.lat());
    var lat = place.geometry.location.lat(),lon = place.geometry.location.lng();
    $scope.setLocation(lat, lon);
    $scope.map.center = {
      latitude: lat,
      longitude: lon
    };
  }
}
$scope.searchbox = { template:'searchbox.tpl.html', events:events};

And the config for it:

.config(function ($stateProvider, uiGmapGoogleMapApiProvider) {
  'ngInject';

  uiGmapGoogleMapApiProvider.configure({
    //    key: 'your api key',
    v: '3.20', //defaults to latest 3.X anyhow
    libraries: 'places' // Required for SearchBox.
  });
})

QUESTION

How can I make the searchbox for angular google maps only show the places for Puerto Rico?

Thanks!

Upvotes: 0

Views: 2206

Answers (1)

Teyam
Teyam

Reputation: 8112

Use the componentRestrictions options to restrict the autocomplete search to a particular country as mentioned in Set biases and search-area boundaries for Autocomplete.

Sample code that restricts the results to cities within France:

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Then, add SearchBox for autocompleting search terms. As mentioned:

You can attach the SearchBox to a text field and, as text is entered, the service will return predictions in the form of a drop-down pick list.

More details and samples regarding autocomplete for Addresses and Search Terms can be found in the documentation.

And, in addition to that, you may also use this SO post - How to limit google autocomplete results to City and Country only for references.

Upvotes: 1

Related Questions