Geographic Search Box Limit to a single Country

dan25 · January 18, 2019, 11:50am

Continuing the discussion from Exclude exact addresses from geographic search:

Thanks to @kramwe, we can create a little div (HTML/CSS/JS) to enable city specific search powered by google, and with another simple line of java script we can limit the search to a specific country (for example France):

componentRestrictions: {country: ‘fr’}

Taking into account that the function “Limit Result Around” from the Search Box input doesn’t work, can anyone Show how to implement the Script to an existing Search Box?

github.com

number-cruncher/bubble/blob/master/google_maps_api_limited_to_city.html#L75




<body>


    <div id="locationField" class = "search-box">
      <input id="autocomplete" class="input-box" placeholder="Enter your city",type="text"></input>
    </div>


  <script>
    var placeSearch, autocomplete;
    var options = {
    types: ['(cities)']
    };


    function initAutocomplete() {
      autocomplete = new google.maps.places.Autocomplete(
          (document.getElementById('autocomplete')), options);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
      async defer></script>
</body>

Or at least is this possible?

It’ll be nice to have the design of the Search Box but with a REAL function of Limiting the Search to a Country, and to cities.

Maybe you @keith, know if this is possible.

Thank you all

system · March 29, 2019, 11:50am

This topic was automatically closed after 70 days. New replies are no longer allowed.