以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

マップへのデータのインポート

概要

ローカルまたはリモートのソースから GeoJSON データをインポートし、マップにそのデータを表示する方法について説明します。 このチュートリアルでは、マップにデータをインポートするためのさまざまな方法を紹介します。

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

var 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.
  var 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.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}
<div id="map"></div>
/* 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;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

実際に試す

コードブロックの右上にカーソルを合わせて、コードをコピーするか、コードを JSFiddl で開きます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 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>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var 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.
        var 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.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

データの読み込み

このセクションでは、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 タグをドキュメントの head に追加します。

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 プログラムで使用されます。

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。