javascript - places - InvalidValueError: no es una instancia de HTMLInputElement

https maps googleapis com maps api js v 3 exp&signed in true&libraries places

Question

Para mi información, no soy un Ninja de JavaScript pero sentí que me convertiría en uno cuando hice muchas cosas basadas en Google Maps recientemente.

Implementé un mapa. El usuario puede buscar lugares de Google y colocar un marcador para ello. Hay un cuadro de texto para eso. O el usuario puede hacer clic en el mapa para colocar un marcador en el lugar que está buscando o arrastrar el marcador.

El código sigue siendo el mismo. Diseño cambiado Nombre de identificación del campo de entrada y el mismo nombre. Sin cambios en el código JS. Pero esta cosa no funciona.

Aquí está el website

El mapa de Google está produciendo un error.

 InvalidValueError: not an instance of HTMLInputElement

Traté de solución dada here pero el error sigue siendo.

¿Cuál puede ser la posible razón?

Aquí está el código:

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

Mi código HTML se ve así:

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

Mapa de Google

<div id="source_map"></div>

Answer 1

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

Answer 2

Para angular

Estaba inicializando el autocomplete en ngOnInit() debido a que estaba recibiendo el error. Simplemente moví la inicialización a ngAfterViewInit() y todo funcionó bien.

Código:

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

Answer 3

Este es un problema de DOM. Tu javascript se carga antes de cargar tu documento html.

Asegúrese de que sus elementos html se carguen primero y luego solo cargue javascript.

Me gusta

y entonces

Tu código javascript

Answer 4

Este ha sido mi problema al seguir el tutorial en Google. El problema es que debe ejecutar el javascript después de que se cargue la página, puede llamar a la función en el parámetro GET mientras llama al script de Google Map:

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

YourFunctionHere es una función de devolución de llamada que solo se ejecutará después de que se cargue la página.

O puede llamar a funciones después de que se cargue la página. Ejemplo: window.onload = Yourfunction();

Ahora, dentro de esa función es donde harías las cosas de la API de Google Maps como document.getElementById(''source_map'') y todos los métodos que pertenecen a la clase de google .

Answer 5

Hace algunos días enfrenté el mismo problema, pero encontré una solución, si a alguien le interesa :) No es perfecto, es muy complicado, ¡pero cumple el 95% del trabajo! Sé que es un tema muy antiguo, pero si puede salvar a alguien ...

La idea es agregar un área de texto personalizada y vincular el valor del texto de entrada original al área de texto (con tecla arriba, tecla, tecla, cambiar eventos).

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

Agregue un poco de css para "ocultar" la entrada original. Ocultará lo que está escribiendo en la entrada, luego solo verá lo que está escrito en su área de texto (¡ Importante: el índice z de la entrada debe ser superior al de la zona de texto! )

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

Está lejos de ser perfecto, y estoy abierto si alguien tiene una solución mejor.

Answer 6

Su campo es TEXTAREA , y de las últimas actualizaciones, Google Maps Autocomplete ahora solo admite window.HTMLInputElement (INPUT tag)

:-(

Answer 7

Tu tambien tienes un error

 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
    };

Answer 8

Tuve el mismo problema en Angular2. Mi solución es mover la inicialización de Google Maps a una función que se activa cuando un usuario se enfoca en el campo de input autocompletar. No es la solución más bella, pero funciona.

Código:

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>