I am using Google Autoplete 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 autoplete = new google.maps.places.Autoplete(input, options);
}

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

I am using Google Autoplete 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 autoplete = new google.maps.places.Autoplete(input, options);
}

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

• javascript
• google-api

5 Answers 5

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

I also had this problem and it worked using this

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

  let autoplete = new google.maps.places.Autoplete(searchInputField);

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

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

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

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

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)

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"