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 google places and place a marker for it. there's a text box for that. Or user can click on the map to place a marker to the place he's looking for or drag the marker.

Code remains the same. Design changed. Input field's id and name also same. No change to JS code. But this thing ain't working.

Here's the website

Google map is producing an error.

 InvalidValueError: not an instance of HTMLInputElement

I tried solution given here But error still remains.

What could be the possible reason?

Here's the code:

        var map;
        var marker;
        var latLngC;

        function initialize() 
        {
            latLngC = new google.maps.LatLng(14.5800, 121.0000);
            var mapOptions = {
        center: latLngC,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

            map = new google.maps.Map(document.getElementById('source_map'),
        mapOptions);

        var marker = new google.maps.Marker({
                position: latLngC,
                map: map,
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (x) 
            {
            document.getElementById('src_lat').value = x.latLng.lat();
            document.getElementById('src_long').value = x.latLng.lng();
            document.getElementById('pickup_location').innerHTML = x.latLng.lat()+' , '+x.latLng.lng();
                var geocoder = new google.maps.Geocoder;
                var infowindow = new google.maps.InfoWindow;                
            geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');
            }); 

            //Get coordinates,address Upon clicking a location in map (Source Map)
            //By Sajeev
            google.maps.event.addListener(map, 'click', function(x) 
            {
            document.getElementById('src_lat').value = x.latLng.lat();
            document.getElementById('src_long').value = x.latLng.lng();
            document.getElementById('pickup_location').innerHTML = x.latLng.lat()+' , '+x.latLng.lng();
                var geocoder = new google.maps.Geocoder;
                var infowindow = new google.maps.InfoWindow;                
            geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');
            });

        //Add marker upon clicking on map
            //google.maps.event.addDomListener(map, 'click', addMarker);
            google.maps.event.addDomListener(map, 'click', function() { addMarker(map); }); 



        var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));
        google.maps.event.addListener(places1, 'place_changed', function () {
            var place1 = places1.getPlace();

            var src_addr = place1.formatted_address;
            var src_lat = place1.geometry.location.lat();
            var src_long = place1.geometry.location.lng();

            var mesg1 = "Address: " + src_addr;
            mesg1 += "\nLatitude: " + src_lat;
            mesg1 += "\nLongitude: " + src_long;
            //alert(mesg1);

                 document.getElementById('src_lat').value = src_lat;
            document.getElementById('src_long').value = src_long;
            document.getElementById('pickup_location').innerHTML = src_lat+' , '+src_long;                 
        });
        //Add marker upon place change
        //google.maps.event.addDomListener(places1, 'place_changed', addMarker);            
            google.maps.event.addDomListener(places1, 'place_changed', function() { addMarker(map); }); 

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

My HTML code looks like this:

   <form role="form" id="frm_source" name="frm_source" method="POST" action="index_action.php">

        <div class="form-group">
            <label for="source_point"><h2>Pickup Address</h2></label>
            <textarea type="text" id="source_point" name="source_point"  class="form-control" placeholder="Enter your pick up address here"></textarea>
        </div>

        <div class="form-group">
            <label for="pickup_location"><h3>GPS Cordinates</h3></label>
            <hr>
            <p id="pickup_location"></p>
        </div>

        <div class="form-group">
            <input type="hidden" id="src_lat" name="src_lat" placeholder="latitude" >
            <input type="hidden" id="src_long" name="src_long" placeholder="longitude" >
        </div>

    <input type="submit" name="submit" id="submit" class="btn btn-primary" value="Next to enter destination address" />
    </form>

Google Map

<div id="source_map"></div>

Answer 1

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

:-(

Answer 2

This has been my problem while following the tutorial on Google. The problem is that you should execute the javascript after the page loads, you can call the function on the GET parameter while calling the Google Map script:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places$callback=YourFunctionHere"></script>

YourFunctionHere is a callback function means it will only execute after the page loads.

Or you can can call functions after the page loads. Example: window.onload = Yourfunction();

Now, inside that function is where you would do your Google Maps API stuff like document.getElementById('source_map') and all methods that belong to the google class.

Answer 3

This is an issue of DOM. Your javascript loads before loading your html document.

Make sure your html elements load first and then only load javascript.

Like

and then

Your javascript code

Answer 4

I had the same problem in Angular2. My solution is to move the initialisation of Google Maps to a function that fires when a user focus in the autocomplete input field. Not the most beautiful solution, but it works.

Code:

private autocomplete_init: boolean: false;

autocompleteFocus() {
 this.autocomplete_init = true;
 if (!this.autocomplete_init) {
  this._autocomplete = new google.maps.places.Autocomplete(document.getElementById("search_address"), {
  componentRestrictions: {'country': 'dk'}
  }
}

HTML:

<input placeholder="Search" type="text" id="search_address" (focus)="autocompleteFocus()" autofocus>

Answer 5

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 !

Answer 6

.pac-container { z-index: 1051 !important; }

Answer 7

For Angular

I was initializing the autocomplete in ngOnInit() because of which I was getting the error. I simply moved the initialization to ngAfterViewInit() and everything worked fine.

Code:

  ngAfterViewInit(): void {
    this.autocomplete = new google.maps.places.Autocomplete(
      (this._document.getElementById('input')),
      { types: ['geocode'] }
    );
  }

Answer 8

You have also an error

 function initialize() 
    {
        latLngC = new google.maps.LatLng(14.5800, 121.0000);
        var mapOptions = {
    center: latLngC,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP // you must remove the comme
    };