不動産賃貸管理会社検索サイト
駅名を入力すると、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が必要です：
- Maps JavaScript API - 地図表示用
- Places API - 周辺施設検索用
- Geocoding API - 住所から座標を取得
API Keyの取得方法
- Google Cloud Consoleにアクセス
- プロジェクトを作成または選択
- 「APIとサービス」→「ライブラリ」から上記3つのAPIを有効化
- 「APIとサービス」→「認証情報」からAPI Keyを作成
- 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. アプリケーションの使用
-
API Keyの入力
- Google Maps API Keyを入力欄に入力
- 一度入力すると、ブラウザに保存されます
-
駅名の検索
- 検索ボックスに駅名を入力（例: 渋谷駅、新宿駅、東京駅）
- 「検索」ボタンをクリックまたはEnterキーを押す
-
結果の確認
- 地図上に検索結果のマーカーが表示されます
- リスト形式で会社情報が表示されます
- カードをクリックすると地図上の該当位置にジャンプします
- 「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相当の使用が無料です
今後の拡張案
