ブログ

小さい画面での Map Types Control の表示方法が改善

2024.08.30
最新アップデート

皆様、こんにちは!
Google Maps Platform のプロフェッショナル集団、ゴーガです。

本日は、Maps JavaScript API バージョン3.58.1aのアップデートから、地図の表示幅が小さい場合の Map Types Control の表示方法変更についてお伝えします。 

Map Types Control とは、表示している地図のタイプ(航空写真など)を切り替えるためのボタンです。
例えばこのように複数の Map Types Control を使用している場合、マップの表示している幅を狭くしていくと...

map-types-control

バージョン3.58以前では、文字が隠れてしまいます。

map-types-control2

バージョン3.58では、幅に合わせて折り返して表示されるようになりました。

map-types-control3

特にスマートフォンなど画面幅が小さいデバイスで、
Map Types Controlで複数のマップタイプを切り替えたい場合に、
Map Types の名称も見やすくなるので、ありがたいアップデートですね。

地図の表示範囲を有効に使いたい場合は、
以下のように style: google.maps.MapTypeControlStyle.DROPDOWN_MENU を設定することで、
ドロップダウン表示をすることもできます。

const mapOptions = {
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    mapTypeIds: ["roadmap", "satellite", "simple", "white", "dark"]
  }
}


const map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
map-types-control4

マップ幅が狭い場合はこの方法で操作性も上がるかと思います。

ゴーガにはGoogle Maps Platformに精通したエンジニアが多く在籍しています。「そもそもMap Typeって何?」や「どうやってMap Typeを追加するの?」など、気になることがありましたらお気軽にご相談ください。

それでは、また次の記事でお会いしましょう!

その他のブログ