How to add Google Maps Autocomplete search box

Question

I am trying to add a Google autocomplete search box to a website so that users can search for an address as easily as possible   My problem is  I have looked a numerous questions on here as well as the Google Maps Javascript API v3 regarding this and some tutorials yet they all bundle together the autocomplete functionality with mapping it on an embedded Google map   I don t need to map the location visually  I just need the autocomplete box for now  unfortunately I cannot work out which parts of the API are relevant to this and every example I have looked at includes plenty of JS for mapping    How can I ONLY add the autocomplete input functionality

User · Answer

I am currently using the Google API to retrieve the location that the user enters in the form/ input. I'm also using an angular function that showing the current location and suggests a city name pin code etc... - add google API index.html.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&libraries=geometry,places"></script>
- add id in input box to get string & charcters.
<input id="autocomplete" type="text"(keydown)="checkAddress($event.target.value)">
- and create function on your component.ts file.
import these file

import * as _ from 'lodash';
declare var google: any;

 checkAddress(value) {
    if (!value) {
      this.model.location = _.cloneDeep(value);
      this.rfpForm.controls['location'].setValue(this.model.location);
    }
  }

initLocationAutocomplete() {
    let autocomplete, place;
    const getLocation = () => {
        place = autocomplete.getPlace();
        if (place && (place.formatted_address || place.name)) {  
            // if you want set value in your form controls like this
            this.model.location = _.cloneDeep(place.formatted_address || place.name);
            // YourFormName.controls['location'].setValue(this.model.location);
            // YourFormName.controls['location']['_touched'] = true;
        }
    };
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), { types: ['geocode'] });
    autocomplete.addListener('place_changed', getLocation);
}

User · Answer

lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Place Autocomplete Address Form lt  title gt       lt meta name  viewport  content  initial-scale 1 0  user-scalable no  gt       lt meta charset  utf-8  gt       lt style gt        html  body   map-canvas           height  100           margin  0px          padding  0px              lt  style gt       lt link type  text css  rel  stylesheet  href  https   fonts googleapis com css family Roboto 300 400 500  gt       lt script src  https   maps googleapis com maps api js v 3 exp amp signed in true amp libraries places  gt  lt  script gt       lt script gt     This example displays an address form  using the autocomplete feature    of the Google Places API to help users fill in the information   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 initialize          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    google maps event addListener autocomplete   place changed   function         fillInAddress                 START region fillform  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            Get each component of the address from the place details      and fill the corresponding field on the form    for  var i   0  i  lt  place address components length  i          var addressType   place address components i  types 0       if  componentForm addressType           var val   place address components i  componentForm addressType          document getElementById addressType  value   val                  END region fillform       START region geolocation     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   new google maps LatLng            position coords latitude  position coords longitude         var circle   new google maps Circle           center  geolocation          radius  position coords accuracy                 autocomplete setBounds circle getBounds                       END region geolocation        lt  script gt        lt style gt         locationField   controls           position  relative          width  480px                 autocomplete           position  absolute          top  0px          left  0px          width  99                  label           text-align  right          font-weight  bold          width  100px          color   303030                 address           border  1px solid  000090          background-color   f0f0ff          width  480px          padding-right  2px                 address td           font-size  10pt                 field           width  99                  slimField           width  80px                 wideField           width  200px                 locationField           height  20px          margin-bottom  2px               lt  style gt     lt  head gt      lt body onload  initialize    gt       lt div id  locationField  gt         lt input id  autocomplete  placeholder  Enter your address               onFocus  geolocate    type  text  gt  lt  input gt       lt  div gt       lt  body gt   lt  html gt

User · Answer

So I ve been playing around with this and it seems you need both places and js maps api activated  Then use the following  HTML   lt input id  quot searchTextField quot  type  quot text quot  size  quot 50 quot  gt   lt input id  quot address quot  name  quot address quot  value    type  quot hidden quot  placeholder  quot  quot  gt   JS   lt script gt  function initMap       var input   document getElementById  searchTextField      var autocomplete   new google maps places Autocomplete input     autocomplete addListener  place changed   function         var place   autocomplete getPlace        document getElementById  quot address quot   value   JSON stringify place address components            lt  script gt    lt script src  quot https   maps googleapis com maps api js key YOUR API KEY amp libraries places amp callback initMap quot  async defer gt  lt  script gt

User · Answer

Follow the below code   Add this to your TS file   declare this  top of your class    declare var google    declare the view child for Map and the input    ViewChild  mapElement    static  true   mapNativeElement  ElementRef   ViewChild  autoCompleteInput    static  true   inputNativeElement  any    this method is run on ngOnInit   event or ngAfterViewInit   event   autoComplete         const map   new google maps Map this mapNativeElement nativeElement          center   lat  -33 8688  lng  151 2093         zoom  7              const infowindow   new google maps InfoWindow        const infowindowContent   document getElementById  infowindow-content         infowindow setContent infowindowContent        const marker   new google maps Marker         map  map        anchorPoint  new google maps Point 0  -29              const autocomplete   new google maps places Autocomplete this inputNativeElement nativeElement as HTMLInputElement       autocomplete addListener  place changed        gt          infowindow close          marker setVisible false         const place   autocomplete getPlace           let cus location             lat  place geometry location lat            long  place geometry location lng                  console log  place data                     cus location          localStorage setItem  LOC DATA   this helper encryptData cus location           if   place geometry               User entered the name of a Place that was not suggested and            pressed the Enter key  or the Place Details request failed          window alert  No details available for input      place name            return                 if  place geometry viewport            map fitBounds place geometry viewport           else           map setCenter place geometry location           map setZoom 17       Why 17  Because it looks good                 marker setPosition place geometry location         marker setVisible true         let address             if  place address components            address                place address components 0   amp  amp  place address components 0  short name                    place address components 1   amp  amp  place address components 1  short name                    place address components 2   amp  amp  place address components 2  short name                  join                      if infowindowContent           infowindowContent children  place-icon   src   place icon          infowindowContent children  place-name   textContent   place name          infowindowContent children  place-address   textContent   address                  infowindow open map  marker                  calling the method on ngAfterViewInit   ngAfterViewInit    void       this autoComplete          And this is the HTML code  please modify as per your need    lt ion-content fullscreen gt       lt div class  location-col  gt             lt div class  google-map  gt               lt  --  lt img src        assets images google-map jpg  alt    gt  -- gt               lt div  mapElement id  map  gt  lt  div gt           lt  div gt             lt div class  location-info  gt               lt h2 gt Where is your car located  lt  h2 gt               lt p gt Enter address manually or click location detector icon to use current address  lt  p gt               lt div class  form-group  gt                    lt div class  location-row  gt                       lt input type  text   autoCompleteInput class  location-input    ngModel    search location  placeholder  Search location  gt                       lt span class  location-icon   click   getCurrentLocation    gt                           lt img src        assets images location-icon svg  alt    gt                       lt  span gt                   lt  div gt                    lt button type  button  class  location-search-btn   click   goToVendorSearch    gt                       lt i class  fa fa-angle-right  gt  lt  i gt                   lt  button gt                lt  div gt           lt  div gt       lt  div gt   lt  ion-content gt

User · Answer

for me work this    x000D   x000D   lt input type  text required id  autocomplete  gt  x000D   x000D   lt script gt  x000D  function initAutocomplete     x000D     new google maps places Autocomplete  x000D             document getElementById  autocomplete     x000D             types    geocode    x000D        x000D    x000D   lt  script gt  x000D   lt script src  https   maps googleapis com maps api js key  amp libraries places amp callback initAutocomplete  x000D                  async defer gt  lt  script gt  x000D   x000D   x000D

User · Answer

Use Google Maps JavaScript API with places library to implement Google Maps Autocomplete search box in the webpage   HTML   lt input id  searchInput  class  controls  type  text  placeholder  Enter a location  gt    JavaScript   lt script gt  function initMap         var input   document getElementById  searchInput        var autocomplete   new google maps places Autocomplete input      lt  script gt      Complete guide  source code  and live demo can be found from here - Google Maps Autocomplete Search Box with Map and Info Window

User · Answer

A significant portion of this code can be eliminated   HTML excerpt    lt head gt           lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false amp libraries places  gt  lt  script gt         lt  head gt   lt body gt           lt input id  searchTextField  type  text  size  50  gt         lt  body gt    Javascript   function initialize       var input   document getElementById  searchTextField      new google maps places Autocomplete input      google maps event addDomListener window   load   initialize

User · Answer

Just copy and paste the sameple code below    lt  DOCTYPE html gt   lt html gt       lt head gt           lt script src  https   maps googleapis com maps api jsvv 3 exp amp sensor false amp libraries places  gt  lt  script gt       lt  head gt       lt body gt           lt label for  locationTextField  gt Location lt  label gt           lt input id  locationTextField  type  text  size  50  gt            lt script gt              function init                     var input   document getElementById  locationTextField                    var autocomplete   new google maps places Autocomplete input                              google maps event addDomListener window   load   init            lt  script gt       lt  body gt   lt  html gt    Well formatted code can be found from this link  http   jon kim how-to-add-google-maps-autocomplete-search-box

User · Answer

To get latitude and longitude too  you can use this simple code    lt html gt   lt head gt       lt script type  text javascript  src  https   maps googleapis com maps api js key YOUR API KEY amp libraries places  gt  lt  script gt       lt script gt          function initialize               var input   document getElementById  searchTextField              var autocomplete   new google maps places Autocomplete input               google maps event addListener autocomplete   place changed   function                      var place   autocomplete getPlace                    document getElementById  city2   value   place name                  document getElementById  cityLat   value   place geometry location lat                    document getElementById  cityLng   value   place geometry location lng                                      google maps event addDomListener window   load   initialize        lt  script gt   lt  head gt   lt body gt       lt input id  searchTextField  type  text  size  50  placeholder  Enter a location  autocomplete  on  runat  server    gt         lt input type  hidden  id  city2  name  city2    gt       lt input type  hidden  id  cityLat  name  cityLat    gt       lt input type  hidden  id  cityLng  name  cityLng    gt   lt  body gt   lt  html gt

User · Answer

To use Google Maps Places APIs now  you re required to use an API Key  So the API URL will change from    lt script src  https   maps googleapis com maps api js v 3 exp amp signed in true amp libraries places  gt  lt  script gt    to   lt script type  text javascript  src  https   maps googleapis com maps api js key YOUR API KEY amp libraries places  gt  lt  script gt

User · Answer

lt input id  autocomplete  placeholder  Enter your address  type  text   gt   lt script src    Scripts jquery-1 10 2 min js  gt  lt  script gt   lt script type  text javascript  src  https   mapenter code heres googleapis com maps api js key AIzaSyC7vPqKI7qjaHCE1SPg6i d1HWFv1BtODo amp libraries places  gt  lt  script gt   lt script type  text javascript  gt      function initialize              new google maps places Autocomplete           document getElementById  autocomplete                   types    geocode                          initialize      lt  script gt

User · Answer

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 poenter code heresition          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

User · Answer

I am using jQuery here to get the entered text and wrapping all code in   document  ready    Make sure you have your API key ready for Google Places API Web service  Replace it in the below script file        lt input type  text  id  location  gt   lt script type  text javascript  src  https   maps googleapis com maps api js key  YOUR KEY HERE  amp libraries places  gt  lt  script gt   lt script src  javascripts scripts js  gt  lt  scripts gt    Use script file to load the autocomplete class  Your scripts js file will look something like this          scripts js custom js file   document  ready function         google maps event addDomListener window   load   initialize        function initialize         var input   document getElementById  location        var autocomplete   new google maps places Autocomplete input

[javascript] How to add Google Maps Autocomplete search box?

Examples related to javascript

Examples related to google-maps-api-3

Examples related to autocomplete