web-dev-qa-db-fra.com

InvalidValueError: pas une instance de HTMLInputElement

Pour votre information, je ne suis pas un JavaScript JavaScript, mais j’ai eu l’impression de le devenir lorsque j’ai fait beaucoup de choses à partir de Google Maps récemment.

J'ai implémenté une carte. L'utilisateur peut rechercher des lieux dans Google et y placer un marqueur. il y a une zone de texte pour cela. Ou l'utilisateur peut cliquer sur la carte pour placer un marqueur à l'endroit qu'il cherche ou le faire glisser.

Le code reste le même. Le design a changé. L'identifiant et le nom du champ de saisie sont également identiques. Pas de changement en code JS. Mais cette chose ne fonctionne pas.

Voici le site web

Google map produit une erreur.

 InvalidValueError: not an instance of HTMLInputElement

J'ai essayé la solution donnée ici Mais l'erreur reste toujours.

Quelle pourrait être la raison possible?

Voici le 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);

Mon code HTML ressemble à ceci:

   <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>
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersgoogle-places-api
21
Sajeev C

Votre champ est TEXTAREA, et à partir des dernières mises à jour, Google Maps autocomplete prend désormais en charge uniquement window.HTMLInputElement (INPUT tag).

:-(

42
jb4

Cela a été mon problème en suivant le tutoriel sur Google . Le problème est que vous devez exécuter le javascript après le chargement de la page, vous pouvez appeler la fonction sur le paramètre GET en appelant le script Google Map:

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

YourFunctionHere est une fonction de rappel, cela signifie qu'elle ne sera exécutée qu'après le chargement de la page.

Ou vous pouvez appeler des fonctions après le chargement de la page. Exemple: window.onload = Yourfunction();

À l’intérieur de cette fonction, vous pouvez utiliser votre API Google Maps telle que document.getElementById('source_map') et toutes les méthodes appartenant à la classe google.

7
707

C'est un problème de DOM. Votre javascript se charge avant de charger votre document html.

Assurez-vous que vos éléments HTML se chargent en premier, puis que javascript soit chargé.

Comme

et alors

6
Prashant Kumar Mishra

J'ai eu le même problème dans Angular2. Ma solution consiste à déplacer l'initialisation de Google Maps vers une fonction qui se déclenche lorsqu'un utilisateur effectue la mise au point dans le champ autocomplete input. Pas la plus belle solution, mais ça marche.

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>
3
Vingtoft

Je faisais face au même problème il y a quelques jours, mais j'ai trouvé une solution, si quelqu'un est intéressé :) Ce n'est pas parfait, c'est très difficile, mais cela représente 95% du travail! Je sais que c'est un sujet très ancien, mais si cela peut sauver quelqu'un ...

L'idée est d'ajouter une zone de texte personnalisée et de lier la valeur de texte d'entrée d'origine à la zone de texte (avec keyup, touche enfoncée, touche enfoncée, événements de modification).

$('.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);
     }
 }

Ajoutez des CSS pour "masquer" l'entrée d'origine. Cela cachera ce que vous écrivez dans l'entrée, alors vous ne verrez que ce qui est écrit dans votre textarea ( Important: l'index z de l'entrée doit être supérieur à textarea! )

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

C'est loin d'être parfait, et je suis ouvert si quelqu'un a une meilleure solution!

1
KCarnaille

Pour angulaire

J'étais en train d'initialiser la autocomplete dans ngOnInit() à cause de laquelle je recevais l'erreur ... J'ai simplement déplacé l'initialisation sur ngAfterViewInit() et tout a bien fonctionné.

Code:

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

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

0
swapnil kambe