what3wordsサジェスト機能を使ってみよう（JavaScript）

what3wordsサジェスト機能

入力された3つの単語の組み合わせ（what3wordsアドレス）に対して、似た三単語の組み合わせと、各組み合わせの凡その場所を候補として提示。

上の例の場合：
① あおぐ。わすれた。あまえび（青森県・青森市）
を入力すると、下記二つの候補もサジェストされる。
② あおぐ。わすれて。あまえび （ドイツ・ベルリン）
③ あおぐ。わすれた。あまえる （ワシントン州・タッカウィラ）
一文字違うだけで、全然違うところに該当するマス目があります！

何故サジェスト機能が必要なのか？

言い間違い・聞き間違い・打ち間違えは、どうしても起こってしまうもの。

待ち合わせはもちろん、事件や事故が起こった際、共有された三単語の組み合わせが間違ってたら、話にならない。
サジェスト候補はいくつか出る上、エリア情報も出てくるので、軌道修正が可能。
※国内だけにサジェスト結果を絞る事も可能。

似た単語・組み合わせは、お互い可能な限り遠く設定しているため、選択時に間違えが起きにくい

実装例

ラッパーとサジェスト機能

<script type="module" src="https://cdn.what3words.com/javascript-components@4-latest/dist/what3words/what3words.esm.js"></script>
<script nomodule src="https://cdn.what3words.com/javascript-components@4-latest/dist/what3words/what3words.js?"></script>

<form id="form" method="GET">
   <div>
      <what3words-autosuggest api_key="YOUR-API-KEY">
        <input type="text" />
      </what3words-autosuggest>
   </div>
</form>

後はライセンスキーを入力するだけ！
APIキーの発行はこちらから確認できます。

その他機能のご紹介

入力欄内のテキストの設置

<label for="w3w">what3wordsアドレス（任意）：</label>
<what3words-autosuggest api_key="YOUR-API-KEY">
  <input
    id="w3w"
    placeholder="例：///あおぐ。わすれた。あまえび"
    type="text"
    optional
  />
</what3words-autosuggest>

サジェスト結果を（指定した国、例えば日本だけに）限定する

<what3words-autosuggest api_key="YOUR-API-KEY" clip_to_country="ja">
  <input type="text" />
</what3words-autosuggest>

入力された場所のGPSを中心にした距離を考慮した優先順位の付与

<what3words-autosuggest api_key="YOUR-API-KEY" autosuggest_focus="51.1,2.0">
  <input type="text" />
</what3words-autosuggest>

エラーメッセージ

<what3words-autosuggest api_key="YOUR-API-KEY" invalid_address_error_message="エラー">
  <input type="text" />
</what3words-autosuggest>

以上JavaScriptにおけるwhat3wordsサジェスト機能のガイドでした！