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

 

 

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

 

 

バイ!

 

 

 

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2019.04.07

Static Maps に自前でマーカーとラベルを描く

みなさん、こんにちは。

静的な地図画像を取得するには、Maps Static API を利用しますよね。

その際、地図上に好きなマ・・・

続きを読む

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2017.01.06

マラソン大会の難易度を高度から判断してみる

みなさん、あけましておめでとうございます!

2017年も本ブログでは、グーグルマップをはじめ地図や位置情報に関するおもしろい情報を発信して・・・

続きを読む

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