body {

  text-align: center;

}

​

table {

  border-collapse: collapse;

  margin: auto;

  text-align: left;

}

​

#errorMessage {

  font-size: 12px;

  color: red;

}

​

#anormInput {

  width: 75%;

  max-width: 450px;

}

​

/**

 * ボタン押下時にジオコーディングを実行します

 */

document.getElementById("submitButton").onclick = function () {

  // ジオコーディングAPIにリクエストを送信します

  fetch(makeURI(), {

    // YourApiKey部分をお客様のAPIキーに修正してください

    // 例 "x-api-key": "6QHCWbbsnQ1K08IcwP",

    headers: { "x-api-key": "YourApiKey", accept: "application/json" }

  })

    .then((response) => {

      // ジオコーディングAPIのレスポンスコードを解析します

      analyzeResponseCode(response.status);

      return response.json();

    })

    .then((result) => {

      // 住所正規化結果を解析して表示します

      getNormalized(result);

    })

    .catch((error) => {

      // エラー時の処理を記載します

      // alert(error);

    });

};

​

/**

 * ジオコーディングAPI用のURIを作成します

 * @return {string} ジオコーディングAPI用のURI

 */

function makeURI() {

  const urlValue =

    "https://api-anorm.mapfan.com/v1/" +

    document.getElementById("anormInput").value +

    // ジオコーディングが不要な場合は「.json」を使用してください

    ".geojson";

  return encodeURI(urlValue);

}

​

/**

 * ジオコーディングAPIのレスポンスコードを解析し、表示・エラー出力を行います

 * @param {string} responseCode ジオコーディングAPIのレスポンスコード

 */

function analyzeResponseCode(responseCode) {

  document.getElementById("status").innerHTML = responseCode;

​

  // 200以外のレスポンスコードはエラーです

  if (responseCode == "200")

    document.getElementById("errorMessage").innerHTML = "";

  else if (responseCode == "400")

    document.getElementById("errorMessage").innerHTML =

      "住所入力が行われているか確認してください";

  else if (responseCode == "403")

    document.getElementById("errorMessage").innerHTML =

      "JavaScriptのAPIキーが正しいか確認してください";

  else

    document.getElementById("errorMessage").innerHTML =

      "システムエラーが発生しました";

}

​

/**

 * 住所正規化結果を解析し表示します

 * @param {json} result ジオコーディングAPIの住所正規化結果

 */

function getNormalized(result) {

  // 一件目の住所正規化結果を取得します

  // 複数件リクエストした場合は複数件取得する処理に変更します

  const feature = result.features[0];

​

  // 経度,緯度

  if (feature.geometry != null) {

    document.getElementById("coordinates").innerHTML =

      feature.geometry.coordinates;

  }

​

  // 入力住所文字列

  document.getElementById("query").innerHTML = feature.properties.query;

  // 正規化後の住所文字列

  document.getElementById("placeName").innerHTML =

    feature.properties.place_name;

  // 都道府県名

  document.getElementById("pref").innerHTML = feature.properties.pref;

  // 都道府県読み

  document.getElementById("prefKana").innerHTML = feature.properties.pref_kana;

  // 市区町村名

  document.getElementById("city").innerHTML = feature.properties.city;

  // 市区町村読み

  document.getElementById("cityKana").innerHTML = feature.properties.city_kana;

  // 町域名

  document.getElementById("area").innerHTML = feature.properties.area;

  // 町域名読み

  document.getElementById("areaKana").innerHTML = feature.properties.area_kana;

  // 小字・丁目

  document.getElementById("koazaChome").innerHTML =

    feature.properties.koaza_chome;

  // 小字・丁目読み

  document.getElementById("koazaChomeKana").innerHTML =

    feature.properties.koaza_chome_kana;

  // 番地・号

  document.getElementById("banchiGo").innerHTML = feature.properties.banchi_go;

  // 建物名称部

  document.getElementById("building").innerHTML = feature.properties.building;

  // 建物数字部

  document.getElementById("buildingNumber").innerHTML =

    feature.properties.building_number;

  // 郵便番号

  document.getElementById("zipcode").innerHTML = feature.properties.zipcode;

  // 解析レベル

  document.getElementById("geocodingLevel").innerHTML =

    feature.properties.geocoding_level;

  // 解析レベル説明

  document.getElementById("geocodingLevelDesc").innerHTML =

    feature.properties.geocoding_level_desc;

  // 解析ログメッセージ

  document.getElementById("log").innerHTML = feature.properties.log;

  // 正規化できなかった文字列

  document.getElementById("notNormalized").innerHTML =

    feature.properties.not_normalized;

}

​