今回は、Maps JavaScript API の読み込み方法に関する 3 つの大きな改善点をご紹介します。3 つの改善点とは、柔軟なライブラリ読み込み用の API、新しいインライン ブートストラップ ローダ、一連のパフォーマンスの向上です。
Maps JavaScript API は、API を読み込むときに開発者が指定して追加できるライブラリで構成されています。これらのライブラリは、ウェブサイト上に地図を表示する以外のことも行います。たとえば、開発者は Places API にアクセスするために、プレイス ライブラリを読み込むことができます。ただし、これらのライブラリの読み込みは柔軟性が低く、これまでは Maps JavaScript API の初期読み込み時にしか指定できなかったため（libraries=places URL パラメータを介するなど）、起動時の読み込みに時間がかかっていました。
そこで、今回、ライブラリを動的にインポートするための API を提供することになりました。たとえば、次のようなものです。
await google.maps.importLibrary("places");
このように定義することで、ユーザーが必要であると判断したときにプレイス ライブラリが読み込みまれるように変更されます。たとえば、ユーザーのアクションの後に、場所に関する情報が必要になった場合です。さらに良いことに、以下のコマンドを介して google.maps.places.Place のような長い名前空間の使用を避けることもできるようになりました。
const {Place} = await google.maps.importLibrary("places");
ただし、google.maps.places 名前空間は引き続き設定されます。
また、複数のライブラリを並行してインポートできるようにもなりました。
const [placesLibrary, geocodingLibrary] = await Promise.all([
google.maps.importLibrary("places"),
google.maps.importLibrary("geocoding")
]);
さらに、ドキュメントに書かれている google.maps.importLibrary() を介して Maps JavaScript API のすべてのクラスを利用できるようにしました。たとえば、ユーザーは次のコマンドを介して StreetViewPanorama クラスにアクセスできます。
const {StreetViewPanorama} = await google.maps.importLibrary("streetView");
これで、Maps JavaScript API の依存関係を読み込むタイミングをより正確かつ効率的に制御できるようになります。
もう一つの問題は、Maps JavaScript API <script> ローダを使用するには、グローバルに定義された関数に対するコールバック パラメータを定義しなければならないことです。現在、開発者の皆様には、API の読み込みを待たずにすぐに google.maps.importLibrary() を使用できる新しいインライン ブートストラップ ローダの使用をおすすめしています。これにより、面倒なグローバル コールバックを回避し、Promises または async/await を使用して、Maps JavaScript API の準備が完了するタイミングを追跡することもできます。
URL で <script> タグを指定する代わりに、ほんの小さなインライン JavaScript である 新しいインライン ブートストラップ ローダを含めることができます。このコードは構成パラメータを受け取り、ブートストラップ URL を構築して、すぐに使用を開始できるように google.maps.importLibrary() を定義します。最初に google.maps.importLibrary() が呼び出されるまで、Maps JavaScript API のどの部分も読み込まれません。この新しいインライン ブートストラップ ローダはページごとに複数回使用することもできます。なお、最初の構成のみが使用されます。また、新しいローダを使用すると、Maps JavaScript API の読み込み時に問題が発生した場合（古いコールバック メカニズムがではサポートしてされていなかったもの）、google.maps.importLibrary() Promise によって適切に拒否されます。
今年は、エンドユーザーの読み込み時間を自動的に短縮できるように、Maps JavaScript API にもいくつかの変更を加えました。静的 JavaScript ファイルの Brotli 圧縮を有効にし、画面外のマップに対して自動遅延読み込みを導入しました。また、今年の後半には、より新しいコードの出力ができるように JavaScript をアップグレードし、より多くのブラウザの組み込み機能を利用してファイルサイズを削減する予定です。
多くの開発者から、なぜ npm 経由で配布しないのかと質問されることがあります。Google は API にアクセスするためのオプションを定期的に評価しており、ほとんどの JS パッケージが npm 経由で配布されている世界では <script> タグが時代遅れに見える可能性があることを十分に認識しています。
Google が得た重要なインサイトに、Maps JavaScript API を採用している多くのウェブサイト（大小問わず）は積極的にメンテナンスされていないというものがあり、Google はこうしたウェブサイトの機能を維持できるようにできる限りのことを行いたいと考えています。UI レンダリングを構成するコードはかなり複雑で、内部で多数のバックエンド サービスを利用します。長年にわたってブラウザやバックエンド サービスに無数の変更が加えられたため、正しい動作を続けるためには、Maps JavaScript API の内部動作を更新する必要がありました。アクセシビリティ、プライバシー、セキュリティに関する重要な更新もありました。また、各ウェブサイトは API を Google から直接読み込むため、こうした更新をすべて自動的に取得できています。積極的に管理されているウェブサイトであっても、Maps JavaScript API を使用する価値の一つは、この種の変更によって引き起こされる予期せぬ破損の多く（およびその結果として生じる、修正を見つけてデプロイするというストレスのかかる作業）を回避できることです。これは、依存関係の管理に取り組む代わりに、自分自身の目標に集中してより多くの時間を費やすことができることを意味します。
<script> の読み込みと npm との間のギャップを埋められるものを探している開発者のために、Google Maps Platform は @googlemaps/js-api-loader パッケージを提供しています。新しい google.maps.importLibrary() は、Loader.importLibrary() を介して js-api-loader とともに使用することもできます。また、Maps JavaScript API の新しいリリースを採用する時期をより細かくコントロールしたいと考えている開発者の方は、利用可能なオプションをご確認ください。Maps JavaScript API の各バージョンは、1 年間利用することができます。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer
先月グローバル アクセシビリティ アウェアネス デーを迎えたことにちなみ、昨年の取り組みからの進捗状況と、Maps JavaScript API と Maps Embed API のユーザー補助機能の向上に関する最近の更新情報についてお知らせします。
Google Cloud は昨年より Embed API の根本的な改善に焦点を絞り、「タブ」の順序、キーボードとスクリーン リーダーのインタラクティブな機能、ユーザー補助ラベルの追加、各種マップ コントロールのカラー コントラストの強調といった改善に取り組んできました。このような改善により、目の不自由な方に加え、スクリーン リーダーやキーボード ナビゲーションを使うすべての方に、よりインクルーシブなマップをご利用いただけるようになります。この記事では、これまでに実現できた改善点の詳細をいくつかご紹介します。
ハイ コントラスト モードのマップも改善し、一部のボタンとチェックボックスを見やすく、認識しやすくしました。このために、マップがハイ コントラストの設定に合うようにコードベースの CSS に変更を加えました。
また、マップで特に使用される UI コンポーネントである情報ウィンドウ（InfoWindow）のさらなる改善にも引き続き取り組みました。デベロッパーはユーザー補助ラベルを指定して、情報ウィンドウが表示されているときにフォーカスするようプログラムで設定できるようになりました。
const infoWindow = new google.maps.InfoWindow({
ariaLabel: 'Hello Accessibility',
content: '<h2>Hello Accessibility!</h2>',
});
infoWindow.addListener('visible', () => {
infoWindow.focus();
infoWindow.open({
anchor: marker,
shouldFocus: false,
最後に、キーボードでのマーカー操作を支援するためにスクリーン リーダー向けの使用手順を追加しました。この機能は、初めて利用するユーザーで、キーボードを使ってインタラクティブなマーカー（登録したクリック イベント リスナーがある場合）を移動する方法についてご存知ない方に特に便利です。マーカーをより使いやすくする方法について詳しくは、「マーカーをアクセス可能にする」ガイドと「マーカーのユーザー補助機能」コードサンプルをご覧ください。
新たに改善した機能をお試しいただき、変更点に関するフィードバックや新しいバグの報告にご協力いただけますと幸いです。それらを参考にして、最も影響が大きい領域に優先して対応してまいります。皆様のウェブサイトに影響する既存のバグに [+1] で投票するか、新しいバグレポートを提出してください。
ユーザー補助機能は、さまざまなユーザーやコミュニティに多様な影響を与える複雑なトピックです。お客様のフィードバックは、Google Maps Platform の機能を誰でも利用できるようにする取り組みの指針として活用されます。Maps JavaScript API と Maps Embed API のユーザー補助機能や改善点の最新情報もご確認ください。
ウェブでは毎日、世界中の何百万人ものユーザーが Maps JavaScript API によって提供される Google マップの基本地図を利用しています。Google の目標は、多くのユーザーに受け入れられる主題図を容易に作成するために必要となるツールをデベロッパーに提供することです。
Google Maps Platform チームは、Maps JavaScript と Maps Embed の UI と API のユーザー補助機能の向上に向けて、まだまだできることがあると認識しています。詳細については、Maps JavaScript API と Maps Embed API の更新状況は、リリースノート ページでご確認ください。
多くのデベロッパーはコンテンツ管理システム、プラグイン、他のソフトウェア ソリューションを使用してウェブサイトやアプリを作成します。今までは、こうしたウェブサイト エクスペリエンスへのマッピング機能の追加は分断されたプロセスであったため、多くのユーザーがプロジェクトにマップを追加する前に諦めてしまう原因となっていました。Google はこの度、Quick Start Widget を発表いたします。これによりデベロッパーは、ユーザーが Google Maps Platform を簡単に使い始められるようにし、API キーの生成やウェブサイトやアプリへのマップの埋め込みができるよう支援します。
Quick Start Widget を使用すると、ユーザーは API キーを取得し、面倒なユーザーフローを経由することなく、サイトやアプリでマップを使用できます。ユーザーが最小限の負担で開始できるようにすることが、ユーザーの導入を促すうえで重要になります。新しいウィジェットでは、ユーザーは Google から API キーを確保するためにデベロッパーの提供する環境を離れる必要がなくなります。ユーザーにはアカウントやプロジェクトを設定する簡単かつ一連の手順が提供されます。なお、キーは自動的に作成され、保護されます。
このたび、オープンソース ライブラリ Maps Compose の提供を開始することになりました。Maps Compose を使用すると、Maps SDK for Android を Jetpack Compose と一緒に使用できます。Compose を使ってアプリに地図を追加する場合、これまでは Compose とビューベースの MapView の間を橋渡しするために多くのビュー相互運用性コードを記述する必要がありましたが、今後はそういった手間を省くことができます。
Compose は、Android の最新の宣言型ネイティブ UI ツールキットです。UI の記述についての考え方を変えることで、前述の Compose は UI 開発を簡素化と高速化します。つまり、ユーザーはアプリの外観を指定するだけで済み、それ以外は Compose によって処理されます。これは Maps Compose についても同様です。従来よりはるかに少ないコードで Android アプリに地図を追加できるようになりました。
このブログでは、Maps Compose ライブラリをインストールする方法と、その機能の一部について説明します。
さっそく始めましょう。
Maps Compose ライブラリをインストールするには、アプリレベルの build.gradle ファイルに次の依存関係を追加します。
dependencies {
implementation "com.google.maps.android:maps-compose:1.0.0"
implementation "com.google.android.gms:play-services-maps:18.0.2"
}
上記の新しい依存関係をアプリに追加したら、Android Studio でプロジェクトを再構築して、変更を同期します。また、Cloud のコンソール経由で、API キーを作成してアプリに追加する必要があります。詳しくは、「API キーを使用する」をご覧ください。
Maps Compose を依存関係としてアプリに追加し、API キーを追加したら、アプリでコンポーズ可能な関数 GoogleMap を使用できるようになります。Compose を初めて使用する場合、コンポーズ可能な関数は基本的に、Compose で構築されたアプリケーションの UI ビルディング ブロックとなります。
アプリに地図を追加する最も簡単な例を次に示します。
val singapore = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(singapore, 10f)
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState
) {
Marker(
position = singapore,
title = "Singapore",
snippet = "Marker in Singapore"
)
上記のスニペットでは、地図が画面内で最大化され、ビューは camera パラーメータでシンガポールの中心に配置されます。googleMapOptionsFactory で提供されるラムダ式は、地図の初期化に使用される GoogleMapOptions オブジェクトを構築します。最後に、地図のコンテンツでコンポーズ可能な関数 Marker を呼び出すと、地図にマーカーが追加されます。
この例を、ビューを使って地図を追加する例と比較するには、Maps SDK for Android のドキュメント ページにある既存のクイックスタートをご覧ください。Compose の場合は必要なコードがはるかに少なく、地図のライフサイクルを考慮する必要がないことがわかります。
地図上でプロパティを設定するには、MapProperties オブジェクト、または UI 関連のプロパティ用の MapUiSettings オブジェクトを使用します。これらの状態を管理することで、地図上で再構成をトリガーする際にに利用できます。
次のスニペットでは、地図上のズーム コントロールを切り替えるために、Compose の Material コンポーネントであるスイッチがビューに追加されています。
var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
Box(Modifier.fillMaxSize()) {
modifier = Modifier.matchParentSize(),
properties = properties,
uiSettings = uiSettings
Switch(
checked = uiSettings.zoomControlsEnabled,
onCheckedChange = {
uiSettings = uiSettings.copy(zoomControlsEnabled = it)
マーカーやポリゴンなどのオブジェクトを地図上に描画するには、コンテンツ ラムダをコンポーズ可能な関数 GoogleMap に提供します。
たとえば次のスニペットでは、コンポーズ可能な Marker を使用して、シンガポールを中心とする地図にマーカーを追加しています。
modifier = Modifier.fillMaxSize()
地図のビュー内での位置を制御するには、CameraPositionState を使用します。このオブジェクトは、地図のカメラ位置の変更を管理するために使用できます。また、カメラ更新コマンドを地図に送信するために使用することもできます。
たとえば次のスニペットでは、ボタンがクリックされると、地図のカメラをシドニーに移動する方法を表しています。
val sydney = LatLng(-33.852, 151.211)
Button(
onClick = {
cameraPositionState.move(CameraUpdateFactory.newLatLng(sydney))
Text(text = "Animate camera to Sydney")
Google マップにおける Jetpack Compose のサポートを改善することで、より迅速かつ簡単にアプリに地図を追加できるようになりました。すぐに使用したい場合は、GitHub リポジトリにある付属のサンプルアプリを利用してご確認ください。Jetpack Compose をこれまで利用したことがない場合は、Jetpack Compose の公式ドキュメントに詳細の記載がありますのでご覧ください。
今後ともどうぞよろしくお願いいたします。
12 月 1 日（米国時間）、Maps SDK for iOS と Places SDK for iOS の新しいバージョンをリリースいたしました。バージョン 6.0 では、サポート対象の iOS のバージョンが iOS 12 からとなり、Apple M1 マシン上で iOS 14 以降のシミュレータを使用して開発する際に必要なバイナリを含む XCFramework のプレビュー サポートを提供し、デベロッパーの開発速度向上を実現します。また、このバージョンには、デベロッパーの皆様からのリクエストに基づいて、マーカーを地図に追加した際のアニメーション動作に関する新機能も追加しています。
バージョン 6.0 では、マーカーをマップに追加した際の表示をアニメーション化できるように、kGMSMarkerAnimationFadeIn という新しい GMSMarkerAnimation タイプが導入されました。
これを使用するには、マーカーをマップに追加する前に、マーカーの appearAnimation プロパティを設定します。 Swift
let position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.2)
let marker = GMSMarker(position: position)
marker.appearAnimation = .fadeIn
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(-33.86, 151.2);
GMSMarker *marker = [GMSMarker markerwithPosition:position];
marker.appearAnimation = kGMSMarkerAnimationFadeIn;
従来、Maps SDK for iOS と Places SDK for iOS は、アプリの開発とリリースに必要なアーキテクチャを含む単一の .framework ファイルとして配布されていました。しかし、Apple M1 マシンを使用する場合、新しいバリアントである arm64 シミュレータに対応させるため、SDK を新しい XCFramework 形式に再パッケージ化する必要がありました。
Apple M1 マシンで以前のバージョンの SDK の使用を試みたことがある方は、以下のエラーに見覚えがあるはずです。
ld: building for iOS Simulator, but linking in object file built for iOS, file '[...]/GoogleMaps/Frameworks/GoogleMaps.framework/GoogleMaps for architecture arm64
Maps SDK for iOS と Places SDK for iOS のバージョン 6.0 のリリースでは、XCFramework のプレビュー サポートを提供し、Apple M1 マシンで発生していた上記のエラーを解消しています。プレビュー サポートの使用方法について詳しくは、Maps と Places のスタートガイドをご覧ください。
Maps SDK と Places SDK の XCFramework バージョンはベータ版のため、これらのバージョンは開発目的でのみ使用し、アプリをリリースする際には .framework バージョンを使用することをおすすめします。今後の SDK では、XCFramework のサポートを一般提供する予定です。
CocoaPods や Carthage を使用して Maps SDK for iOS と Places SDK for iOS のバージョン 6.0 をインストールできるようになりました。SDK の XCFramework プレビュー版をインストールする場合は、[Installing the XCFramework] タブをご覧ください。サポートする iOS バージョンは iOS 12 からとなるため、バージョン 6.0 を使用して開発するには Xcode 12 以降を使用する必要があります。iOS 11 のサポートは現在中止していますが、Maps SDK for iOS と Places SDK for iOS の古いバージョンを指定することで、引き続きご利用いただけます。
カスタマイズされた地図は、スムーズなエクスペリエンスを提供するうえでの鍵となり得るもので、ユーザーを惹き付け、ユーザーの関心を集めてくれます。自由度の高い地図は、不動産会社が地図上のスポット（POI）に微調整を加えて、購入者が住む場所を決める際の手助けになるときや、地図のスタイル設定をしている地域の薬局が、自分たちのロケーションを競合他社に比べて目立たせる場合でも同じであると考えます。だからこそ Google は、スポットの密度とフィルタリングの管理、ズームレベルのカスタマイズ、さらには業界別に最適化された地図のスタイルといった機能を通した能力の強化を重視してきました。ですが、お客様の地図を次のレベルに押し上げるためのサポートは、これにとどまりません。この度、2 つのアップデートを一般提供します。それは、新しい Maps SDK for Android と、Android と iOS 向け SDK のクラウドベースのマップスタイル設定機能の拡張です。この 2 つでネイティブ モバイル マップ エクスペリエンスを強化することで、すべてのプラットフォームにわたる一貫性のある最適化された地図の提供が簡単に実現できるようになります。また、現在 Google が取り組んでいる追加機能の一部についても紹介します。
世界中のデベロッパーは、ドライバーの配達のサポートや、小売業者が注文の配送先住所を視覚的に確認する際のサポートといった、重要性の高いエクスペリエンスの提供を Maps SDK for Android に依存しています。消費者がアプリに費やす時間は増加し続け、アプリの使用が日常的で欠かせないものになる中、消費者の高い期待に応えられるモバイル エクスペリエンスが、かつてないほど重要になってきています。
今回リリースした Maps SDK for Android のバージョン 18.0.0 では、新たなレンダラによって実現した、より充実した地図描画のエクスペリエンスをアプリユーザーに提供します。新しいレンダラによるタイル表示やレンダリング アーキテクチャの最適化を導入したことで、品質を落とさずに地図データのサイズを軽減できました。これにより、ネットワーク負荷、デバイス上の処理、メモリ消費量が削減され、よりスムーズで安定したエンドユーザー エクスペリエンスにつながります。また、地図のラベルに特化した改善も行いました。今回のアップデートによりラベルの柔軟性が増し、より正確に位置取りできるようになったことで、マーカー管理機能の未来が切り開かれました。さらに、操作の処理全体を強化したことで、アニメーションの向上や、よりスムーズなパンやズームを実現しました。
Maps SDK for Android は引き続き Google Play 開発者サービス SDK の一部として継続して提供されるため、バージョン 18.0.0 にアップグレードしたとしても、APK サイズを増加させることなくすべての改善点を活用することができます。
今年前半の Google I/O にて、Google は JavaScript 向けクラウドベースのマップスタイル設定の一般提供を発表しました。それ以来お客様は、より優れたカスタマイズ機能やクラウドで強化された効率的なデプロイのワークフローを利用して、ミュンヘンのインタラクティブな地図の作成から、Cadbury が主催した仮想イースター エッグ ハントなどの楽しいイベントまで、数多くのマッピング エクスペリエンスを提供しています。この度、クラウドベースのマップスタイル設定機能は、Maps SDK for Android（バージョン 18 以上）と Maps SDK for iOS（バージョン 5.0 以上）の一般提供バージョンでサポートされます。
クラウドベースのマップスタイル設定により地図のカスタマイズに必要なコードがクライアントからクラウドに移動することで、新機能を使用するための修正や、新しい構成のテストが簡単にできるようになります。このようにクライアント コードとカスタマイズ コードを分離したことで、すべての対応プラットフォームにわたる多数のアプリにおいて、単一ブランドの管理や最適化したスタイルの管理がより簡単に実現できるようになります。また、プラットフォームやインストール ベース全体でのマップスタイルの変更が、ボタンを押すだけで同時に公開できるようになります。クラウドベースのマップスタイル設定は、スポットのフィルタリングとスポット利用の促進、ズームレベルのカスタマイズ、ランドマーク、商業地域用スタイル設定などの、増え続ける新たな一連のカスタマイズ機能の基盤となるものです。
モバイル デベロッパーは、Google Cloud Console で MapID を作成することで、Dynamic Maps におけるクラウドベースのマップスタイル設定機能やシンプルなクロス プラットフォーム カスタマイズが活用できるようになり、Maps SDK for Android または Maps SDK for iOS 内で使用できるようになります。Maps SDK for Android または Maps SDK for iOS を介して Map ID を読み込んだ Dynamic Maps は、Maps JavaScript API（Dynamic Maps）と同じ SKU で請求され、同一の毎月 $200 分のクレジットの利用が可能となり、使用量に応じた料金が適用されます。デベロッパーは、新しい Maps SDK for Android にアップグレードした場合でも、これまでと同様に無料で引き続きクライアントのスタイル付き地図の利用が可能です。
Google は、差別化されたエクスペリエンスを提供し、ユーザーを惹き付けるうえで、地図のカスタマイズに関して多様なニーズがあることを理解しています。Google は、さらなるクラウドベースのマップスタイル設定機能の開発に取り組んでおり、ご要望に応じたサポートが提供できるように、マーカー機能、マップの要素、データドリブンのスタイル設定に力を入れています。Google は一連の新しいマーカー機能、簡単なピンのカスタマイズ、Marker Collision Management、パフォーマンスの最適化、カスタム マーカー要素などに取り組んでおり、これらはしっかりカスタマイズされ高度に最適化されたマーカー ドリブン エクスペリエンスの迅速なデプロイの実行を可能にするものです。また、より詳細な地図を求めている人向けに、詳細なストリート マップの可用性とカスタマイズをさらに多くの都市に拡大しています。さらに、新しい API を公開し、プログラムで地図要素のスタイル設定を簡単にする機能にも取り組んでいます。これにより、お客様のデータに基づいた Google の保有する行政界データを用いて、スタイル設定機能を応用した階級区分図を簡単に作成することが可能となります。
これは、Google がデベロッパー コミュニティ向けに構築しているサービスのほんの一部です。Google が追加機能の実現に向けて懸命に作業を進めている間に、詳細をウェブサイトでご覧いただき、デベロッパー向けドキュメントを確認し、カスタマイズとモバイル地図の強化をぜひスタートしてください。
昨年、地図全体における自然特性の描写を強化したことで、Google マップの外観が進化しました。同時に、このスタイルは Google Maps Platform で Cloud ベースのマップスタイル設定を使用するユーザーのデフォルトの地図になりました。どんな場面でも最新の Google マップによるエクスペリエンスをご利用いただけるようにするため、11 月から API バージョンと SDK バージョンに同じ地図スタイルを展開します。また 2022 年 5 月までに、サポートされているすべての環境でこの地図スタイルをデフォルトとします。
唯一の変更点は、デフォルトのベースマップの自然地形の見え方です。新しく衛星から情報取得したカラー マッピング技術により、Google マップ アプリ、ウェブサイト、そして Google Maps Platform の Cloud ベースでスタイル設定された地図で、より詳細かつ色鮮やかな表示を実現できました。
Maps JavaScript API や Static Maps API に Cloud ベースのマップスタイル設定をすでに使用していて、2020 年 9 月以降にスタイルを作成した場合は、新しいデフォルト地図がすでに有効になっています。
Cloud ベースのマップスタイル設定を使用していない Maps JavaScript API や Static Maps API のお客様の場合、Maps JavaScript API の通常のバージョニング チャネルを通じて新しいデフォルトの基本地図に移行されます。対象は 2021 年 11 月のウィークリー チャネルのバージョン 3.47 以降で適用されます。
Maps Embed API を使用している場合、2021 年 11 月に新しいデフォルトの基本地図が有効になります。
カスタム JSON スタイルを使用しているモバイル SDK のお客様は、Cloud Console の地図スタイル エディタで JSON スタイルのインポート用ツールを使用することで、今回の新しいデフォルト地図での表示を視覚的にプレビューできます。
2022 年 5 月には、すべての環境とすべてのバージョンの SDK で、新しいベースマップがデフォルトでご利用いただけるようになります。対象となる Maps JavaScript、Static Maps、Android SDK と iOS SDK には、デフォルトで新しいベースマップが表示されます。
問題やバグを共有するには、公開されている Issue Tracker から Issue 203429433 宛に送信してください。また、Google Maps Platform API と各 SDK でのテスト方法の概要や、新しいスタイルがそれぞれデフォルトになる時期については、以下の表をご確認ください。
API
テスト方法
新しい地図スタイルがデフォルトになる時期
Maps Embed API
--
2021 年 11 月
Maps JavaScript API
Maps JS ウィークリー チャネル（2021 年 11 月）の v3.47、Cloud ベースのマップスタイル設定
2022 年 5 月
Static Maps API
Cloud ベースのマップのスタイル設定
Maps SDK for Android
プレビュー版のスタイル設定
すべての SDK バージョンで 2022 年 5 月
Maps SDK for iOS
Google I/O 2021 での WebGL を利用したマップ機能のベータ版リリースの発表に備え、Google Maps Platform チームは、2012 年からの Google Cloud パートナーである Ubilabs と協力して、3D レンダリングを地図に導入すると実現できることをデベロッパーに紹介するためのデモを作成しました。最初のデモ「Google Maps Platform WebGL-powered Maps Features（Google Maps Platform WebGL を利用したマップ機能）」は、各 WebGL 機能とそれらを効果的に使用する方法をデベロッパー向けに詳しく紹介しています。
デベロッパー向けのデモでは、WebGL を利用したマップ機能の活用方法を Google Maps Platform デベロッパーに紹介しています。
2 番目のデモ「Travel with Next Generation Maps（次世代マップを活用した旅行）」では、架空の旅行アプリを例にして、Google Maps Platform の新しい 3D 機能でマッピング エクスペリエンスがどのように変容するかを全体像として見ることができます。
このプロジェクトに携わった Ubilabs のソフトウェア エンジニアである Martin Schuhfuss 氏は、2019 年の Google I/O で Google Maps Platform エンジニアリング リードの Travis McPhail と話したことを覚えています。その内容は、Google Maps Platform チームが一部の API で検討している変更と、ベクトル地図や 3D コンテンツをサポートするための取り組みについてでした。そして 2021 年。Schuhfuss 氏は Google I/O 2021 向けに Google Maps Platform の新しい WebGL 機能を紹介するデモの作成に向けて、Google Maps Platform チームとの打ち合わせに参加することになりました。信頼できる Google Cloud パートナーとして、Ubilabs はそれら機能の初期ユーザーに任命されていました。初期段階にある機能の常として、開発プロセスが進行する中、デバッグや初期ドキュメントの作成が必要になる可能性がありました。
Ubilabs の共同創業者かつ開発責任者であり、Google Maps Platform の Google Developer Expert である Martin Kleppe 氏も、プロジェクト マネージャーやデザイナー、その他 3 名のデベロッパーとともにプロジェクトに取り組みました。
Schuhfuss 氏は次のように語っています。「私たちはインターネットでの地図のユースケース、特に 3D のシーンで興味深いものを探しました。小規模なテスト版を作成し、自分たちに何ができるかを試していました。しかし、当時はドキュメントすら存在しませんでした。」
Ubilabs はデモのうち 1 つをデベロッパー向けとし、新しい機能について順を追って説明するとともに、コードサンプルを盛り込んで使用方法を紹介することにしました。2 番目のデモである旅行アプリは、航空便での移動、タクシー乗車、ホテルの検索、旅先での食事という場面に当てはめて新しい機能を紹介しています。Schuhfuss 氏は、WebGL ベータ版機能の初期ユーザーとして学んだすべてを効果的に要約した、ユーザー向けのデモ案内文を作成しました。そのテキストの大半は、機能を初めて試す他のユーザー向けにドキュメントにまとめられました。
Schuhfuss 氏は次のように語っています。「各機能について、できるようになったこと、そしてそれがどのように表示されるのかを示すのに最適な Google Maps Platform の使い方は何か。チーム内で自問を繰り返しました。そして、ある都市を訪れる旅の過程を、初めから終わりまで表現する旅行デモを作成することにしました。」
デベロッパーは真上から見下ろした、北が上になった 2D の地図表示に慣れています。そのため、Schuhfuss 氏は、どんな場面でも 3 次元機能を利用してカメラを動かし、地図に情報を追加できる仕組みの紹介に力を入れました。たとえば、以下のスクリーンショットでは、地図にシンプルな傾斜と回転を追加するだけで、エクスペリエンス全体がいかに変化するかがわかります。
Kleppe 氏は次のように説明します。「WebGL 機能の基盤をなすテクノロジーは、GPU による高速レンダリング サービスを使用します。ユーザーはマシンのグラフィック カードを使って建物を 3D レンダリングし、3D オブジェクトを空間に配置できます。以前は追加のレイヤとして地図上にデータを表示できるだけでしたが、現在では新たなレベルの制御が可能になりました。これにより、街の景色を見るような没入型エクスペリエンスを実現できます。」
まず、チームは小規模なデモを作成し、次にそれらをクリックして詳細を見られる大規模なデモに組み込みました。意図したとおりに機能しないものがあると、Ubilabs はトラブルシューティングを試み、Google Maps Platform エンジニア チームと協力して問題を修正しました。あるケースでは、Schuhfuss 氏が 3 つの異なるオブジェクトをあるシーンに追加すると、3 番目のオブジェクトは常に数秒後に消え、2 番目のオブジェクトはさらに数秒後に消えました。Ubilabs は、この問題に関するフィードバックを Google Maps Platform エンジニア チームと共有しました。同チームは次のリリースで問題を解決し、このサービスをユーザー向けに改善できました。
Schuhfuss 氏は次のように述べています。「私はデバッグに時間をかけ、起きている現象を把握しようとしました。建物の背後に隠れるようにレンダリングするものをオクルージョン（手前にある物体が背後にある物体を隠す状態）できるようにするには、WebGL コンテキストを共有する必要があります。WebGL はグラフィック カードと通信でき、小さな状態の変化の影響を受けやすいインターフェースです。」
Schuhfuss 氏は、緯度と経度による座標の把握と算出とは別に、かなりシンプルな Three.js 機能が残りの開発に必要であることがわかりました。同チームは Google Maps Platform チームと定期的に連絡を取り、進捗状況を確認し合いし、技術的な問題や更新に対処しました。
Ubilabs は各デモの締めくくりに、デベロッパーが WebGL 機能で作成できるものとして、目を引く機能を紹介しました。
「旅行デモの最後のページは一番のお気に入りです」と Schuhfuss 氏は言います。氏は Google I/O の数日前にそのページを完全に再構築しました。「私が気に入っているのは、カメラを回転させたときのテキストラベルの動作と、建物が隠れるとテキストの下に小さなステムが表示されることです。」
デベロッパー向けのデモの最後のページでは、ユーザーに「地図を再定義する」ことを推奨しており、埋め込みの動画や花火が表示されます。
Schuhfuss 氏は次のように語ります。「次に気に入っているのは花火です。動画を埋め込むことができ、どこかに表示したくて港にビデオウォールを構築しました。開発の途中では、リック・アストリーの曲も再生されていたようです。」
「通りが表示された基本地図と、ビジネス情報を描画するレイヤ、ルートを計算するための追加 API など、さまざまなデータソースを組み合わせることができます。さらに、その上に独自の情報を配置できます。API のデータセットだけではありません。自分のデータを世界の抽象的なビューにいつでも自由に統合できます。」
さらに、Schuhfuss 氏は、slack ワークスペースの Three.js コミュニティも運営しており、オンラインで驚きの声が多数寄せられたことに加えて、「ユーザーによるこうした機能のユースケースを見るのを本当に楽しみにしています。」とも述べています。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やご意見はページ右上の「お問い合わせ」より承っております。
