Soy realmente nuevo con Svelte y estoy tratando de crear un componente web que llame a la biblioteca de autocompletado de lugares de Google. Lo hice para cargar la biblioteca en mi componente Svelte, pero cuando quiero pasar la función de autocompletar a mi entrada, me muestra el error: InvalidValueError: no es una instancia de HTMLInputElement.
Esto es lo que probé hasta ahora:
<svelte:head> <script defer async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaZc7Jr7pDoK3TWcDiv-SjqiJ0iKz15Go&libraries=places&callback=initMap"> </script> <script> function initMap() { const input = document.getElementById("autocomplete"); const options = { componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, types: ["establishment"], }; const autocomplete = new google.maps.places.Autocomplete(input, options); } </script> </svelte:head>Así es como se ve mi entrada:
<input type="text" id="autocomplete" name="store" class="pac-target-input" value="" />Parece que su entrada no se ha procesado en el DOM cuando llama al método initMap() , por lo tanto, su variable input es nula. Svelte ofrece un controlador onMount que se ejecuta después de que el componente se representa por primera vez en el DOM. Dentro de este controlador, puede llamar a su función initMap() :
import { onMount } from 'svelte'; onMount(() => { initMap(); });Más detalles: Svelte Docs