InvalidValueError: not an instance of HTMLInputElement

Question

FYI, I\'m not a JavaScript Ninja but felt like I\'ll become one when I did a lot of things based on Google Maps recently.

I implemented a map. User can search for go

Answer 1

Your field is TEXTAREA, and from last updates, google maps autocomplete now supports only window.HTMLInputElement (INPUT tag).

Answer 2

I was facing the same issue some days ago, but I've found a solution, if someone is interested :) It's not perfect, it's very tricky, but it does 95% of the job ! I know it's a very old topic, but if it can save somebody...

The idea is to add a custom textarea, and bind the original input text value to the textarea (with keyup, keypress, keydown, change events).

$('.MyInput').on('keyup keydown keypress change', function() {
  $('myTextarea').val($(this).val());
  emptyPlaceholder($(this), 'Myplaceholder text');
});

function emptyPlaceholder(input, placeholder) {
     // The placeholder of the textarea will hide if the input has a value
     if (input.val().length) {
         $('#triggerInput').attr('placeholder', '');
     } else {
         $('#triggerInput').attr('placeholder', placeholder);
     }
 }

Add some css to " hide " the original input. It will hide what you're writing in the input, then you'll only see what is written in your textarea (Important: the z-index of the input has to be superior than textarea one !)

.MyInput {
   color: transparent;
   background-color: transparent; 
}

It's far from being perfect, and I'm open if someone has a better solution !