不動産賃貸管理会社検索サイト

駅名を入力すると、Google Maps APIを使用して最寄りの不動産賃貸管理会社を検索・表示するWebアプリケーションです。

周辺MAP（番号ピン）: 同リポジトリの shuhen-map.html（物件＋店リスト → P0〜P8）。管理会社検索とは別ページで、APIキーは共有（localStorage）。

機能

• 📍 駅名検索: 駅名を入力して周辺の不動産賃貸管理会社を検索
• 🗺️ 地図表示: Google Mapで検索結果を視覚的に表示
• 📋 詳細情報: 会社名、住所、電話番号、評価、営業時間などを一覧表示
• 💾 APIキー保存: Google Maps API Keyをブラウザに安全に保存
• 📱 レスポンシブデザイン: スマートフォンやタブレットでも快適に利用可能
• 📌 周辺MAP番号ピン（shuhen-map.html）: Grandoleプリセット等で骨格スクショ用

必要なもの

Google Cloud Platform設定

このアプリケーションを使用するには、Google Cloud Platformで以下のAPIを有効化したAPI Keyが必要です：

1. Maps JavaScript API - 地図表示用
2. Places API - 周辺施設検索用
3. Geocoding API - 住所から座標を取得

API Keyの取得方法

1. Google Cloud Consoleにアクセス
2. プロジェクトを作成または選択
3. 「APIとサービス」→「ライブラリ」から上記3つのAPIを有効化
4. 「APIとサービス」→「認証情報」からAPI Keyを作成
5. API Keyの制限を設定（推奨）:
   • アプリケーションの制限: HTTPリファラー
   • APIの制限: Maps JavaScript API, Places API, Geocoding API

使い方

1. ローカルで実行

# Pythonの簡易サーバーで起動
python3 -m http.server 8000

# または Node.jsの場合
npx http-server -p 8000

ブラウザで http://localhost:8000 にアクセス

2. アプリケーションの使用

1. API Keyの入力

   • Google Maps API Keyを入力欄に入力
   • 一度入力すると、ブラウザに保存されます

2. 駅名の検索

   • 検索ボックスに駅名を入力（例: 渋谷駅、新宿駅、東京駅）
   • 「検索」ボタンをクリックまたはEnterキーを押す

3. 結果の確認

   • 地図上に検索結果のマーカーが表示されます
   • リスト形式で会社情報が表示されます
   • カードをクリックすると地図上の該当位置にジャンプします
   • 「Google Mapで見る」ボタンで詳細情報を確認できます

リポジトリ構成

.
├── index.html        # ルート直下の不動産賃貸管理会社検索サイト
├── style.css         # ルートアプリのスタイルシート
├── app.js            # ルートアプリの検索ロジック
├── apps/             # 公開・運用向けのWebアプリ群
├── docs/             # GitHub Pagesで公開する資料・スライド
├── 215_kamiooya/     # 神・大家さん倶楽部関連の業務資料・自動化スクリプト
├── 300_ai/           # AI活用に関する資料・検証メモ
├── 500_obsidian/     # Obsidian運用に関する資料
├── dx_kyouyuu/       # DX互助会の共有資料・ナレッジ
├── line_unofficial_poc/ # LINE連携の検証コード
├── scripts/          # リポジトリ運用用の補助スクリプト
└── README.md         # このファイル

このREADMEの起動手順は、リポジトリルート直下の index.html / style.css / app.js で構成される静的Webアプリを対象にしています。

apps/kamiooya-qa-web/ など個別アプリの詳細は、各ディレクトリ内のREADMEを参照してください。

技術スタック

• HTML5: セマンティックなマークアップ
• CSS3: モダンなレスポンシブデザイン
• Vanilla JavaScript: フレームワークなしのピュアJS
• Google Maps JavaScript API: 地図表示
• Google Places API: 周辺施設検索
• Google Geocoding API: 位置情報取得

主な機能の説明

検索機能

• 駅名を日本語で入力可能
• 2km圏内の不動産賃貸管理会社を検索
• キーワード「不動産 賃貸 管理」で検索

地図機能

• インタラクティブなGoogle Map表示
• マーカークリックで詳細情報表示
• 青いマーカー：検索した駅の位置
• 番号付きマーカー：検索結果の会社位置

結果表示

• 会社名、住所、電話番号
• ユーザー評価と口コミ数
• 営業状態（営業中/営業時間外）
• 公式ウェブサイトへのリンク
• Google Mapへの直接リンク

セキュリティ考慮事項

• API Keyはローカルストレージにのみ保存（サーバーには送信されません）
• API Keyにはリファラー制限の設定を推奨
• HTTPS環境での使用を推奨

ブラウザ対応

• Chrome（推奨）
• Firefox
• Safari
• Edge

トラブルシューティング

「駅が見つかりませんでした」と表示される

• 駅名の入力を確認してください（例: 「渋谷駅」「新宿」など）
• 日本国内の駅名を入力してください

「周辺に不動産賃貸管理会社が見つかりませんでした」

• 検索範囲を広げるか、別の駅で検索してください
• 地方の駅では結果が少ない場合があります

「Google Maps APIの読み込みに失敗しました」

• API Keyが正しいか確認してください
• 必要なAPIが有効化されているか確認してください
• API Keyの制限設定を確認してください

地図が表示されない

• ブラウザのJavaScriptが有効か確認してください
• ブラウザのコンソールでエラーを確認してください

ライセンス

このプロジェクトはMITライセンスの下で公開されています。

注意事項

• Google Maps APIの使用には料金が発生する場合があります
• API使用量を管理するため、Google Cloud Consoleで使用状況を定期的に確認してください
• 無料枠: 月間$200相当の使用が無料です

今後の拡張案

• 検索範囲の調整機能
• フィルター機能（評価順、距離順など）
• お気に入り機能
• 口コミ表示機能
• ルート案内機能
• 複数駅の同時検索