React + typescript + GoogleMap

ピン留めされたアイテム

sunao

できるようになったこと

Map Javascript Api

Google Map Api の取得
Mapの表示
Mapを表示する大きさ変更
Mapのstyle変更
Mapのボタンオプション変更
Mapの上に検索ボックスをオーバーライド

Geocoding API +Map Javascript Api

検索したキーワードで位置取得して地図を移動
地図の再描画

Places API + Map Javascript Api

範囲を指定して検索ワードに該当する店にマーカーを立てる
その店舗情報の取得
マーカーをクリックしたらInfoWindowを出す
InfoWindowを自作コンポーネントでカスタマイズ

まだ試してないこと

カーソルでクリックした位置の取得
検索しないでカーソルでクリックした店舗情報の取得
カーソルでクリックした位置にピンを立てる

sunao

Performance warning! LoadScript has been reloaded unintentionally! You should not pass libraries prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable outside of component, or somewhere in config files or ENV variables

このエラー。
LoadScriptが何度も読み込まれる？

ChatGPTさんは解決できなかった。

とりあえず外部でlibrariesを定義するのはマストと考えて⋯⋯

const libraries: Libraries = ["places"];

その後にコンポーネント内でそのまま定義すると警告されるから、
useRefで一度参照してから使う。

  const [isLoading, setIsLoading] = useState(false);
  let libRef = useRef(libraries);

  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "AIzaSyAWeGzhmvkp7Lk2Zjkfyz9FP9Z2PKmlpjU", // ご利用環境のAPIキーを設定
    libraries: libRef.current,
  });

これでひとまず解決。

sunao

色を変更する

とりあえずデフォルトはギラギラしてるから彩度は抑えたい。

const options = {
  disableDefaultUI: true,
  styles: [
    {
      featureType: "all",
      stylers: [{ saturation: -40 }],
    },
  ],
};

色々遊べそう