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

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

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

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

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

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

特にスマートフォンなど画面幅が小さいデバイスで、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)

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

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

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