Google Autocomplete HTMLInputElement error

Question

I am using Google Autocomplete and am getting this error

InvalidValueError: not an instance of HTMLInputElement

I think Google has getElementById for deprication

var input = /** @type {!HTMLInputElement} */(
  document.getElementById('pac-input'));

However i'm unsure on it's usage. My code below

var options ={
    types:['(cities)'],
};

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

google.maps.event.addDomListener(window, 'load', initialize);

score 2 · Answer 1 · edited Apr 20 '16 at 16:50

2

Use onFocus="functionName()" which calls google.maps.autocomplete on input tag.

edited Apr 20 '16 at 16:50

Misa Lazovic

2,805
10
32
38

answered Apr 20 '16 at 16:31

Guneet Singh

41
7

score 0 · Answer 2 · answered May 06 '21 at 15:37

0

I also had this problem and it worked using this

  let searchInputField = document.getElementsByClassName('search-form')[0].getElementsByTagName('input')[0]

  let autocomplete = new google.maps.places.Autocomplete(searchInputField);

answered May 06 '21 at 15:37

Kerox

590
1
8
14

Please add some explanation as why the OP's code does not work and your works. – Birju Shah May 06 '21 at 16:03

score 0 · Answer 3 · answered Jul 07 '21 at 11:48

When you get the element it returns an array, so:

    const memberPlace = $("#place");
    const memberAddress = $("#address");
    const options = {
        fields: ["address_components", "geometry", "icon", "name"],
        strictBounds: false,
        types: ["establishment"],
    };

    if (memberPlace.length) {
        new google.maps.places.Autocomplete(memberPlace[0], options);
    }

    if (memberAddress.length) {
        new google.maps.places.Autocomplete(memberAddress[0], options);
    }

score -1 · Answer 4 · answered Feb 09 '16 at 14:16

-1

check if the your function is in $(document).ready function or your document.getElementById won't be found by js (cos it tries to find it before it appears in document)

answered Feb 09 '16 at 14:16

Aleksey Spirin

170
2
8

score -2 · Answer 5 · answered Jan 13 '16 at 16:08

-2

It's because you overwrite your input variable. Should work if you just use var input = /** @type {!HTMLInputElement} */( document.getElementById('pac-input')); or replace "pac-input" with "destination"

answered Jan 13 '16 at 16:08

user2718671

2,866
9
49
86

Google Autocomplete HTMLInputElement error

5 Answers5