it-swarm.dev

InvalidValueError: não é uma instância de HTMLInputElement

FYI, eu não sou um ninja JavaScript, mas senti que vou me tornar um quando fiz um monte de coisas com base no Google Maps recentemente.

Eu implementei um mapa. O usuário pode pesquisar por lugares do Google e colocar um marcador para ele. há uma caixa de texto para isso. O usuário pode clicar no mapa para colocar um marcador no local que está procurando ou arrastar o marcador.

O código permanece o mesmo. Design alterado. O id e o nome do campo de entrada também são os mesmos. Nenhuma mudança no código JS. Mas isso não está funcionando.

Aqui está o site

O mapa do Google está produzindo um erro.

 InvalidValueError: not an instance of HTMLInputElement

Eu tentei a solução dada aqui Mas o erro ainda permanece.

Qual poderia ser o motivo possível?

Aqui está o 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); 

Meu código HTML é assim:

   <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>
21
Sajeev C

Seu campo é TEXTAREA e, das últimas atualizações, o preenchimento automático do Google Maps agora é compatível apenas com window.HTMLInputElement (INPUT tag)

:-(

42
jb4

Este foi o meu problema ao seguir o tutorial no Google. O problema é que você deve executar o javascript depois que a página for carregada, você pode chamar a função no parâmetro GET ao chamar o script do Google Map:

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

YourFunctionHere é uma função de retorno de chamada, que só será executada após o carregamento da página.

Ou você pode chamar funções após o carregamento da página. Exemplo: window.onload = Yourfunction();

Agora, dentro dessa função, você deve fazer o material da API do Google Maps, como document.getElementById('source_map'), e todos os métodos que pertencem à classe google.

7
707

Este é um problema do DOM. Seu javascript é carregado antes de carregar seu documento html.

Certifique-se de que os elementos html carreguem primeiro e só carreguem o javascript.

Gostar

e depois

6
Prashant Kumar Mishra

Eu tive o mesmo problema no Angular2. Minha solução é mover a inicialização do Google Maps para uma função que é acionada quando um usuário se concentra no campo input de preenchimento automático. Não é a solução mais bonita, mas 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>
3
Vingtoft

Eu estava enfrentando o mesmo problema alguns dias atrás, mas eu encontrei uma solução, se alguém está interessado :) Não é perfeito, é muito complicado, mas faz 95% do trabalho! Eu sei que é um assunto muito antigo, mas se pode salvar alguém ...

A idéia é adicionar uma área de texto customizada e vincular o valor do texto de entrada original à textarea (com 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);
     }
 }

Adicione alguns css para "esconder" a entrada original. Ele irá esconder o que você está escrevendo na entrada, então você só verá o que está escrito em sua textarea ( Importante: o z-index da entrada deve ser superior a textarea one! )

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

Está longe de ser perfeito e estou aberto se alguém tiver uma solução melhor!

1
KCarnaille

Para angular

Eu estava inicializando o autocomplete em ngOnInit() por causa do qual eu estava recebendo o erro. Eu simplesmente mudei a inicialização para ngAfterViewInit() e tudo funcionou bem.

Código:

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

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

0
swapnil kambe