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

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

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

特にスマートフォンなど画面幅が小さいデバイスで、
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を追加するの？」など、気になることがありましたらお気軽にご相談ください。

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