wake-up-neo.net

InvalidValueError: keine Instanz von HTMLInputElement

Zu Ihrer Information, ich bin kein JavaScript-Ninja, aber ich hatte das Gefühl, ich werde einer, wenn ich in letzter Zeit viel auf Google Maps basierend getan habe.

Ich habe eine Karte implementiert. Der Nutzer kann nach Google-Orten suchen und eine Markierung dafür setzen. Dafür gibt es ein Textfeld. Oder der Benutzer kann auf die Karte klicken, um eine Markierung an der gewünschten Stelle zu platzieren, oder die Markierung ziehen.

Code bleibt derselbe. Design geändert ID und Name des Eingabefeldes auch gleich. Keine Änderung des JS-Codes. Aber das funktioniert nicht.

Hier ist die website

Die Google-Karte zeigt einen Fehler an.

 InvalidValueError: not an instance of HTMLInputElement

Ich habe die Lösung mit hier .__ ausprobiert. Der Fehler bleibt jedoch bestehen.

Was könnte der mögliche Grund sein?

Hier ist der 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); 

Mein HTML-Code sieht folgendermaßen aus:

   <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 Karte

<div id="source_map"></div>
21
Sajeev C

Ihr Feld ist TEXTAREA. Nach den letzten Aktualisierungen unterstützt Google Maps autocomplete jetzt nur noch window.HTMLInputElement (INPUT tag)

:-(

42
jb4

Dies war mein Problem, als ich dem Tutorial bei Google folgte. Das Problem ist, dass Sie das Javascript ausführen sollten, nachdem die Seite geladen wurde. Sie können die Funktion für den Parameter GET aufrufen, während Sie das Google Map-Skript aufrufen:

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

YourFunctionHere ist eine Rückruffunktion, dh sie wird erst ausgeführt, nachdem die Seite geladen wurde.

Oder Sie können Funktionen aufrufen, nachdem die Seite geladen wurde. Beispiel: window.onload = Yourfunction();

In dieser Funktion erledigen Sie Ihre Google Maps-API-Funktionen wie document.getElementById('source_map') und alle Methoden, die zur Klasse google gehören.

7
707

Dies ist eine Ausgabe von DOM. Ihr Javascript wird geladen, bevor Sie Ihr HTML-Dokument laden.

Stellen Sie sicher, dass Ihre HTML-Elemente zuerst geladen werden und dann nur Javascript.

Mögen

und dann

Ich hatte das gleiche Problem in Angular2. Meine Lösung besteht darin, die Initialisierung von Google Maps auf eine Funktion zu verschieben, die ausgelöst wird, wenn ein Benutzer sich im Feld input des automatischen Vervollständigungsvorgangs befindet. Nicht die schönste Lösung, aber es funktioniert.

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

Ich hatte vor einigen Tagen das gleiche Problem, aber ich habe eine Lösung gefunden, wenn jemand interessiert ist :) Es ist nicht perfekt, es ist sehr schwierig, aber es macht 95% der Arbeit! Ich weiß, es ist ein sehr altes Thema, aber wenn es jemanden retten kann ...

Die Idee besteht darin, ein benutzerdefiniertes Textfeld hinzuzufügen und den ursprünglichen Eingabetextwert an das Textfeld zu binden (mit Tastendruck, Tastendruck und Änderungsereignissen).

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

Fügen Sie einige CSS hinzu, um die ursprüngliche Eingabe zu "verbergen". Es wird ausgeblendet, was Sie in der Eingabe schreiben, und es wird nur angezeigt, was in Ihrem Textbereich geschrieben ist. ( Wichtig: Der Z-Index der Eingabe muss über dem des Textbereichs liegen ! )

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

Es ist alles andere als perfekt und ich bin offen, wenn jemand eine bessere Lösung hat!

1
KCarnaille

Für Angular

Ich habe die autocomplete in ngOnInit() initialisiert, wegen welcher ich den Fehler erhalten habe ..__ Ich habe einfach die Initialisierung auf ngAfterViewInit() verschoben und alles hat gut funktioniert.

Code:

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

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

0
swapnil kambe