ZENRIN Maps APIのジオコーディングでマンション名やテナント名まで取得できる！住所入力の精度向上とUX改善

// 郵便番号から住所を取得する処理
const getAddressesFromPostCode = async () => {

  // apiPath
  const apiPath = 'https://test-web.zmaps-api.com/search/postcode';

  // params
  const apiParams = {
    post_code: state.form.post_code, // 入力した郵便番号
    sort: 'address_code',
  }

  // queryString
  const queryString = new URLSearchParams(apiParams).toString();

  // headers
  const header = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'x-api-key': state.api.key, // APIキーを設定
    'Authorization': 'ip',
  };

  // APIリクエスト
  const response = await fetch(`${apiPath}?${queryString}`, {
    method: 'GET',
    headers: header,
  });
  
  // 結果処理
  const r = await response.json();
  if(r.result.item.length === 1) {
    // APIの戻り値から得られた住所をフォームに設定
    state.form.address = r.result.item[0].address;
  }
};

// 住所から建物情報を取得
const getBuildingsFromAddress = async () => {

  // apiPath (ac_premiumの場合)
  const apiPath = 'https://test-web.zmaps-api.com/data-coding/ac_premium';

  // params
  const apiParams = {
    word: state.form.address, // 入力した住所
    use_multi_addr: true,
    use_kana: true,
    building_name: null,
  };

  // queryString
  const queryString = new URLSearchParams(apiParams).toString();

  // headers
  const header = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'x-api-key': state.api.key, // APIキーを設定
    'Authorization': 'ip',
  };

  // APIリクエスト
  const response = await fetch(`${apiPath}?${queryString}`, {
    method: 'GET',
    headers: header,
  });
  
  // 結果処理
  const r = await response.json();
  
  // ac_premiumの場合、建物情報を直接取得
  if(r.result.item[0].building_info) {
    // 建物情報が複数ある場合があるため、配列に格納する。
    state.form.building_options = 
      r.result.item[0].building_info.map(building => ({
        name: building.building_name,
        address: r.result.item[0].address,
        // 位置情報も取得
        lat: building.position[1],
        lng: building.position[0],
      }));
  }
};

// 建物名から住所を逆引き
const getAddressFromBuilding = async () => {

  // apiPath (ac_premiumの場合)
  const apiPath = 'https://test-web.zmaps-api.com/search/building_name';

  // params
  const apiParams = {
    word: state.form.building, // 入力した建物名
  };

  // queryString
  const queryString = new URLSearchParams(apiParams).toString();

  // headers
  const header = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'x-api-key': state.api.key, // APIキーを設定
    'Authorization': 'ip',
  };

  // APIリクエスト
  const response = await fetch(`${apiPath}?${queryString}`, {
    method: 'GET',
    headers: header,
  });
  
  // 結果処理
  const r = await response.json();
  
  // 結果が単一の場合
  if(r.result.item.length === 1) {
    // 郵便番号を設定
    state.form.post_code = r.result.item[0].post_code;
    // 住所を設定
    state.form.address = r.result.item[0].address;
  }
  // 結果が複数の場合
  else if(r.result.item.length > 1) {
    // 複数の候補がある場合、候補の配列を作成
    state.form.building_options = r.result.item.map(item => ({
      name: item.building_name,
      address: item.address,
      post_code: item.post_code,
    }));
  }
};

// 建物の部屋・テナント情報を取得
const getRooms = async (lat, lng) => {

  // apiPath
  const apiPath = 'https://test-web.zmaps-api.com/search/building_pos';

  // params
  const apiParams = {
    position: [lng, lat],
    building_shape: false,
    sort_attribute: ['floor_sort'],
  };

  // queryString
  const queryString = new URLSearchParams(apiParams).toString();

  // headers
  const header = {
    'Content-Type': 'application/x-www-form-urlencoded',
    'x-api-key': state.api.key, // APIキーを設定
    'Authorization': 'ip',
  };

  // APIリクエスト
  const response = await fetch(`${apiPath}?${queryString}`, {
    method: 'GET',
    headers: header,
  });
  
  // 結果処理
  const r = await response.json();
  
  if(r.result && r.result.item.length === 1) {
    // 部屋・テナント情報を表示
    state.form.room_options = r.result.item[0].attribute
      .filter(item => item.tenant_room_name || item.name)
      .map(item => {
        // 階数や部屋名またはテナント名が戻り値に存在するため適宜組み合わせて名称を作成する
        let room_name = '';
        if(item.tenant_floor) {
          room_name = `${item.tenant_floor} : `;
        }
        if(item.tenant_room_name && item.name) {
          room_name += `${item.tenant_room_name} : ${item.name}`;
        } else if(item.tenant_room_name) {
          room_name += item.tenant_room_name;
        } else if(item.name) {
          room_name += item.name;
        }
        return { name: room_name };
      });
  }
};