InvalidValueError: pas une instance de HTMLInputElement

POUR INFO, Je ne suis pas un Ninja JavaScript, mais j'ai eu l'impression que j'en deviendrais un quand j'ai fait beaucoup de choses basées sur Google Maps récemment.

j'ai mis en place une carte. L'utilisateur peut rechercher pour google places et placer un marqueur. il y a une zone de texte pour que. Ou l'utilisateur peut cliquer sur la carte pour placer un marqueur à l'endroit qu'il cherche ou faire glisser le marqueur.

Le Code

reste le même. Le Design a changé. Id et nom du champ d'entrée sont identiques. Aucun changement au code JS. Mais cette chose n'est pas de travail.

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 persiste.

quelle pourrait être la raison?

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>

Carte Google

<div id="source_map"></div>
21
demandé sur Community 2015-12-03 13:26:07

7 réponses

votre champ est TEXTAREA , et des dernières mises à jour, Google maps autocomplete prend désormais en charge seulement window.HTMLInputElement (INPUT tag)

: - (

40
répondu jb4 2017-10-20 10:30:10

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 tout 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 qui ne s'exécute 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();

maintenant, à l'intérieur de cette fonction est où vous feriez vos trucs D'API Google Maps comme document.getElementById('source_map') et toutes les méthodes qui appartiennent à la classe google .

5
répondu 707 2016-09-05 17:15:56

C'est une question de DOM. Votre javascript se charge avant de charger votre document html.

assurez-vous que vos éléments html se chargent en premier et ensuite seulement javascript.

Comme

et ensuite

Votre code javascript
5
répondu Prashant Kumar Mishra 2017-03-30 10:15:45

j'ai eu le même problème à Angular2. Ma solution est de déplacer L'initialisation de Google Maps vers une fonction qui déclenche lorsqu'un utilisateur se concentre dans le champ input . Pas la plus belle solution, mais il fonctionne.

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>
4
répondu Vingtoft 2017-05-13 10:21:39

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

0
répondu swapnil kambe 2018-06-14 06:16:12

j'étais confronté au même problème il y a quelques jours, mais j'ai trouvé une solution, si quelqu'un est intéressé :) il n'est pas parfait, il est très difficile, mais il fait 95% du travail ! Je sais que c'est un très vieux sujet, mais si ça peut sauver quelqu'un...

l'idée est d'ajouter un textarea personnalisé, et de lier la valeur du texte d'entrée originale au textarea (avec 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);
     }
 }

Ajouter un peu de css à " cacher " l'entrée d'origine. Il masquera ce que vous écrivez dans l'input, alors vous ne verrez que ce qui est écrit dans votre textarea ( Important: l'index z de l'input doit être supérieur à celui de textarea ! )

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

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

0
répondu KCarnaille 2018-09-24 10:00:56

vous avez aussi une erreur

 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
    };
-2
répondu scaisEdge 2015-12-03 11:18:34