お知らせ: Google Maps Platform に間もなく新しい基本地図のスタイルが導入されます。このアップデートにより、デフォルトのカラーパレットが新しくなるほか、ピンが最新化され、地図のエクスペリエンスとユーザビリティが改善されます。すべての地図のスタイルは、2025 年 3 月に自動的に更新されます。ご利用の詳細およびいち早く使用する方法については、Google Maps Platform の新しい地図のスタイルをご覧ください。

マップに GeoJSON データをインポートする

概要

ローカルまたはリモートのソースから GeoJSON データをインポートし、地図に表示する方法を説明します。このチュートリアルでは、以下の地図を使用して、データを地図にインポートするさまざまな方法を説明します。

以下のセクションに、このチュートリアルでマップを作成するために必要なコード全体を載せています。

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 2,
    center: new google.maps.LatLng(2.8, -187.3),
    mapTypeId: "terrain",
  });

  // Create a <script> tag and set the USGS URL as the source.
  const script = document.createElement("script");

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src =
    "https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
  document.getElementsByTagName("head")[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Earthquake Markers</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

サンプルを試す

JSFiddle.net Google Cloud Shell

データの読み込み

このセクションでは、Maps JavaScript API アプリケーションと同じドメインから、または別のドメインからデータを読み込む方法について説明します。

同じドメインからデータを読み込む

Google マップのデータレイヤは、任意の地理空間データ（GeoJSON を含む）のコンテナを提供します。Maps JavaScript API アプリケーションと同じドメインにホストしているファイルにデータが存在する場合は、map.data.loadGeoJson() メソッドを使用してデータを読み込むことができます。このファイルは同じドメインに存在する必要がありますが、別のサブドメインでホストできます。たとえば、www.example.com から files.example.com にリクエストを送信できます。

map.data.loadGeoJson('data.json');

ドメインをまたいでデータを読み込む

ドメインの設定で許可されていれば、自己所有のドメイン以外のドメインに対してデータをリクエストすることもできます。こうした権限の標準は、クロスオリジンリソースシェアリング（CORS）と呼ばれます。ドメインでクロスドメインリクエストを許可している場合は、レスポンスヘッダーに次の宣言を含める必要があります。

Access-Control-Allow-Origin: *

ドメインで CORS が有効になっているかどうかを確認するには、Chrome デベロッパーツール（DevTools）を使用します。

このようなドメインからのデータの読み込みは、同じドメインから JSON を読み込む場合と同じです。

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

JSONP のリクエスト

この手法を使用するには、対象のドメインで JSONP のリクエストがサポートされている必要があります。

JSONP をリクエストする場合は、createElement() を使用して、ドキュメントのヘッダーに script タグを追加します。

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

スクリプトを実行すると、対象のドメインはそのデータを引数として別のスクリプト（通常は callback() という名前）に渡します。対象のドメインは、コールバックスクリプトの名前を定義します。これは、ブラウザで対象の URL を読み込むと、最初にページに表示される名前です。

たとえば、ブラウザのウィンドウで http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp を読み込むと、コールバックの名前が eqfeed_callback であることがわかります。

コールバックスクリプトをコード内で定義する必要があります。

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

addGeoJson() メソッドを使用して、解析された GeoJSON データを地図に配置します。

データのスタイル設定

データの外観を変更するには、GeoJSON データを Map オブジェクトに追加します。データのスタイル設定について詳しくは、デベロッパーガイドをご覧ください。

詳細

GeoJSON は、JSON（JavaScript Object Notation）を基にしたオープンなフォーマットで、地理情報データのエンコードに幅広く使用されています。JSON データ用に設計された JavaScript のツールやメソッドも GeoJSON に使用できます。詳しくは、デベロッパーガイドをご覧ください。
JSONP は padded JSON の略です。これは、別のドメインにあるサーバーにデータをリクエストするための通信メソッドで、ウェブブラウザで実行する JavaScript プログラムで使用されます。