MapConductorドキュメント / セットアップ / React / Google Maps
Google Maps セットアップ
Web で Google Maps を MapConductor から使う手順です。Google Maps JavaScript API は動的に読み込まれるので、script タグを書く必要はありません。2D と 3D で別のビューを使います。
PACKAGE
react-for-googlemaps
API KEY
必要
CSS
不要
REACT NATIVE
あり
前提
Node.js 18 以上
Maps SDK / JavaScript API が有効な Google Cloud プロジェクト
HTTP リファラで制限した API キー
STEP 01
API キーを取得する
- Google Cloud Console で Maps JavaScript API を有効にします。
- 「認証情報」から API キーを作成します。
- キーを配信ドメインの HTTP リファラに制限します。
注意
キーはビルド時の環境変数（Vite なら import.meta.env.VITE_*）から渡し、ソース管理には入れないでください。フロントエンドに渡る以上、公開されても被害が出ないようリファラ制限やドメイン制限を必ず掛けます。
STEP 02
インストールする
Google Maps JavaScript API は @googlemaps/js-api-loader で動的に読み込まれます。この loader はパッケージに同梱されているので、別途インストールする必要も、CSS を読み込む必要もありません。
terminalnpm
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-googlemapsSTEP 03
キーを状態フックに渡す
キーはビュー component の props ではなく、状態フックに渡します。props に置くとテストのログやスナップショットに混ざるためです。
HelloMap.tsxTypeScript · React
const mapState = useGoogleMapViewState({
id: 'web-google-map',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.Normal,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});キーが無いときの専用のエラーは出ません。読み込み失敗として現れるので、まずキーを疑ってください。
STEP 04
2D と 3D を使い分ける
Google Maps は 2 つのスタックを持ち、MapConductor はそれぞれに別のビューを用意しています。両者は同じ状態オブジェクトを共有します。mapId を設定すると 2D 側のマーカーが AdvancedMarkerElement で描画され、設定しないと従来のマーカーになります。
HelloMap.tsxTypeScript · React
// Classic 2D map (google.maps.Map)
<GoogleMapView2D state={mapState} mapId="YOUR_MAP_ID" />
// True 3D camera (google.maps.maps3d.Map3DElement)
<GoogleMapView state={mapState} mapId="YOUR_MAP_ID" version="alpha" />注意
3D ビュー（GoogleMapView）で使えるデザインは Normal・Hybrid・Satellite だけです。Terrain と None を渡すと実行時に例外になります。3D は maps3d ライブラリを使うため version="alpha" が必要です。
動作確認
ここまで動けば完了
東京を中心に地図が出て、マーカーが 1 つ立てば完了です。
HelloMap.tsxTypeScript · React
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { GoogleMapDesign, GoogleMapView2D, useGoogleMapViewState } from '@mapconductor/react-for-googlemaps';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useGoogleMapViewState({
id: 'web-google-map',
apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
mapDesignType: GoogleMapDesign.Normal,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<GoogleMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</GoogleMapView2D>
);
}状態オブジェクト
useGoogleMapViewState が受け取るパラメータです。
signatureTypeScript
useGoogleMapViewState({
id?: string;
apiKey?: string; // required in practice
mapId?: string; // Advanced Markers / cloud styling
mapDesignType?: GoogleMapDesignType; // default GoogleMapDesign.Normal
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})地図デザイン
GoogleMapDesign は Google のマップタイプに対応します。
GoogleMapDesign
Notes
Normal
roadmap。3D でも使える
Satellite
衛星画像。3D でも使える
Hybrid
衛星画像＋ラベル。3D でも使える
Terrain
地形図。2D のみ
None
ベースマップなし。2D のみ
うまくいかないとき
地図が出ない
- キーが状態フックに渡っているか、環境変数が読めているか確認します。
- Console でキーのリファラ制限が実際の配信ドメインと一致しているか確認します。
3D ビューが例外を投げる
- mapDesignType に Terrain や None を渡していないか確認します。3D は Normal・Hybrid・Satellite のみです。
- version="alpha" を渡しているか確認します。
開発時だけ地図が二重に初期化される
- React StrictMode は effect を 2 回実行します。各プロバイダはこれを検知して片方を破棄するようになっているので、StrictMode を外す必要はありません。
次に
3D ビューではウィンドウのサイズ変更に合わせてカメラの range を補正しているため、画面サイズが変わってもズームの見え方が揃います。