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

[ブログ | 株式会社ゴーガ ](https://www.goga.co.jp/blog)

# [小さい画面での Map Types Control の表示方法が改善](https://www.goga.co.jp/blog/google-maps-platform-map-types-control.html)

 作成者: [goga](https://www.goga.co.jp/blog/author/goga)｜Aug 30, 2024 1:00:00 AM

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

本日は、[Maps JavaScript API バージョン3.58.1a](https://developers.google.com/maps/documentation/javascript/releases#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を追加するの？」など、気になることがありましたらお気軽にご相談ください。

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

[完全な記事を表示](https://www.goga.co.jp/blog/google-maps-platform-map-types-control.html)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "goga"
  },
  "dateModified" : "2025-08-14T07:12:05.604Z",
  "datePublished" : "2024-08-30T01:00:00Z",
  "headline" : "小さい画面での Map Types Control の表示方法が改善",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://www.goga.co.jp/blog/google-maps-platform-map-types-control.html",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "ブログ"
  }
}
```