以上で完了です。

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

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

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

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

データの可視化: 地震のマッピング

概要

このチュートリアルでは、Google マップ上にデータを表示する方法を説明します。 このチュートリアルのマップでは、例として、地震の位置とそのマグニチュードに関するデータを可視化します。

独自のデータソースを使用して、次のような説得力のある情報を Google マップに表示する方法を学びましょう。

上の最初の 2 つのフレーム(左側と右側のフレーム)には、基本的なマーカーサイズ指定された円がそれぞれ配置されたマップが表示されています。 最後のフレームには、ヒートマップが表示されています。

データのインポート

このチュートリアルでは、米国地質調査所(United States Geological Survey: USGS)のリアルタイム地震データを使用しています。

USGS のウェブサイトでは、多くの形式でデータが提供されており、これらのデータを自分のドメインにコピーして、アプリケーションでローカル アクセスすることができます。 このチュートリアルでは、ドキュメントの head 部に script タグを追加することにより、USGS サーバーに JSONP を直接リクエストします。

注: クロスドメイン コンテンツの読み込みには潜在的なセキュリティ リスクが伴うため、完全に信頼できるサーバーに対してのみデータをリクエストするようにしてください。

// Create a script tag and set the USGS URL as the source.
        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);

基本的なマーカーの配置

USGS フィードから地震の位置に関するデータをアプリケーションに取り込んだので、次はそのデータをマップ上に表示しましょう。 このセクションでは、インポートしたデータを活用してマップを作成し、各地震の震源地に基本的なマーカーを配置する方法について説明します。

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

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>

シェイプとヒートマップを使用してマップをカスタマイズする

このセクションでは、マップ上のさまざまなデータセットをカスタマイズする別の方法を紹介します。 このチュートリアルの上記のセクションでは、各地震の位置にマーカーが配置されたマップを作成しました。

このマーカーをカスタマイズして、地震の発生回数が最も多かった場所や、地震のマグニチュードや深度などの追加データを表示することができます。

基本的なマーカーをカスタマイズするためのオプションの一部を次に示します。

  • 円のサイズの使用:
    シンボルを使用すると、地震のマグニチュードにサイズが比例した円(またはその他のシェイプ)を描画できます。

この場合、強い地震は大きな円でマップ上に表示されます。

  • ヒートマップの使用:
    可視化ライブラリのヒートマップ レイヤを用いると、地震の分布をシンプルに、かつ効果的に表示できます。 ヒートマップでは、データポイントの密度を色で表現するため、地震活動が活発な領域がひと目で分かります。

また、ヒートマップでは WeightedLocations を使用できるため、たとえば、ヒートマップ内で大きな地震を目立つように表示することができます。

円のサイズ

次のマップには、円を使用してカスタマイズしたマーカーが表示されています。 円のサイズは、その位置で発生した地震のマグニチュードに比例して大きくなります。

以下のセクションに、カスタマイズした円のマーカーを使ってマップを作成するために必要なコード全体を載せています。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    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);

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}
<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: {lat: -33.865427, lng: 151.196123},
          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);

        map.data.setStyle(function(feature) {
          var magnitude = feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }

      function eqfeed_callback(results) {
        map.data.addGeoJson(results);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

コードを理解する

次の表では、円のマーカーを作成するコードについて説明しています。

コードと説明
  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

データレイヤにスタイルを追加して、getCircle() 関数を 呼び出します。
デフォルトの赤いマーカーの代わりに、ポイント用のカスタム画像を作成します。
function getCircle(magnitude) {
      var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: magnitude
      };
      return circle;
    }

地震の magnitude プロパティはこの関数に渡されます。
getCircle() はマグニチュードの値によってサイズが定義された円を描画し、その円を地震のカスタム マーカーとして返します。

ヒートマップ

ヒートマップを表示すると、USGS から報告された地震の分布を簡単に把握できます。 各震源地にマーカーを配置する代わりに、ヒートマップでは色とシェイプを使用してデータの分布を表します。 この例では、地震活動が活発な領域を赤で表しています。

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

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    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);

}

function eqfeed_callback(results) {
  var heatmapData = [];
  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]);
    heatmapData.push(latLng);
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    dissipating: false,
    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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" async defer></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: {lat: -33.865427, lng: 151.196123},
          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);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        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]);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

コードを理解する

次の表では、ヒートマップを作成するコードについて説明しています。

コードと説明
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key
=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

visualization ライブラリを使用してヒートマップを表示します。
このライブラリには HeatmapLayer クラスが含まれています。
ライブラリを使用する場合、Maps API JavaScript が呼び出されたときにライブラリを読み込む必要があります。
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      heatmapData.push(latLng);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

上記の例と同じように、USGS のデータは eqfeed_callback

関数に渡されます。
これにより、各地震の座標が heatmapData 配列に追加されます。
次に、この配列は HeatmapLayer

コンストラクタに渡されます。このコンストラクタがヒートマップを作成してマップ上に表示します。

  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      var magnitude = results.features[i].properties.mag;
      var weightedLoc = {
        location: latLng,
        weight: Math.pow(2, magnitude)
      };
      heatmapData.push(weightedLoc);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

結果をマグニチュードで重み付けする場合は、WeightedLocation オブジェクトを heatmapData 配列に渡すことができます。

その他の情報

次のトピックの詳細をご覧ください。

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

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