Technologies
/
Google マップから
Google Maps JavaScript API のコードを 3D の地球儀へ
npm i @ortho-earth/gmaps @ortho-earth/globe
@ortho-earth/gmaps は google.maps を返します。Map・Marker・InfoWindow・図形・Data は MapLibre GL を通して描かれ、
描く先は Ortho Earth の地球儀（@ortho-earth/globe/maplibre）でも、本物の maplibre-gl でも構いません。
Google Maps 向けに書いたコードは形がそのままで、変えるのは import だけです。地図そのものに Google の API キーは要らず、Google へは何も送りません。
// 地球儀の上で
import google from "@ortho-earth/gmaps/globe"; // { maps }
const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 35.6812, lng: 139.7671 }, zoom: 15, tilt: 45 });
const marker = new google.maps.Marker({ map, position: { lat: 35.6812, lng: 139.7671 }, title: "東京駅" });
const info = new google.maps.InfoWindow({ content: "<b>東京駅</b>" });
marker.addListener("click", () => info.open({ map, anchor: marker }));
map.data.loadGeoJson("/parks.geojson");
map.data.setStyle(f => ({ fillColor: f.getProperty("kind") === "park" ? "green" : "gray" }));
@googlemaps/js-api-loader で API を読み込むコードは、代わりに @ortho-earth/gmaps/globe の Loader を使えます。google.maps.importLibrary("maps" | "marker" | "places" | …) も動きます。
平らな地図のままにしたいときは、createGoogleMaps(maplibregl, { styles }) に地図の種類ごとの MapLibre のスタイルを渡します。window.google.maps を読むコードには installGlobal(maps) を使います。
| Google Maps | 地球儀の上では |
|---|---|
Map の option と method（center・zoom・heading・tilt・restriction・moveCamera・panTo・fitBounds・controls[ControlPosition] …） | カメラ。ズームは 1 ずれます（Google の z ＝ MapLibre の z − 1。256 px と 512 px のタイルの違い）。mapTypeId と mapId は MapLibre のスタイルを選びます |
地図のイベント（click・idle・bounds_changed・zoom_changed・dragend …） | Google のイベントの形（latLng・pixel・stop()）で届く MapLibre のイベント。マーカーやクリックできる図形のクリックは、Google と同じく地図のクリックにはなりません |
Marker（URL・Icon・Symbol の icon、label、draggable）、marker.AdvancedMarkerElement・marker.PinElement | Google の赤いピン、自分の画像、SVG の記号を持つ MapLibre のマーカー |
InfoWindow（content・headerContent・pixelOffset・open({ map, anchor })） | マーカーの上の MapLibre のポップアップ。マーカーが動けば付いていきます |
Polyline・Polygon（穴あき）・Circle・Rectangle、MVCArray の経路、geodesic、zIndex | GeoJSON の line と fill の layer。経路を変えれば描き直し、geodesic は大円をたどります |
Data（addGeoJson・loadGeoJson・object か関数の setStyle・overrideStyle・地物のイベント） | GeoJSON の source を 1 つ。地物ごとのスタイルを計算して properties に書きます |
LatLng・LatLngBounds・MVCObject・MVCArray・event.*、geometry.spherical・geometry.encoding・geometry.poly | ただの値。geometry は Google と同じく半径 6,378,137 m の球で計算します |
Google のサーバーにあるサービスには、自分の鍵が要ります：createGlobeMaps({ apiKey, language, region })、maps.setApiKey(key)、または new Loader({ apiKey })。
鍵は *.googleapis.com にだけ送り、これらの呼び出しには Google の規約と課金がかかります。鍵が無ければ method は REQUEST_DENIED を返し、地図はそのまま動きます。
| Google Maps | 中継する先 |
|---|---|
Geocoder.geocode | Geocoding API |
DirectionsService.route・DirectionsRenderer・DistanceMatrixService | Routes API（renderer は経路と A・B… のマーカーを地図に、手順を panel に描きます） |
ElevationService | Elevation API |
places.PlacesService・places.AutocompleteService・places.Autocomplete | Places API (New) |
StreetViewService.getPanorama・StreetViewPanorama | Street View の metadata と Static API：ドラッグで向きが変わる静止画です。Google はパノラマのタイルを自分の API の外に出していないので、滑らかな 360° にはなりません |
styles: [{ featureType, … }]）とクラウドのスタイル：代わりに、地図の種類か mapId ごとに MapLibre のスタイルを渡します。Polyline.icons、マーカーのアニメーション、overlayMapTypes、MVCObject.bindTo、地図の種類・Street View・回転の control。
訳さないものは、コンソールに [gmshim] unsupported: … と一度だけ出ます（例外にはしません）。
google.maps.unsupportedReport() がその一覧を返すので、動かすだけで移植を確かめられます。ほかのことは、map.getMapLibre() が下の地図を返します。
地球儀の上では、その地図で エンジン の全部（地形・3D Tiles・共通の時計・夜の側）も使えます。
検定は、上の呼び出しを本物の地球儀で動かし（packages/globe で npm run verify:ui -- t-gmaps）、サービスは Google のサーバーの代わりを相手に一つずつ確かめます。
MapLibre や CesiumJS と違い、Google の公式サンプルのギャラリーはまだ無いので、この頁の表が対応の一覧です。
ほかの道具から来た人は Leaflet から・MapLibre GL JS から・CesiumJS から も見てください。