質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

javascript value 設定できない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 335

kkhaa

score 6

前提・実現したいこと

Google Maps Api を用いて、緯度経度を取得できるフォームを製作しています。
地図から緯度経度を取得することは出来たのですが、それらの値を<input>に設定することが出来ません。
その際に、以下のような問題が出たので質問させていただきました。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set property 'defaultValue' of null

該当のソースコード

<input type="hidden" name="lat" id="lat">
<input type="hidden" name="lng" id="lng">
<input type="hidden" name="location" id="location">

    <script>
      function initMap() {
        'use strict';

        let target = document.getElementById('target');
        let tokyo = {lat: 35.6812362000000, lng: 139.7671248000000};
        let marker;

        let map = new google.maps.Map(target, {
          center: tokyo,
          zoom: 15
        });

        let input = (document.getElementById('event-locationautocomplete'));

        let autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        let infowindow = new google.maps.InfoWindow();
        marker = new google.maps.Marker({
          map: map,
          anchorPoint: new google.maps.Point(0, -30)
        });

        autocomplete.addListener('place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          let place = autocomplete.getPlace();

          if (!place.geometry) {
            window.alert("No details available for input: '" + place.name + "'");
            return;
          }

          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(15);
          }

          marker.setIcon( /** @type {google.maps.Icon} */ ({
            url: place.icon,
            size: new google.maps.Size(70, 70),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 35),
            scaledSize: new google.maps.Size(35, 35)
          }));
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);
          let item_Lat = place.geometry.location.lat();
          let item_Lng = place.geometry.location.lng();
          let item_Location = place.formatted_address;

          alert("Lat= "+item_Lat+"_____Lang="+item_Lng+"_____Location="+item_Location);

          document.getElementById('#lat').value = "item_Lat";
          document.getElementById('#lng').value = "item_Lng";
          document.getElementById('#location').value = "item_Locatio";

          let address = '';
          if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });
      }
    </script>

試したこと

inputのvalueに設定する手前で、alertを用いて取得出来ているか確認。
値は取得できていた。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/11/09 16:51

    コードはマークダウンのcode機能を利用してご提示ください

    キャンセル

  • kkhaa

    2019/11/09 17:01

    ご指摘有難う御座います。

    キャンセル

回答 2

check解決した方法

+1

document.getElementById('lat').value = item_Lat;
document.getElementById('lng').value = item_Lng;
document.getElementById('location').value = item_Location;

簡単なミスでした。

#が必要ありませんでした。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

それらの値を<input>に設定することが出来ません。

input要素には 変数名(文字列)を代入しています。
ダブルクォートで囲まず、変数の値が代入されるようにするとどうでしょうか。

document.getElementById('#lat').value = item_Lat;
document.getElementById('#lng').value = item_Lng;
document.getElementById('#location').value = item_Location;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/10 04:35

    ご回答有難う御座います。

    変更したものの、同じエラーが出てしまいます。

    キャンセル

  • 2019/11/10 06:16

    エラーメッセージは検索にかけるとヒントを得られるかもしれませんね。API利用に当たって必要な設定が他にもあるのかな…とも感じました。API仕様・サンプルコードの再確認をオススメします(「試したこと」として質問を更新されると他の方からの回答も得られやすいでしょう)。

    キャンセル

  • 2019/11/10 06:33

    承知しました。
    アドバイス有難う御座います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る