InvalidValueError: not an instance of HTMLInputElement (Google maps)

Question

I am trying to make a simple autocomplete field for google map places, but I get the following error message even though my field is HtmlInputElement

InvalidValueError: not an instance of HTMLInputElement

html:

<input type="text" id="input"/>
<div id="map" style="width: 200px; height: 200px;"></div>

js:

$(document).ready(function(){
    var map_input = $('#input');
    setTimeout(function(){initMap()},'5000');
    function initMap() {
        var map = new google.maps.Map($('form #map'), {
            center: {lat: 33.8892846, lng: 35.539302},
            zoom: 11
        });

        var autocomplete = new google.maps.places.Autocomplete(map_input);
        var marker = new google.maps.Marker({
            map: map
        });

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            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 the place has a geometry, then present it on a map.
            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);
        });
    }
});

check this jsfiddle

Answer 1

Your "input element" is not an instance of HTMLInputElement. It is a JQuery array. This will work:

var map_input = $('#input')[0];

proof of concept fiddle

code snippet:

$(document).ready(function(){
    var map_input = $('#input')[0];
    setTimeout(function(){initMap()},'5000');
    function initMap() {
        var map = new google.maps.Map($('form #map'), {
            center: {lat: 33.8892846, lng: 35.539302},
            zoom: 11
        });
        
        var autocomplete = new google.maps.places.Autocomplete(map_input);
        var marker = new google.maps.Marker({
            map: map
        });

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            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 the place has a geometry, then present it on a map.
            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);
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="text" id="input"/>
<div id="map" style="width: 200px; height: 200px;"></div>

Answer 2

You need to access the DOM elements directly instead of the jQuery object - e.g. change $('#map') to $('#map')[0].