MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2019.02.18

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

control_size

みなさん、こんにちは。

最近の 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.36 とバージョンを指定する必要があります。もちろん、v3.36 がリリースバージョンなれば指定する必要はありませんが、おそらく5月位かと思います。

<script src=”https://maps.google.com/maps/api/js?v=3.36&key=xxxxxxxxx”></script>

 

 

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

コントロールサイズ

 

 

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

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

 

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

 

 

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

 

 

バイ!

 

 

 

 

 

【関連記事】こんな記事も読まれています

2018.04.26

Googleマップでマーカーの回転

みなさん、こんにちは。

Google マップでマーカーを描画するとき、回転したいなと思うことはありませんか?

例えば、車の走行履歴・・・

続きを読む

2017.09.24

Googleマップ上にベクトルタイルを描画してみる

みなさん、こんにちは。

前回のブログで紹介したベクトルタイルを 、Google マップ上に描画する方法を調査してみました。

続きを読む

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描・・・

続きを読む

 - Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)