Google Maps API・マイマップの使い方・活用法をご紹介しています。

続き番号(自動スタイル)の連番マーカー表示URL構文

Google マイマップのマーカースタイルの
「続き番号(自動スタイル)」ではマーカーの個数に応じて自動的に、
マーカーに番号が採番(レイヤ単位)されて表示されます。
Googleマップ側がマーカー画像をどのようなURLで要求し、
表示しているのかという点について、URLの構文でご紹介します。

続き番号(自動スタイル)の連番マーカー表示URL構文

まず初めに新しいGoogleマップでマーカーの表示を行っている仕組みとして、
要求するマーカー画像のURLに各種パラメータを付加したURLへアクセスすることで、
Googleのサーバーが要求に合った画像を返す(内部的にはpng形式)仕組みです。

そうした仕組みを利用すると、
シェイプ形状マーカーの各色画像のURLを求めることも容易になります。
詳細は以下をご確認ください。

こうした仕組みについては以下で、細かく解説しています。

 

上記をご一読いただいたものとして話を進めさせていただきます。
続き番号スタイルのURL構造をでは1桁番号「9」から見ていきます。

要求する画像のURLは以下のようになっています。

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

実際に表示してみると以下の通り「9」が表示されます。

通し番号スタイル9

 

ここで重要な点はURLの後半の以下の部分です。

&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

 

個々に見ていきます。

色指定構文

&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

上記の部分「0288D1」の値は、色のHEXコードです。
「#0288D1」を指定しています。ちなみにRGB指定ではrgb(2, 136, 209)です。
これがマーカーの背景色と一致しているのが分かります。

#0288d1 RGB (2, 136, 209)

ただし、基本的にGoogleマイマップの画面からは、
通し番号スタイルの「背景色変更」は行う事ができません。

要求画像サイズ指定構文

&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

次に「scale=2.0」部分ですが、これは要求する画像のサイズで、
Googleマイマップでは通常この2.0の値で要求し、32pxに縮小表示しています。

なお、この値を「scale=4.0」などに指定すると、
倍の大きさの画像が返されます。

通し番号スタイル9_4x

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

文字色指定構文

&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

次の部分ですが「ffffffff」となっています。(HEXより桁が多い)
一見すると色コードで白を表現していると見受けられます。

この点からも文字色であろうという事が推測できます。

試しに異なった色コードで要求してみます。

「ff」+「ffd600(HEXコード)」で記述します。

#ffd600 RGB (255, 214, 0)

通し番号スタイル9_色変更

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=0288D1,ff000000&scale=2.0&color=ffffd600&psize=15&text=9&font=fonts/Roboto-Medium.ttf

ただし、基本的にGoogleマイマップの画面からは、
通し番号スタイルの「文字色変更」は行う事ができません。

 

文字サイズ指定構文

&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

では次に「psize=15」の部分ですが、
この部分は表示する桁数に応じて自動的に値が変更されている部分です。

文字のpxサイズを指定しています。

ちなみに以下のようになっています。

  • 1,2桁:15px
  • 3桁:12px
  • 4桁:10px
  • 5桁以降:(未検証)

 

文字指定構文

&highlight=0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=9&font=fonts/Roboto-Medium.ttf

そして最後の部分が表示する文字(数字)の指定部分です。
「text=9」で数字の「9」をマーカーアイコンに表示しています。

 

このような仕組みでGoogleマイマップがマーカー画像を生成していることから、
以下のような画像URLにてそれぞれのマーカーを、
GoogleMapsAPI側でのマーカー表示を行えることが分かります。

 

続き番号(自動スタイル)の連番マーカー画像URLの例(抜粋)

以下は、一部参考とさせて頂きますが、
ルールに従う事で、求めるマーカー画像をGoogleサーバーから得ることができます。

 

お役に立ちますと幸いです。


公開日:
最終更新日:2017/01/21

コンテンツ
すべて展開 | すべて省略