質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.95%

GoogleMapReactで差し込まれている地図を3DのGoogle mapに差し替える方法

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 40

score 2

前提・実現したいこと

既存のシステムで使用されているGoogle mapが2Dなので、
3Dマップに差し替えたい。(Googleから今年5月にリファレンス有り)

GoogleのwebglOverlayViewの公式ドキュメントでは、
チュートリアルとしてテスト用のコードが配布されており、
その中ではinitMap()で地図を差し込むようになっているが、

差し替えたいシステム(JavaScript)はGoogleMapReactで地図が差し込まれており(?)、
この場合、どうやって3D地図に対応したmapIdなどを指定して良いかが分からない。

プログラミング自体が未経験に近いので、JavaScriptに関しても
よく理解ができていないため、解決法を導くことが難しい。

既存システムの書き換えが必要と思われる箇所のソースコード

return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{
          key: apiKey,
          libraries: ["places", "geometry", "drawing"],
        }}
        defaultCenter={defaultCenter}
        defaultZoom={18}
        options={mapOptions}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) =>
          setGoogleApi({
            map: map,
            maps: maps,
            mapLoaded: true,
          })
        }
        onChildMouseDown={onChildMouseDown}
        onChange={onChange}
      >

Googleチュートリアルのソースコード

import { Loader } from '@googlemaps/js-api-loader';

const apiOptions = {
  "apiKey": "APIキー",
  "version": "beta",
  "map_ids": "マップID"
};

const mapOptions = {
  "tilt": 30,
  "heading": 0,
  "zoom": 18,
  "center": { lat: 35.6594945, lng: 139.6999859 },
  "mapId": "マップID"
}

async function initMap() {
  const mapDiv = document.getElementById("map");
  const apiLoader = new Loader(apiOptions);
  await apiLoader.load()
  return new google.maps.Map(mapDiv, mapOptions);
}

function initWebglOverlayView (map) {
  let scene, renderer, camera, loader;
  // WebGLOverlayView code goes here
}

(async () => {
  const map = await initMap();
})();

試したこと

options={mapOptions}の変数mapOptionsに、
tlit,heading,mapidを追加

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.95%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る