無料で使えるAPI（2025年版）

windows JavaScript
2025.04.06
スポンサーリンク

地図中心の無料API実践デモ

目標

  • OpenStreetMap（地図表示）
  • Nominatim（住所→緯度経度検索）
  • OpenRouteService（ルート探索）
  • ダークモード切替
  • UI：検索欄＋結果カード表示

See the Pen Untitled by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>無料地図APIデモ</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
  body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0; padding: 0;
    transition: 0.3s;
  }
  :root {
    --bg: #f8f9fa;
    --text: #222;
    --card: #fff;
  }
  body.dark {
    --bg: #1c1c1c;
    --text: #eee;
    --card: #2a2a2a;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: var(--card);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  button {
    background: #0078ff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
  }
  #map { height: 400px; margin: 10px; border-radius: 8px; }
  #controls { display: flex; gap: 10px; margin: 10px; }
  input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .card {
    background: var(--card);
    margin: 10px;
    padding: 10px;
    border-radius: 8px;
  }
</style>
</head>
<body>
<header>
  <h2>🗺️ 無料地図APIデモ</h2>
  <button id="themeBtn">🌙 ダークモード</button>
</header>

<div id="controls">
  <input id="address" placeholder="例：東京駅" />
  <button id="searchBtn">検索</button>
</div>

<div id="map"></div>
<div id="result" class="card">住所検索で場所を表示します。</div>

<script>
  // 🌍 初期マップ設定（東京）
  const map = L.map('map').setView([35.6812, 139.7671], 13);
  let tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  let marker;

  // 🧭 Nominatimによる住所検索
  document.getElementById('searchBtn').onclick = async () => {
    const query = document.getElementById('address').value.trim();
    if (!query) return;
    const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1`;
    const res = await fetch(url, { headers: { 'User-Agent': 'DemoApp' } });
    const data = await res.json();
    if (data.length === 0) {
      document.getElementById('result').innerText = '場所が見つかりませんでした。';
      return;
    }
    const { lat, lon, display_name } = data[0];
    if (marker) marker.remove();
    marker = L.marker([lat, lon]).addTo(map);
    map.setView([lat, lon], 14);
    document.getElementById('result').innerHTML = `<b>検索結果：</b> ${display_name}<br>緯度: ${lat}, 経度: ${lon}`;

    // 🚗 OpenRouteServiceでルート探索（東京駅→検索地点）
    const start = [139.7671, 35.6812]; // 東京駅
    const end = [lon, lat];
    const key = "YOUR_API_KEY"; // ← OpenRouteServiceのAPIキーをここに
    try {
      const routeUrl = `https://api.openrouteservice.org/v2/directions/driving-car?api_key=${key}&start=${start.join(',')}&end=${end.join(',')}`;
      const routeRes = await fetch(routeUrl);
      const routeData = await routeRes.json();
      const coords = routeData.features[0].geometry.coordinates.map(([lng, lat]) => [lat, lng]);
      L.polyline(coords, { color: 'red' }).addTo(map);
      document.getElementById('result').innerHTML += `<br>🚗 ルート距離: ${(routeData.features[0].properties.summary.distance/1000).toFixed(1)} km`;
    } catch {
      document.getElementById('result').innerHTML += `<br>（※OpenRouteServiceキー未設定）`;
    }
  };

  // 🌗 ダークモード切替
  document.getElementById('themeBtn').onclick = () => {
    document.body.classList.toggle('dark');
    document.getElementById('themeBtn').textContent =
      document.body.classList.contains('dark') ? '☀️ ライトモード' : '🌙 ダークモード';
  };
</script>
</body>
</html>
JavaScript

使い方メモ

機能使用API補足
地図表示OpenStreetMap + Leaflet完全無料。ライブラリで描画。
住所検索Nominatim API1秒に1リクエスト推奨。User-Agent必須。
経路探索OpenRouteService無料キー登録：https://openrouteservice.org/dev/

拡張アイデア

  • 現在地を navigator.geolocation で取得してマップ中央へ。
  • 検索履歴を LocalStorage に保存。
  • 経路を徒歩・自転車モードに切替。
  • 地図テーマ（地形・夜間など）を選択可能に。

See the Pen Free Map API Demo #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

現在地取得＋自動ルート表示（OpenRouteService対応）

⚠️ 注意：OpenRouteService の API キーを ORS_API_KEY に入れてから動かしてください（無料プランあり）。
Nominatim（住所検索）はブラウザから使えます（大量自動アクセスは控えてください）。

使い方メモ（短く）

  1. JS の最初にある ORS_API_KEY に OpenRouteService のキーを入れる（無料で取得可）。
  2. ブラウザで「📍 現在地を取得」を押して位置情報許可を与える。
  3. 目的地を入力して「🔎 ルート表示」を押すと、現在地→目的地のルートが描画されます。
  4. 移動モード（車・自転車・徒歩）はセレクトで変更可能。

See the Pen Free Map API Demo #4 by MONO365 -Color your days- (@monoqlo365) on CodePen.

地図アプリ上級版

「地図アプリ上級版」として、以下の要素をすべて統合したデモを用意。

🧭 機能一覧

✅ Leaflet.js — 地図表示
✅ OpenRouteService API — 経路探索（徒歩／自転車／車 など）
✅ Geolocation API — 現在地取得
✅ テーマ切替（ライト／ダーク）
✅ 移動手段選択ドロップダウン
✅ 履歴保存（localStorage）
✅ CodePen 互換（外部CDN指定済）

使い方

1️⃣ 地図が表示されたら「現在地を取得」ボタンを押す。
2️⃣ 目的地（住所または「lat,lon」）を入力。
3️⃣ 移動手段（徒歩／車／自転車）を選択して「経路検索」。
4️⃣ 履歴が下に保存・再利用可能。
5️⃣ 🌗ボタンでテーマ切替！

See the Pen Free Map API Demo #3 by MONO365 -Color your days- (@monoqlo365) on CodePen.

前へ
12345678910111213
スポンサーリンク
タイトルとURLをコピーしました