InvalidValueError: keine Instanz von HTMLInputElement
Zur info, ich bin kein JavaScript-Ninja, aber das Gefühl, ich werde, wenn ich Tat eine Menge Dinge, die auf Google Maps basiert, vor kurzem.
Implementiert habe ich eine Karte. Benutzer können suchen, für google places und setzen Sie eine Marke für Sie. es gibt eine text-box für. Oder Benutzer können klicken Sie auf die Karte, um eine Markierung an der Stelle, die er sucht, oder ziehen Sie den marker.
Code bleibt der gleiche. Design verändert. Eingabefeld die id und den Namen auch gleich. Keine änderung der JS-code. Aber dieses Ding ist nicht zu arbeiten.
Hier ist die website
Google-Karte ist ein Fehler erzeugt.
InvalidValueError: not an instance of HTMLInputElement
Habe ich versucht-Lösung gegeben hier
Aber Fehler bleibt immer noch.
Was könnte die mögliche Ursache?
Hier 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 wie folgt 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 Map
<div id="source_map"></div>
InformationsquelleAutor der Frage Sajeev C | 2015-12-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihr Feld ist
TEXTAREA
und von der letzten updates, die google maps autocomplete unterstützt jetzt nurwindow.HTMLInputElement (INPUT tag)
🙁
InformationsquelleAutor der Antwort jb4
Dies war mein problem, während, nach dem tutorial auf Google.
Das problem ist, dass Sie sollten ausführen der javascript nach dem laden der Seite, können Sie rufen Sie die Funktion auf der
GET
parameter beim Aufruf der Google-Map-Skript:YourFunctionHere
eine callback-Funktion, d.h. es wird nur ausgeführt, nachdem die Seite geladen wird.Oder Sie können Anruf-Funktionen nach dem laden der Seite. Beispiel:
window.onload = Yourfunction();
Nun, innerhalb dieser Funktion ist, wo würden Sie Ihre Google Maps API-Sachen wie
document.getElementById('source_map')
und alle Methoden, gehören zu dengoogle
Klasse.InformationsquelleAutor der Antwort 707
Dies ist eine Ausgabe von DOM. Javascript lädt vor dem laden des html-Dokuments.
Stellen Sie sicher, dass Ihre html-Elemente zuerst geladen, und dann nur das laden von javascript.
Wie
dann
Ihren javascript-code
InformationsquelleAutor der Antwort Prashant Kumar Mishra
Ich hatte das gleiche problem in Angular2. Meine Lösung ist das verschieben der Initialisierung von Google Maps eine Funktion, die ausgelöst wird, wenn ein Benutzer den Fokus in das AutoVervollständigen -
input
Feld. Nicht die schönste Lösung, aber es funktioniert.Code:
HTML:
InformationsquelleAutor der Antwort Vingtoft
InformationsquelleAutor der Antwort swapnil kambe
Haben Sie auch einen Fehler
InformationsquelleAutor der Antwort scaisEdge