web-dev-qa-db-ja.com

リーフレットにGoogleマップのベースレイヤーをロードする方法（2018年6月以降）？

私のウェブサイトに、Google衛星画像をベースマップとして使用したリーフレットマップがあります。 2018年6月11日以降、APIキーがないと、Googleマップタイルにアクセスできません。現在、タイルには、次のJavaScriptを使用してLeaflet JSからアクセスできます。

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

2018年6月11日以降、リーフレットからマップタイルに引き続きアクセスできるようにするには、APIキーをどのように含めますか？

google-mapsleafletmaps
5
Ashley Goldstraw

undocumentedAPIのURLを指定するだけでGoogleマップからタイルを読み込むと、 Googleマップの利用規約 に違反します。それらから引用させてください：

  1. ライセンス制限。

10.1管理上の制限。

サービスを介する場合を除き、APIまたはコンテンツへのアクセスはありません。サービスを介さない限り、Maps APIやコンテンツにはアクセスできません。たとえば、Maps API以外のインターフェースまたはチャネル（ドキュメント化されていないGoogleインターフェースを含む）を介してマップタイルまたは画像にアクセスすることはできません。

また、タイルURLは 開発ドキュメント に記述されていないことにも注意してください（2018年6月初旬現在）。

ただし、できることは、リーフレットのインスタンスごとに1つのGoogleマップのインスタンスをロードし、マップサイズと中心の両方を同期させ、ミューテーションオブザーバーを使用してGoogleマップインスタンスはタイルをロードするため、GoogleマップDOMツリーからそれをリッピングして、リーフレットDOMツリーに配置できます（トリッキーなCSSを使用してGoogleマップの上にリーフレットを表示すると、最終的に同期に関する問題が発生します両方のズームアニメーション）。

これが怖すぎるように聞こえても心配しないでください。 Leaflet.GoogleMutant は、面倒な作業をすべて行います。そのreadmeから引用させてください：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

var roads = L.gridLayer.googleMutant({ type: 'roadmap' }).addTo(map);

APIキーには完全に明白な場所があり（これは主な心配です）、GoogleMutantはパブリック（およびドキュメント化された）APIのみを使用することに注意してください（ToSにあるため、これも心配する必要があります）。

5
IvanSanchez