Google Mapのリファレンスサイト

データの可視化

·

ぽち

ユーザーの行動や地域の特徴を視覚的に表現することで、地図の理解度や利便性を大きく向上させることができます。

Google Mapsでは、ヒートマップやGeoJSONなどを活用した可視化が可能です。
以下は「東京駅」「上野駅」「綾瀬駅」のヒートマップ表示をしています。


■ ヒートマップの表示

特定エリアでの密度（例：乗降回数・混雑度など）を「色の強弱」で表現できます。

・人の集まりやすさ（乗降客数の多さ）
・交通量
・イベント開催の混雑度

赤いヒートは、指定した地点の「密度が高い」ことを示しています。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>

実装例

const heatmapData = [
  new google.maps.LatLng(35.681236, 139.767125), // 東京駅
  new google.maps.LatLng(35.6895, 139.6917),     // 新宿駅
  // ...他の地点も追加
];

const heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData,
  map: map,
});

補足

.setMap(null) で一時非表示にできます。
radius や opacity の調整も可能。


■GeoJSONの読み込み・表示（DataLayer）

バスルートや市区町村境界など、形状データをGeoJSON形式で表示できます。

<script>
  function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 35.68, lng: 139.76 },
      zoom: 12,
    });

    // GeoJSONファイルを読み込む（ファイルはサーバーのdataフォルダ内に route.geojson として配置）
    map.data.loadGeoJson('data/route.geojson');

    // 各地点にInfoWindowを表示
    map.data.addListener("click", (event) => {
      const name = event.feature.getProperty("name");
      const pos = event.feature.getGeometry().get();
      new google.maps.InfoWindow({
        content: `<b>${name}</b>`,
        position: pos,
      }).open(map);
    });
  }
</script>

■route.geojsonの中身

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [139.777, 35.7138]
      },
      "properties": {
        "name": "上野"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [139.7745, 35.6987]
      },
      "properties": {
        "name": "秋葉原"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [139.7671, 35.6812]
      },
      "properties": {
        "name": "東京"
      }
    }
  ]
}

補足

GeoJSONは外部ファイル or JavaScript内で直接埋め込みも可能。
ポイント、ライン、ポリゴンに対応。

■ 外部CSVデータとの連携表示

店舗一覧、バス停リストなど、CSV形式を使った柔軟なデータ連携もできます。


CSVをJavaScriptで処理（例）

<script>
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 35.68, lng: 139.76 },
    zoom: 12,
  });

  // CSVファイルを読み込み
  Papa.parse('stations.csv', {
    download: true,
    header: true,
    complete: function(results) {
      results.data.forEach(station => {
        if (station.lat && station.lng) {
          new google.maps.Marker({
            position: { lat: parseFloat(station.lat), lng: parseFloat(station.lng) },
            map: map,
            title: station.name
          });
        }
      });
    }
  });
}

// ページ読み込み後に初期化
window.onload = initMap;
</script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script> <!-- CSVパーサー -->

9行目stations.csvはサーバー上に置き、HTMLからアクセス可能な場所に指定。
11行目header: trueでCSVの1行目をキーとして扱う。
16行目座標は文字列なのでparseFloat()で数値に変換。
29行目CSV読み込みに PapaParse という軽量ライブラリを使用。


■stations.csvの中身

name,lat,lng
池袋,35.7289,139.7101
新宿,35.6895,139.6917
渋谷,35.6580,139.7016
目黒,35.6336,139.7158



活用シーン

可視化手法利用例
ヒートマップバスの混雑エリア、利用者集中箇所
GeoJSONルートマップ、区間区分け、営業エリア
CSVバス停データ、イベント会場、店舗一覧