Maps Engine レイヤー

  1. 概要
  2. 可視化ライブラリのロード
  3. レイヤーへの API アクセスの構成
  4. レイヤー コンストラクタ
  5. レイヤー オプション
  6. イベント
  7. Google Maps Engine からの地物情報の取得
  8. 地物スタイルの取得と設定
  9. Maps Engine レイヤーでの認証

概要

注:MapsEngineLayer および DynamicMapsEngineLayer クラスが、廃止された MapDataLayer クラスと置き換わります。MapDataLayer クラスは、2013 年 8 月 15 日時点で API のリリース バージョンから削除されました。

Google マップ可視化ライブラリは、MapsEngineLayer および DynamicMapsEngineLayer (試験運用中)の各クラスへのアクセスを提供し、Google Maps Engine ベクター データを Google Maps JavaScript API アプリケーションにインポートすることを可能にします。これらのクラスは、独自、共有、公開を問わず、Google Maps Engine データの可視化と相互操作を促進します。

  • Maps Engine レイヤー は、サーバー側でタイルを構成し、クライアントにタイルを返します。Maps Engine データのスタイルをクライアント側で変更しない場合、このクラスを使用します。

  • DynamicMapsEngineLayer(試験運用中)は、ベース マップ タイルとともに、ベクター データをクライアントに返します。アプリケーションは、ユーザーの入力またはその他のトリガーに応じて、ベクターのスタイルを変更できます(DynamicMapsEngineLayer クラスは、Internet Explorer 8 以下ではサポートされません)。

    下のポリゴンにマウスを重ねてください。

いずれのレイヤーも、OAuth 2.0 認証を使用して、保護された Maps Engine データにアクセスできます。アプリケーションにサインインしたユーザーは、Google Maps Engine ウェブ インターフェースを介している場合と同じマップ上の権限を持ちます。

可視化ライブラリのロード

Maps Engine レイヤー クラスは、Google Maps API の visualization ライブラリ内に含まれています。Maps Engine レイヤーを作成するには、次のように Maps API JavaScript のロード時にこのライブラリをロードする必要があります。

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

Google Maps APIs Premium Plan デベロッパーは、上の例の key パラメータの代わりに client パラメータを使用する必要があります。Premium Plan ユーザー固有の操作手順については、Google Maps JavaScript API のロードをご覧ください。

レイヤーへの API アクセスの構成

Maps Engine データへの API アクセスは、Google Maps Engine UI 内のアクセス制御リストを介して制御されます。アクセスは、次の 2 通りの方法で設定できます。

  • マップの設定を使用する。mapId および layerKey によりレイヤーを指定している場合、マップのアクセス制御リストはマップのレイヤーに適用されます。
  • レイヤーの API アクセス設定を使用する。layerId を使用してレイヤーを指定している場合、レイヤーの API アクセス設定によりアクセスが制御されます。

アクセス制御リストの作成方法およびマップやレイヤーへの適用方法の詳細は、Google Maps Engine ヘルプセンターを参照してください。

レイヤー コンストラクタ

レイヤーは、MapsEngineLayer または DynamicMapsEngineLayer オブジェクトを構築することで作成されます。

MapsEngineLayer:

var layer = new google.maps.visualization.MapsEngineLayer({ options });

DynamicMapsEngineLayer:

var dynamicLayer = new google.maps.visualization.DynamicMapsEngineLayer({ options });

マップに Maps Engine レイヤーを追加するには、オブジェクトを構成して、マップ オブジェクトへの参照と次のいずれかを渡します。

  • layerId(これが推奨の方法です)。例を見る

    var map;
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(42, -99),
        zoom: 5
      };
      map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
    
    
      var dynamicLayer = new google.maps.visualization.DynamicMapsEngineLayer({
        layerId: '10446176163891957399-12677872887550376890',
        map: map
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    

    Google Maps Engine ウェブ インターフェース内で layerId を確認するには、次の手順に従います。

    • 左側のナビゲーションで [Layers] をクリックします。
    • リストから必要なレイヤーを選択します。レイヤーがページ上に表示されます。
    • 画面の右上にある [Access Links] アイコンをクリックします。レイヤーのアセット ID が表示されます。
  • または、mapId および layerKey例を見る

    var map;
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(42, -99),
        zoom: 5
      };
      map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
    
    
      var layer = new google.maps.visualization.MapsEngineLayer({
        mapId: '10446176163891957399-13516001307527776624',
        layerKey: 'layer_00001',
        map: map
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    

    Google Maps Engine ウェブ インターフェース内で mapId 値および layerKey 値を見つけるには、次の手順に従います。

    • 左側のナビゲーションで [Maps] をクリックします。
    • リストから必要なマップを選択します。マップがページ上に表示されます。
    • 画面の右上にある [Access Links] アイコンをクリックして、[API access] をクリックします。マップのアセット ID が、レイヤー名とレイヤー キーとともに表示されます。

レイヤー オプション

レイヤー コンストラクタでは、以下のオプションを使用できます。

  • mapIdlayerKey とともに使用され、レイヤーが属するマップを指定します。レイヤー キーは、マップ内でのみ一意です。マップの ID を確認するには、マップページの右上にある [Access Links] アイコンをクリックして、[API access] をクリックします。マップのアセット ID が、レイヤー名とレイヤー キーとともに表示されます。
  • layerKey は、ロードするマップレイヤーを指定します。layerKey を使用する場合は、mapId も必要です。マップの各レイヤーのレイヤーキーを確認するには、マップページの右上にある [Access Links] アイコンをクリックして、[API access] をクリックします。最大 15 個のレイヤーをマップにロードできます。レイヤーごとに新規の MapsEngineLayer オブジェクトを作成して追加します。
  • layerId は、そのグローバルで一意な ID を使用してロードするレイヤーを指定します。ID によってレイヤーを指定する場合、mapId は不要です。Maps Engine ウェブ インターフェース内で layerId を確認するには、特定の [Layer Details] ページに移動して、右上の [Access Links] アイコンをクリックします。
  • map は、レイヤーを付加する google.maps.Map オブジェクトを指定します。
  • clickable は true または false 値を受け入れて、レイヤーがマウスイベントを受信するかどうかを指定します。デフォルト値は true です。
  • suppressInfoWindows は true または false 値を受け入れます。true に設定すると、レイヤーの地物をクリックしたときに情報ウィンドウが表示されません。
  • accessToken は、OAuth 2.0 認証リクエストにより返された認証トークンを受け入れます。詳細については、このドキュメントのMaps Engine レイヤーでの認証セクションをご覧ください。

マップが公開されている場合、追加の手順は必要ありません。マップが非公開の場合、認証資格情報の指定が必要です。

イベント

MapsEngineLayer および DynamicMapsEngineLayer クラスは、さまざまなイベントをサポートします。

MapsEngineLayer イベント

MapsEngineLayer では以下のイベントが発生します。

  • click は、レイヤー内の地物がクリックされたときに発生します。このイベントは、次のプロパティを持つ MapsEngineMouseEvent オブジェクトを渡します。

    • featureId は、地物の Google Maps Engine ID です。
    • infoWindowHtml は、情報ウィンドウのデフォルトのコンテンツを含む文字列です。
    • latLnggoogle.maps.LatLng オブジェクトであり、地物がポイントの場合はポイントの場所を指定し、地物がポリラインまたはポリゴンの場合は実際のクリック位置を指定します。
    • pixelOffsetgoogle.maps.Size オブジェクトであり、情報ウィンドウが配置される場所のオフセットを定義して、該当地物に正確に関連付けます。
  • properties_changed は、レイヤーのロードが完了し、レイヤーのプロパティの読み取りが可能になったときに発生します。渡されるイベント オブジェクトはありません。
  • status_changed は、レイヤーのロードが完了し、レイヤーがロードされたかどうかを判断するステータスが使用可能になったときに発生します。渡されるイベント オブジェクトはありません。

DynamicMapsEngineLayer イベント

DynamicMapsEngineLayer では以下のイベントが発生します。

マウスイベント:

  • mousemove
  • mouseup
  • mousedown
  • mouseover
  • mouseout
  • click
  • dblclick
  • rightclick

各イベントは、次のプロパティを持つ DynamicMapsEngineMouseEvent オブジェクトを渡します。

  • featureId は、地物の Google Maps Engine ID です。
  • latLnggoogle.maps.LatLng オブジェクトであり、地物がポイントの場合はポイントを指定し、地物がポリラインまたはポリゴンの場合は実際のクリック位置を指定します。

DynamicMapsEngineMouseEvent オブジェクトには、次の関数も含まれます。

  • getDetails() はコールバック関数を受け入れます。このコールバック関数には、イベントに関する追加の詳細を含む MapsEngineMouseEvent オブジェクトが渡されます。

ロード イベント:

  • properties_changed は、レイヤーのロードが完了し、レイヤーのプロパティの読み取りが可能になったときに発生します。渡されるイベント オブジェクトはありません。
  • status_changed は、レイヤーのロードが完了し、レイヤーがロードされたかどうかを判断するステータスが使用可能になったときに発生します。渡されるイベント オブジェクトはありません。

イベントのリッスン

イベントを捕捉するには、レイヤー上でリスナーを設定します

google.maps.event.addListener(layer, 'click', function(event) {
  var infoWindowContent = event.infoWindowHtml;
});

Google Maps Engine からの地物情報の取得

MapsEngineMouseEvent および DynamicMapsEngineMouseEvent オブジェクトの featureId プロパティは、Google Maps Engine プロジェクト内の地物を特定します。Google Maps Engine API を使用して地物の情報を取得できます。詳細については、Google Maps Engine デベロッパー ガイドの公開データへのアクセスを参照してください。

地物スタイルの取得と設定

DynamicMapsEngineLayer は、地物スタイルの取得と設定をサポートします。地物のスタイルを取得するには、getFeatureStyle() を呼び出して地物の ID を文字列として渡します。

var style = dynamicLayer.getFeatureStyle('1234');

スタイルを設定するために、FeatureStyle オブジェクトの次の任意のプロパティにアクセスできます。

  • fillColor および fillOpacity
  • strokeColorstrokeOpacity、および strokeWidth
  • iconImageiconClipiconAnchoriconSize、および iconOpacity
  • zIndex

DynamicMapsEngineLayer は、この比較表に記載されている限られた Maps Engine 地物スタイルのみをサポートします。サポートされないスタイルは、表示も変更もできません。

サポートされるプロパティについては、FeatureStyle リファレンスで説明しています。

次に例を示します。

var style = dynamicLayer.getFeatureStyle('1234');
style.strokeColor = '#FF0000';
style.iconImage = 'url(images/myIcon.png)';

マウスオーバー時にスタイルを変更する例:

google.maps.event.addListener(dynamicLayer, 'mouseover', function(e) {
  var style = dynamicLayer.getFeatureStyle(e.featureId);
  style.strokeColor = 'red';
  style.zIndex = 1000;
});

スタイルのリセット

地物からすべてスタイルを取り除いて最初に渡された状態のスタイルに戻すには、FeatureStyle オブジェクトで resetAll() を呼び出します。

dynamicLayer.getFeatureStyle('1234').resetAll();

FeatureStyle オブジェクトで reset() を呼び出して、特定のプロパティをリセットすることも可能です。

dynamicLayer.getFeatureStyle('1234').reset('strokeColor');

Maps Engine レイヤーでの認証

Google Maps Engine で Google アカウントにアクセス権を付与している場合、ユーザーは、Google アカウントを使用してマップへの認証を行うことができます。Maps Engine レイヤーでの認証では、OAuth 2.0 トークンを使用します。詳細は、OAuth 2.0 ドキュメントをご覧ください。

Google API Javascript Auth Library(ベータ版)を使用した OAuth 2.0 トークンの取得の例を以下に示します。はじめに、以下が必要となります。

  • ウェブ アプリケーションのクライアント IDGoogle API Console の [API Access] ページから取得します。STRING.apps.googleusercontent.com の形式です。
  • 有効な リダイレクト URI。これも API コンソールで構成されます。デフォルトでは、新規クライアント ID の作成時のリダイレクト URL は https://YOUR_DOMAIN/oauth2callback となります。下の例では、リダイレクト URI がアプリケーションの URI と同じ値になるように編集されていると仮定しています(つまり、認証プロセスにより、認証の完了時にユーザーが元のページに戻されます)。[API Access] ページの [Edit settings…] をクリックして、リダイレクト URI を変更します。
  • OAuth スコープ。これは、https://www.googleapis.com/auth/mapsengine.readonly です。サポートされるスコープはこれのみです。アプリケーションが Google Maps Engine データへのアクセスに mapsengine スコープを使用している場合(.readonly ではなく)、Maps Engine レイヤーで使用するための mapsengine.readonly スコープも含める必要があります。
<html>
<head>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>
<script src="https://apis.google.com/js/auth.js"></script>
<script type="text/javascript">
// An example of how to use oauth to obtain authorization for a web application
// to display Maps Engine layers readable by a user of that application.
//
// The application follows the following flow:
// 1. When first loaded, the application checks if the user has already
//    authorized this application. If so, a function is called to display
//    the requested layer. This check is asynchronous, so uses callbacks in
//    JavaScript. If the user has authorized the application, an access_token
//    is granted by oauth, which can be used to authenticate when displaying
//    a Maps Engine Layer.
//
// 2. If the user has not authorized this application, an 'Authorize' button
//    is shown in the UI. An oauth flow is started when the user clicks this
//    button. Within this flow, the user is asked if they will grant permission
//    for this application to be able to read their Maps Engine data so that
//    it can be displayed on a Map.
//
// 3. If the user grants authorization to the application, the 'Authorize'
//    button is hidden and the Layer is shown. If not the 'Authorize' button
//    remains visible.
//
// 4. Periodically, the access_token is refreshed by making another call to the
//    oauth library.

// The Client ID for your application, as configured on the Google APIs console.
var clientId = 'PLACE YOUR CLIENT ID HERE';

// The oauth scope for displaying Maps Engine data.
var scopes = 'https://www.googleapis.com/auth/mapsengine.readonly';

// The Asset ID of the Maps Engine Layer to display.
var layerId = 'PLACE YOUR LAYER ID HERE';

// This function is run when the page (including the Maps API and Google APIs
// client libraries) have finished loading.
function initialize() {
  checkAuth(false, handleAuthResult);
}

// A shared function which checks if the user has previously authorized this
// application, and if so calls the supplied callback.
// This function should always be called before calling a function which
// requires an oauth access_token.
//
// If prompt_user is true, the user will be prompted to provide access. This
// should not be set to true unless this function was triggered by a user
// action (e.g. clicking a button).
//
// If prompt_user is set to false, and the user is not authorized, the callback
// will be called with null.
function checkAuth(prompt_user, callback) {
  var options = {
    client_id: clientId,
    scope: scopes,

    // Setting immediate to 'true' will avoid prompting the user for
    // authorization if they have already granted it in the past.
    immediate: !prompt_user
  }

  // Check to see if the current user has authorized this application.
  gapi.auth.authorize(options, callback);
}

// A callback run after checking if the user has authorized this application.
// If they have not, then authResult will be null, and a button will be
// displayed which the user can click to begin authorization.
//
// Authorization can only be started in response to a user action (such as
// clicking a button) in order to avoid triggering popup blockers.
function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize_button');

  // Has the user authorized this application?
  if (authResult && !authResult.error) {
    // The application is authorized. Hide the 'Authorization' button.
    authorizeButton.style.display = 'none';
    showMap(authResult);
  } else {
    // The application has not been authorized. Start the authorization flow
    // when the user clicks the button.
    authorizeButton.style.display = 'block';
    authorizeButton.onclick = handleAuthClick;
  }
}

// This function is called when the user clicks the Authorization button. It
// starts the authorization flow.
function handleAuthClick(event) {
  checkAuth(true, handleAuthResult);
  return false;
}


// This function is called once handleAuthResult detects that authorization
// has been provided.
function showMap(authResult) {
  // Create a new Google Maps API Map
  var mapOptions = {
    center: new google.maps.LatLng(0,0),
    zoom: 4
  };
  map = new google.maps.Map(
      document.getElementById("map"),
      mapOptions);

  // Add a Maps Engine Layer to this Map. The access_token granted by the oauth
  // flow is used here to access user data.
  mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
    layerId: layerId,
    accessToken: authResult.access_token
  });
  mapsEngineLayer.setMap(map);

  // Add an event listener which modifies the bounds of the Map to best fit
  // the Layer once the layer has loaded.
  google.maps.event.addListener(mapsEngineLayer, 'bounds_changed', function() {
    map.fitBounds(mapsEngineLayer.get('bounds'));
  });

  // The access_token provided by the oauth flow is only valid for a certain
  // amount of time. Add a timer which will refresh the access_token after this
  // amount of time has elapsed, so that the Layer will continue to work.
  window.setTimeout(refreshToken, authResult.expires_in * 1000);
}

// This function is called once the oauth token has expired. It starts an
// oauth flow in the background which obtains a new token. The user will not
// be prompted to do anything, because we set the 'immediate' property on the
// gapi.auth.authorize request to true.
function refreshToken() {
  checkAuth(false, refreshLayer);
}

// This function is called once an expired access_token has been refreshed, and
// a new access_token is available.
function refreshLayer(authResult) {
  // Update the token provided to the MapsEngineLayer.
  mapsEngineLayer.set('accessToken', authResult.access_token);

  // This token will also expire after some time, so create a timer which will
  // refresh it again.
  window.setTimeout(refreshToken, authResult.expires_in * 1000);
}
</script>
</head>
<body onload="initialize()">
  <input type="button" value="Authorize" id="authorize_button"
    style="display: none;"></input>
  <div id="map" style="height: 100%; width: 100%;">
  </div>
</body>
</html>

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

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