マルティスープ
Staff Blog

2019.02.18

Google マップのコントロールを小さくしたい

みなさん、こんにちは。

最近の Dynamics Maps を利用すると地図を選択するコントロールやズームコントロールが大きくなっていることは、お気づきでしょうか？

これは、JavaScript API の v3.34 （おそらく）より変更された仕様です。理由は、モバイルから利用するユーザーがかなり増えていることから、モバイルのWEBサイトからでもボタンを押し易くするためのようです。ただPCのWEBページで見ても大きいままです。これは私もどうかと思っていたのですが、次回リリース予定の v3.36 よりコントロールの大きさを制御するプロパティが追加されました。

設定方法は下記の通りです。MapOptionに追加された「controlSize」プロパティにピクセルサイズを設定するだけです。簡単ですよね。

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(35.69, 139,75),
    controlSize: 24
});

こちらの機能を現時点で試したいときは、v=3.3６ とバージョンを指定する必要があります。もちろん、v3.36 がリリースバージョンなれば指定する必要はありませんが、おそらく5月位かと思います。

サンプルのページを作成しました。左上のテキストボックスにピクセルサイズを入力し実行すると、地図タイプやズーム等のコントロールが大きくなります。

初めは自力でCSSを使い何とかしようかと思っていたのですが、このプロパティが追加されたことを知り自力でやらなくて良かった！と本当に思いました。

この機能を使えば、モバイルの時は大きく、PCのときは適切なサイズに変更できますよね。

ただ１点注意が必要なのは、ページロード時の地図を生成するタイミングで設定しないと反映しないようです。地図を表示後、変更しようと思ってもできませんでした。

みなさんも是非お試しください！！

バイ！