Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.
Gen1 DocsLegacy

Page updated Mar 26, 2026

Amplify Geo のセットアップ

Amplify は、Web アプリケーション向けのマップおよび場所検索用の API とマップ UI コンポーネントを提供します。わずか数行のコードで、アプリにマップと場所検索機能を追加できます。以下は、AWS Cloud Development Kit (AWS CDK) を使用して Amazon Location Services で実装された Geo リソースを作成する例です。ただし、このサービスにはまだ公式なハンドライティング (L2) コンストラクトがないことに注意してください。

amplify/backend.ts
import { defineBackend } from "@aws-amplify/backend";
import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";
import { CfnMap } from "aws-cdk-lib/aws-location";
import { Stack } from "aws-cdk-lib/core";
import { auth } from "./auth/resource";
import { data } from "./data/resource";
const backend = defineBackend({
auth,
data,
// additional resources
});
const geoStack = backend.createStack("geo-stack");
// create a location services map
const map = new CfnMap(geoStack, "Map", {
mapName: "myMap",
description: "Map",
configuration: {
style: "VectorEsriNavigation",
},
pricingPlan: "RequestBasedUsage",
tags: [
{
key: "name",
value: "myMap",
},
],
});
// create an IAM policy to allow interacting with geo resource
const myGeoPolicy = new Policy(geoStack, "GeoPolicy", {
policyName: "myGeoPolicy",
statements: [
new PolicyStatement({
actions: [
"geo:GetMapTile",
"geo:GetMapSprites",
"geo:GetMapGlyphs",
"geo:GetMapStyleDescriptor",
],
resources: [map.attrArn],
}),
],
});
// apply the policy to the authenticated and unauthenticated roles
backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
// patch the map resource to the expected output configuration
backend.addOutput({
geo: {
aws_region: geoStack.region,
maps: {
items: {
[map.mapName]: {
style: "VectorEsriNavigation",
},
},
default: map.mapName,
},
},
});

アプリケーションを設定する

アプリケーションにマップを表示するには、Amplify React MapView コンポーネントまたは MapLibre GLmaplibre-gl-js-amplify ライブラリと一緒に使用します。

次のコマンドを実行して、必要な依存関係をインストールします。

Terminal
npm add aws-amplify @aws-amplify/geo

注: バージョン 6.0.0 以上がインストールされていることを確認してください。

設定ファイルをインポートしてアプリケーションに読み込みます。Amplify 設定ステップをアプリケーションのルートエントリポイントに追加することをお勧めします。

src/index.js
import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);

Amplify.configure をアプリケーションのライフサイクルの早い段階で呼び出すようにしてください。Amplify.configure が他の Amplify JavaScript API の前に呼び出されていない場合、設定がないか NoCredentials エラーがスローされます。

注:

  • 既存の Amazon Location Service リソースを使用したい場合は、このガイドに従ってください。
  • Geo で直接サポートされていない Amazon Location Service API を使用したい場合は、エスケープハッチを使用して Amazon Location Service SDK にアクセスしてください。

参考資料

Location Construct Library

マップの料金プラン

マップの例の料金プランは RequestBasedUsage に設定されています。 料金プランの詳細については、ロケーションサービスの料金ロケーションサービスの利用規約(セクション 82.5)を参照することをお勧めします。