CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-maps-api-3
urni
urni

Reputation: 49

customize autocomplete field in google map api

I am new to google map api ,there is a form in my project & two fields with name city and address. I want to search the location within that address and city only. How can I achieve this?initially i take only one field i.e location.but bound is not restrict the search. html part:

div class="form-group col-md-6 col-sm-6">
 <span>Location:</span>
<input type="text" id="search_txt" class="form-control" placeholder="Enter a location" />

js part:

google.maps.event.addDomListener(window, 'load', function () {

  var cityBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(18.520430,73.856744)
 );

var options = {
  bounds: cityBounds,
  types: ['(cities)'],  componentRestrictions: { country: 'in' }

};
 var input = document.getElementById('search_txt');
var autocomplete = new google.maps.places.Autocomplete(input, options);



  });

Upvotes: 1

Views: 4645

Answers (2)

abielita
abielita

Reputation: 13469

Based from this documentation, in order to use autocomplete, you will need to load the Google Places library using the libraries parameter in the bootstrap URL for the Google Maps JavaScript API.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Here is an example from Google docs:

This example displays an address form, using the autocomplete feature of the Google Places API to help users fill in the information. 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/jskey=YOUR_API_KEY&libraries=places">

  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

Check this related SO question: Google Map Autocomplete Form Customization

Upvotes: 0

Bhugy
Bhugy

Reputation: 711

Show what have you done so far.. Check this link also might help

google map api page

Also I have came across this while searching Check this out as well

Change the bounds of an existing Autocomplete

Call setBounds() to change the search area on an existing Autocomplete.

// Bias the autocomplete object to the user's geographical location, // as supplied by the browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude }; var circle = new google.maps.Circle({ center: geolocation, radius: position.coords.accuracy }); autocomplete.setBounds(circle.getBounds()); }); } }

Upvotes: 1

Related Questions