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

Googleってやっぱりスゲーなと思うアイコン表示の仕組み|Googleマイマップ

      2017/01/16

GoogleMyMaps(Googleマイマップ)が新しくなり、
地図上に表示するマーカー(ピン)の仕様が変わりました。
旧アイコンも現在(2017/01/13時点)では「以前のアイコンを表示」から、
継続して利用することができるようになっています。
新しいGoogleマイマップを触っていて画像処理にて、
自動的アイコンバリエーションを生成する仕組みが組み込まれているようで、
やっぱりGoogleはすごいなと感じた一件でした。

Googleってやっぱスゲーなと思うアイコン表示の仕組み|Googleマイマップ

ブログやWebメディアを運営していていつも頭が痛いのが、画像です。

1枚や2枚の画像であればどうにかなる。
しかしそれが、100、1000と増えてくるともう嫌気がさしてくるものです。

そして、一気に枚数が増えてしまうパターンは、
画像のカラーバリエーション違いによる準備です。

基本的には同じ、でも色が違う。

色の数だけ画像を用意するって、すごくナンセンスですよね。

旧Googleマイマップのマーカー画像から見た自動化策

旧Googleマイマップではマーカーを地図に配置した際に、
シェイプと呼ばれる図形(5種類)を選択した場合、
色(30色)の変更が行えました。

単純に考えてもこれだけで、150種類のバリエーションになります。

丁度、以下のようなアイコンです。※以下は「ピン」のみ

 

さて、このピンの画像ですが、
どこから提供されてどう表示されているかを考えたことはあるでしょうか。

普通はそんなことを考えませんが、
「Google Maps APIで同様のアイコンを利用したい」と思った際には、
どうにかしてこの画像のURLが欲しくなるのです。

URLさえ分かれば、Google Maps APIで指定して表示できますから。

しかし、旧Googleマイマップのピンアイコンは、
実は画像であって、一般的な画像ではありません。

「Data URLスキーム」という仕組みが利用されています。

pin

Data URL スキーム

上記の画像のURLはこのようになっています。

 

これはpng画像のデータを直接文字列として表現したものです。
その為、ブラウザなどでURLとしてこれを指定すると、
画像のように表示されます。
※上の「Data URL スキーム」リンクをクリックすると分かります。

 

旧Googleマイマップでは要求したマーカー画像を、
Googleのサーバーが「Data URLスキーム」形式でブラウザに返し、
マイマップ上に表示させていたという事なのです。

推測にはなりますが、

Google側は画像のデータを「.png」などで、
カラーバリエーションの数(30種)だけ保持するのではなく、
要求に応じて必要な画像をプログラムで生成(色変更)して、
都度、返しているという事です。

これだけでも、管理が楽になるのは容易に想像ができます。

そして、このData URLスキーム形式のデータは、
そのままGoogle Maps APIでも利用することができるから便利すぎます。

以下では、ちゃんとGoogle Maps API上で、
Googleマイマップのマーカーが表示されているのを確認できます。

 

新Googleマイマップのマーカー画像から見た自動化策

さて、ここまでは旧Googleマイマップについての話でしたが、
現在は新しいGoogleマイマップへ変更になっています。

その為、マーカーの仕様も変更となっています。

しかし、現時点(2017/01/13)では「以前のアイコンを表示」という
リンクをクリックすることで、以前のピン表示などが利用できます。

 

さてでは新しいマーカーのデザインを見てみましょう。
こちらは今風らしく、洗練されたデザインになっています。

そして、旧Googleマイマップではシェイプ以外は色の変更ができませんでしたが、
新しいGoogleマイマップでは、すべてのアイコンの色が変更できるようになっています。
※カメラのような画像アイコンであっても色変更ができます。
※以下マップのカメラアイコンの「オレンジ色」表示部分。

 

さて、このアイコン画像で色表示が変更できる仕組みについて、
少し掘り下げてみていきたいと思います。

まず、標準のアイコンであるピンの色を
カラーピッカー右上から2番目の「エンジ色」へ変更した場合、以下の画像が利用されています。

なお、利用可能な色は以下で一覧にしています。
※RGB値をHEX値色指定する際(プログラムなど)の対応も記載しています。

newpin_first

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

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,A52714,ff000000&scale=1.0

※赤文字部1.0は、
元のURL(Googleマイマップ上)で記載の「2.0」を便宜上変更(表示サイズ調整)

 

私は中の人ではないので、詳しい事は分からないのですが、
このURLは3つのデータとパラメータで構成されているように見えます。

  • https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,
  • icons/onion/SHARED-mymaps-pin-container_4x.png,
  • icons/onion/1899-blank-shape_pin_4x.png
  • &highlight=ff000000,A52714,ff000000&scale=2.0(パラメータ部)

 

最初の

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png

 

までの画像を表示してみると・・・影らしき画像が表示されます。

newpin_shadow

次の画像ファイルと思われるURLを、
前半につなげてみると、ピンのデフォルト画像が表示されます。

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container_4x.png

newpin_bg

 

最後の画像ファイルと思われるURLを、
前半につなげてみると何も表示されません(不可視画像)

https://mt.google.com/vt/icon/name=icons/onion/1899-blank-shape_pin_4x.png

※不可視(白又は透明?)の為、例示割愛。

 

そして、最後のパラメータは
&highlight=ff000000,A52714,ff000000&scale=1.0」のようになっています。

 

何やら色コード(のようなもの)が3つ付加されているように見えます。
それぞれ以下のような色が指定されています。
※「ff000000」って?という部分はありますが。

#ff000000
#A52714
#ff000000

 

真ん中の色が最初に表示したマーカーの色に対応していることが分かります。

マーカーのカラーピッカーで言うところの、
「RGB (165, 39, 20)」が該当します。(一番左上から2番目の色)

#a52714 RGB (165, 39, 20)

 

ちなみに、末尾の「&scale=1.0」部分は、
元は2.0ですが、ここの値を4.0などにすると表示される画像が大きくなります。

newpin_4x

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,A52714,ff000000&scale=4.0

 

ちょっとした事ですが、詳しい事が分からなくても、
Google側が与えられたURLに基づいて、
どのような画像を返すのかを判断し、自動生成した画像を表示していると見えます。

試しに、
カラーピッカーには存在しない色(#ff00ff)のアイコンを要求してみます。

#ff00ff

 

はい。

カラーピッカーにはありえない「ピンク色」の
新Googleマイマップピンの画像が返ってきます。

newpin_custom

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,ff00ff,ff000000&scale=2.0

このようにして、
直接画像としてGoogle側が保持しているのではないピンデータを、
「デフォルトピン画像」などのURLと共に色指定すると、

指定した色味に変換された画像を返してくるAPIが、
このURLの先には居るという事が推測できます。

この方法を活用すると以下のような実装が可能になります。

 

Google Maps API 上でGoogleマイマップ(新)アイコンの表示

やっとたどり着きました。

方法はもう画像がURL形式で要求する形ですので、
Google Maps APIになれている方は既にお察しは付くことと思います。

GoogleマイマップのWebセーフ216色表示です。
こういう処理はやっぱりGoogleMapsAPIならでは。

 

JavaScript

上記処理は以下のように記述しています。

 

画像の保存も実は可能

URLを指定して直接表示したマーカーの画像は、
ブラウザの「名前を付けて画像を保存」にて保存することはできます。
※本投稿に表示されている新マーカー画像を保存すると確かめられます。

ただし、ファイル名の拡張子を含まない形でデータが送信されてくるようで、
そのままではファイル形式が「0ファイル(.0)」と表示されます。

またファイル名も「1899-blank-shape_pin_4x.png&highlight=ff000000,A52714,ff000000&scale=2.0」のように表示されます。

正しく、何かしらのファイル名を与え、
拡張子「.png」と入力し保存すれば、画像ファイルとして認識されます。

いちいちローカルに保存するのは本気で面倒だと思いますけども。。。

 

後で読みたい

当初、200マーカー種別を追加したところでエラーとなってしまいましたが、
これが仕様なのか私の記述に問題があるのかはわかりません。
※記述方法を変更したら、実現できたので記述に問題があった模様。
現在は216色も問題なく表示できています。

ただ、多くのマーカー(同一種類)を配置した際の挙動で、
表示されなくなったと言うような例は、Web上でもいくつかは見られます。

以下は、直接的には関係ありませんが、
描画の方法を検討しなおしてみるのもいいのかなと思ったりし、
後から、しっかり検証したい内容だなと思い、残します。

Google Maps に大量のマーカを表示する · GitHub

 

2017/01/16追記
パフォーマンス云々の問題はありますが、
GoogleMapsAPI単体で見た場合、
マーカーの表示個数に依存するようなことは現実的にはあまりなさそうです。

1000個程度のマーカーなら特に問題なく表示することはできます。
以下で実装済み。
※以下は、19アイコンx30色=570パターン表示

 

参考

Google Maps JavaScript API V3 Reference  |  Google Maps JavaScript API  |  Google Developers


 - 小技

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

  関連記事

eye_gmap
誰かが作成した有益なGoogleマイマップを検索する方法

どこかで誰かが作成してくれたGoogleMyMaps(Googleマイマップ) …

eye_gmap
function(){…}の無名関数ってなんか苦手という場合のコツ|setInterval/setTimeout

JavaScript関連のサンプルなどを見ているとよく出会う無名関数記述。 サン …