web-dev-qa-db-ja.com

InvalidValueError：HTMLInputElementのインスタンスではありません

参考までに、私はJavaScriptの忍者ではありませんが、最近Googleマップに基づいて多くのことを行ったときに自分が1人になると感じました。

マップを実装しました。ユーザーはGoogleプレイスを検索し、マーカーを配置できます。そのためのテキストボックスがあります。または、ユーザーが地図をクリックして、探している場所にマーカーを配置するか、マーカーをドラッグします。

コードは同じままです。デザインが変更されました。入力フィールドのIDと名前も同じです。 JSコードに変更はありません。しかし、このことは機能していません。

ウェブサイト

Googleマップでエラーが発生しています。

 InvalidValueError: not an instance of HTMLInputElement

here を与えられた解決策を試しましたが、まだエラーが残っています。

考えられる理由は何でしょうか？

コードは次のとおりです。

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

私のHTMLコードは次のようになります。

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

グーグルマップ

<div id="source_map"></div>
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersgoogle-places-api
23
Sajeev C

あなたのフィールドはTEXTAREAであり、前回の更新から、Googleマップのオートコンプリートはwindow.HTMLInputElement (INPUT tag)のみをサポートするようになりました

:-(

46
jb4

これは、Googleでのチュートリアルの実行中に私の問題でした。問題は、ページのロード後にjavascriptを実行する必要があることです。Googleマップスクリプトを呼び出すときに、GETパラメーターで関数を呼び出すことができます。

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

YourFunctionHereはコールバック関数で、ページがロードされた後にのみ実行されることを意味します。

または、ページのロード後に関数を呼び出すことができます。例：window.onload = Yourfunction();

さて、その関数の内部では、document.getElementById('source_map')やgoogleクラスに属するすべてのメソッドなどのGoogle Maps APIを実行します。

7
Dadan

これはDOMの問題です。 htmlドキュメントをロードする前に、javascriptがロードされます。

HTML要素が最初に読み込まれ、次にJavaScriptのみが読み込まれることを確認してください。

好む

その後

6
Prashant Kumar Mishra

私はAngular2でも同じ問題を抱えていました。私の解決策は、ユーザーがオートコンプリートinputフィールドにフォーカスしたときに起動する関数にGoogleマップの初期化を移動することです。最も美しいソリューションではありませんが、機能します。

コード：

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

私は数日前に同じ問題に直面していましたが、誰かが興味を持っている場合は解決策を見つけました:)完璧ではない、それは非常にトリッキーですが、仕事の95％を行います！私はそれが非常に古いトピックであることを知っていますが、それが誰かを救うことができるなら...

目的は、カスタムテキストエリアを追加し、元の入力テキスト値をテキストエリアにバインドすることです（キーアップ、キープレス、キーダウン、変更イベントを使用）。

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

元の入力を「隠す」ためにいくつかのCSSを追加します。入力に書いているものを隠し、テキストエリアに書かれているものだけを見ることができます（重要：入力のz-indexはtextarea oneより優れている必要があります！）

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

それは完璧とはほど遠いです、そして誰かがより良い解決策を持っているなら私はオープンです！

1
KCarnaille

角度用

ngOnInit()のautocompleteを初期化していたため、エラーが発生していました。初期化をngAfterViewInit()に移動しただけで、すべて正常に機能しました。

コード：

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

.pac-container {z-index：1051！important; }

0
swapnil kambe