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

 

 

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

 

 

バイ!

 

 

 

 

 

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

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

2016.09.20

Google Maps と 360°パノラマ画像の連携

みなさん、こんにちは。

 

Googleマップにあるストリートビューの機能ですが、カスタマイズすれば自分が撮影したパノラ・・・

続きを読む

2016.08.26

国土地理院の地図でストリートビューを見る

みなさん、こんにちは!

前回、Googleマップで無償地図の「OpenStreetMap」を表示する方法を説明しましたが、今回は同じような形で・・・

続きを読む

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

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

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