Googleってやっぱりスゲーなと思うアイコン表示の仕組み｜Googleマイマップ
2017/01/16
GoogleMyMaps（Googleマイマップ）が新しくなり、
地図上に表示するマーカー（ピン）の仕様が変わりました。
旧アイコンも現在(2017/01/13時点)では「以前のアイコンを表示」から、
継続して利用することができるようになっています。
新しいGoogleマイマップを触っていて画像処理にて、
自動的アイコンバリエーションを生成する仕組みが組み込まれているようで、
やっぱりGoogleはすごいなと感じた一件でした。
概要
Googleってやっぱスゲーなと思うアイコン表示の仕組み｜Googleマイマップ
ブログやWebメディアを運営していていつも頭が痛いのが、画像です。
１枚や２枚の画像であればどうにかなる。
しかしそれが、100、1000と増えてくるともう嫌気がさしてくるものです。
そして、一気に枚数が増えてしまうパターンは、
画像のカラーバリエーション違いによる準備です。
基本的には同じ、でも色が違う。
色の数だけ画像を用意するって、すごくナンセンスですよね。
旧Googleマイマップのマーカー画像から見た自動化策
旧Googleマイマップではマーカーを地図に配置した際に、
シェイプと呼ばれる図形（５種類）を選択した場合、
色（３０色）の変更が行えました。
単純に考えてもこれだけで、１５０種類のバリエーションになります。
丁度、以下のようなアイコンです。※以下は「ピン」のみ
さて、このピンの画像ですが、
どこから提供されてどう表示されているかを考えたことはあるでしょうか。
普通はそんなことを考えませんが、
「Google Maps APIで同様のアイコンを利用したい」と思った際には、
どうにかしてこの画像のURLが欲しくなるのです。
URLさえ分かれば、Google Maps APIで指定して表示できますから。
しかし、旧Googleマイマップのピンアイコンは、
実は画像であって、一般的な画像ではありません。
「Data URLスキーム」という仕組みが利用されています。
上記の画像のURLはこのようになっています。
|
1 |
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAADGklEQVRIS7WWXUhTYRjHn3Pc1zke27C2PtWWhqJWmwtTLLYkk4JkERFKRNFNQlTQJ95kF0VKYEUkXYRUaIReyHAXqUSjAu0DnLZQW81ERmilG9vO3NwW72lHDsftzDl6L8/7PL/9n/d53v87DISXAQD0AKCIhs0BwGsAsMRLw+JsNErE2GW5Ig0q9XJRrlomQXHfHP7AK4trwesNe3y+8EMAuMHP5wMVBIENZG2UZt+7oyb2VKyK+Xtv3rnh/CUHPTE57wgEIhUAgJQziwtUSCSY7XBN5prHrXmMIqE151qAi9cmAibzHwdNR8pY6CJQKgHzXr28qqujQJwIxt0vKbfSTmfgiccXrucqNJAk3jc+rBUp5KJkePBjch50FdaA3x+pRg1jFKJza2lS7zpeq0wKxgbfap6C+60/+zye0H4ERCMxO2XXQbLqWCBSWaQbYipGQEPeFmnP0KAmfUXyoknK7A9Bmg6XMkDNjvTut/3F8lSAu/d9dg1Zvcb/A1QpRebvX3RkKgop5SBK17JzGLF90kBOtnRFzOERL+irbXQwGCEZIEWl9Z6rX1fVcGXTioCn6+1BU89sF+0P17EKDQSB934d0YqTHR3OyKgBYGLx6qHhPntmveZ6Q1ZSdXPV8c1hMwA4kjlL5Do1R0fR2RUidXwgUCTeWlxMnuw3F8mWc5gl5Vb/uN3fBACNsewLfVPIZNho26O8tYcOZgoy0f1teeAcp+lIPjcwlmMbSRLvFHIeTiO0AMBc4ngKme/IGysNiqrO9vyY3mg8NkYPDLgXPTAhEJUuFmNOU2fBkmeA04gNXOsXVBjdbCwrpa7yG1R5wDb//qPnNrcRy1HINAiptLwsIrZv++dsnCsWU92SseG3lZDhHadOqGqbb+YwW2iIX3T9Rs/nhXgjEO9dZuONKqWonXUi1kT5nV1uyUwcReG/ek2Fq13uEBypG5vx+cIqoQFNpBDYshGk7en0c+QoKQEBwLg1V/rM5Q6lTc8sIFh3qkDmVYxCElaUMACBMjJwO4Zhc253aKfgBef9txGKvRvdjDsubPJf1ngvEAc21SMAAAAASUVORK5CYII= |
これはpng画像のデータを直接文字列として表現したものです。
その為、ブラウザなどでURLとしてこれを指定すると、
画像のように表示されます。
※上の「Data URL スキーム」リンクをクリックすると分かります。
旧Googleマイマップでは要求したマーカー画像を、
Googleのサーバーが「Data URLスキーム」形式でブラウザに返し、
マイマップ上に表示させていたという事なのです。
推測にはなりますが、
Google側は画像のデータを「.png」などで、
カラーバリエーションの数（３０種）だけ保持するのではなく、
要求に応じて必要な画像をプログラムで生成（色変更）して、
都度、返しているという事です。
これだけでも、管理が楽になるのは容易に想像ができます。
そして、このData URLスキーム形式のデータは、
そのままGoogle Maps APIでも利用することができるから便利すぎます。
以下では、ちゃんとGoogle Maps API上で、
Googleマイマップのマーカーが表示されているのを確認できます。
新Googleマイマップのマーカー画像から見た自動化策
さて、ここまでは旧Googleマイマップについての話でしたが、
現在は新しいGoogleマイマップへ変更になっています。
その為、マーカーの仕様も変更となっています。
しかし、現時点(2017/01/13)では「以前のアイコンを表示」という
リンクをクリックすることで、以前のピン表示などが利用できます。
さてでは新しいマーカーのデザインを見てみましょう。
こちらは今風らしく、洗練されたデザインになっています。
そして、旧Googleマイマップではシェイプ以外は色の変更ができませんでしたが、
新しいGoogleマイマップでは、すべてのアイコンの色が変更できるようになっています。
※カメラのような画像アイコンであっても色変更ができます。
※以下マップのカメラアイコンの「オレンジ色」表示部分。
さて、このアイコン画像で色表示が変更できる仕組みについて、
少し掘り下げてみていきたいと思います。
まず、標準のアイコンであるピンの色を
カラーピッカー右上から２番目の「エンジ色」へ変更した場合、以下の画像が利用されています。
なお、利用可能な色は以下で一覧にしています。
※RGB値をHEX値色指定する際（プログラムなど）の対応も記載しています。
この画像の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は３つのデータとパラメータで構成されているように見えます。
- 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
までの画像を表示してみると・・・影らしき画像が表示されます。
次の画像ファイルと思われるURLを、
前半につなげてみると、ピンのデフォルト画像が表示されます。
https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container_4x.png
最後の画像ファイルと思われるURLを、
前半につなげてみると何も表示されません（不可視画像）
https://mt.google.com/vt/icon/name=icons/onion/1899-blank-shape_pin_4x.png
※不可視（白又は透明？）の為、例示割愛。
そして、最後のパラメータは
「&highlight=ff000000,A52714,ff000000&scale=1.0」のようになっています。
何やら色コード（のようなもの）が３つ付加されているように見えます。
それぞれ以下のような色が指定されています。
※「ff000000」って？という部分はありますが。
真ん中の色が最初に表示したマーカーの色に対応していることが分かります。
マーカーのカラーピッカーで言うところの、
「RGB (165, 39, 20)」が該当します。（一番左上から２番目の色）
ちなみに、末尾の「&scale=1.0」部分は、
元は2.0ですが、ここの値を4.0などにすると表示される画像が大きくなります。
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）のアイコンを要求してみます。
はい。
カラーピッカーにはありえない「ピンク色」の
新Googleマイマップピンの画像が返ってきます。
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
上記処理は以下のように記述しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 |
<script type="text/javascript"> function init(){ var map_div = document.getElementById("gmap_canvas"); var gmap_canvas = new google.maps.Map(map_div,{ center: new google.maps.LatLng(31.97000,134.09500), zoom : 12, mapTypeId : google.maps.MapTypeId.ROADMAP }); var dat = getdata(); for (var d in dat) { var icon_opt = { url: dat[d][2], scaledSize:new google.maps.Size(32, 32) }; var tmp = create_marker({ map: gmap_canvas, position: new google.maps.LatLng(dat[d][0],dat[d][1]), icon: icon_opt, title:dat[d][3] }); } } function create_marker(options){ var m = new google.maps.Marker(options); return m; } function getdata(){ var url_commom = "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,"; var data = [ [32.00000,134.00000,url_commom +"000000,ff000000&scale=2.0","#000000"], [32.00000,134.01000,url_commom +"000033,ff000000&scale=2.0","#000033"], [32.00000,134.02000,url_commom +"000066,ff000000&scale=2.0","#000066"], [32.00000,134.03000,url_commom +"000099,ff000000&scale=2.0","#000099"], [32.00000,134.04000,url_commom +"0000cc,ff000000&scale=2.0","#0000cc"], [32.00000,134.05000,url_commom +"0000ff,ff000000&scale=2.0","#0000ff"], [32.00000,134.06000,url_commom +"330000,ff000000&scale=2.0","#330000"], [32.00000,134.07000,url_commom +"330033,ff000000&scale=2.0","#330033"], [32.00000,134.08000,url_commom +"330066,ff000000&scale=2.0","#330066"], [32.00000,134.09000,url_commom +"330099,ff000000&scale=2.0","#330099"], [32.00000,134.10000,url_commom +"3300cc,ff000000&scale=2.0","#3300cc"], [32.00000,134.11000,url_commom +"3300ff,ff000000&scale=2.0","#3300ff"], [32.00000,134.12000,url_commom +"660000,ff000000&scale=2.0","#660000"], [32.00000,134.13000,url_commom +"660033,ff000000&scale=2.0","#660033"], [32.00000,134.14000,url_commom +"660066,ff000000&scale=2.0","#660066"], [32.00000,134.15000,url_commom +"660099,ff000000&scale=2.0","#660099"], [32.00000,134.16000,url_commom +"6600cc,ff000000&scale=2.0","#6600cc"], [32.00000,134.17000,url_commom +"6600ff,ff000000&scale=2.0","#6600ff"], [32.00000,134.18000,url_commom +"990000,ff000000&scale=2.0","#990000"], [32.00000,134.19000,url_commom +"990033,ff000000&scale=2.0","#990033"], [31.99000,134.00000,url_commom +"990066,ff000000&scale=2.0","#990066"], [31.99000,134.01000,url_commom +"990099,ff000000&scale=2.0","#990099"], [31.99000,134.02000,url_commom +"9900cc,ff000000&scale=2.0","#9900cc"], [31.99000,134.03000,url_commom +"9900ff,ff000000&scale=2.0","#9900ff"], [31.99000,134.04000,url_commom +"cc0000,ff000000&scale=2.0","#cc0000"], [31.99000,134.05000,url_commom +"cc0033,ff000000&scale=2.0","#cc0033"], [31.99000,134.06000,url_commom +"cc0066,ff000000&scale=2.0","#cc0066"], [31.99000,134.07000,url_commom +"cc0099,ff000000&scale=2.0","#cc0099"], [31.99000,134.08000,url_commom +"cc00cc,ff000000&scale=2.0","#cc00cc"], [31.99000,134.09000,url_commom +"cc00ff,ff000000&scale=2.0","#cc00ff"], [31.99000,134.10000,url_commom +"ff0000,ff000000&scale=2.0","#ff0000"], [31.99000,134.11000,url_commom +"ff0033,ff000000&scale=2.0","#ff0033"], [31.99000,134.12000,url_commom +"ff0066,ff000000&scale=2.0","#ff0066"], [31.99000,134.13000,url_commom +"ff0099,ff000000&scale=2.0","#ff0099"], [31.99000,134.14000,url_commom +"ff00cc,ff000000&scale=2.0","#ff00cc"], [31.99000,134.15000,url_commom +"ff00ff,ff000000&scale=2.0","#ff00ff"], [31.99000,134.16000,url_commom +"003300,ff000000&scale=2.0","#003300"], [31.99000,134.17000,url_commom +"003333,ff000000&scale=2.0","#003333"], [31.99000,134.18000,url_commom +"003366,ff000000&scale=2.0","#003366"], [31.99000,134.19000,url_commom +"003399,ff000000&scale=2.0","#003399"], [31.98000,134.00000,url_commom +"0033cc,ff000000&scale=2.0","#0033cc"], [31.98000,134.01000,url_commom +"0033ff,ff000000&scale=2.0","#0033ff"], [31.98000,134.02000,url_commom +"333300,ff000000&scale=2.0","#333300"], [31.98000,134.03000,url_commom +"333333,ff000000&scale=2.0","#333333"], [31.98000,134.04000,url_commom +"333366,ff000000&scale=2.0","#333366"], [31.98000,134.05000,url_commom +"333399,ff000000&scale=2.0","#333399"], [31.98000,134.06000,url_commom +"3333cc,ff000000&scale=2.0","#3333cc"], [31.98000,134.07000,url_commom +"3333ff,ff000000&scale=2.0","#3333ff"], [31.98000,134.08000,url_commom +"663300,ff000000&scale=2.0","#663300"], [31.98000,134.09000,url_commom +"663333,ff000000&scale=2.0","#663333"], [31.98000,134.10000,url_commom +"663366,ff000000&scale=2.0","#663366"], [31.98000,134.11000,url_commom +"663399,ff000000&scale=2.0","#663399"], [31.98000,134.12000,url_commom +"6633cc,ff000000&scale=2.0","#6633cc"], [31.98000,134.13000,url_commom +"6633ff,ff000000&scale=2.0","#6633ff"], [31.98000,134.14000,url_commom +"993300,ff000000&scale=2.0","#993300"], [31.98000,134.15000,url_commom +"993333,ff000000&scale=2.0","#993333"], [31.98000,134.16000,url_commom +"993366,ff000000&scale=2.0","#993366"], [31.98000,134.17000,url_commom +"993399,ff000000&scale=2.0","#993399"], [31.98000,134.18000,url_commom +"9933cc,ff000000&scale=2.0","#9933cc"], [31.98000,134.19000,url_commom +"9933ff,ff000000&scale=2.0","#9933ff"], [31.97000,134.00000,url_commom +"cc3300,ff000000&scale=2.0","#cc3300"], [31.97000,134.01000,url_commom +"cc3333,ff000000&scale=2.0","#cc3333"], [31.97000,134.02000,url_commom +"cc3366,ff000000&scale=2.0","#cc3366"], [31.97000,134.03000,url_commom +"cc3399,ff000000&scale=2.0","#cc3399"], [31.97000,134.04000,url_commom +"cc33cc,ff000000&scale=2.0","#cc33cc"], [31.97000,134.05000,url_commom +"cc33ff,ff000000&scale=2.0","#cc33ff"], [31.97000,134.06000,url_commom +"ff3300,ff000000&scale=2.0","#ff3300"], [31.97000,134.07000,url_commom +"ff3333,ff000000&scale=2.0","#ff3333"], [31.97000,134.08000,url_commom +"ff3366,ff000000&scale=2.0","#ff3366"], [31.97000,134.09000,url_commom +"ff3399,ff000000&scale=2.0","#ff3399"], [31.97000,134.10000,url_commom +"ff33cc,ff000000&scale=2.0","#ff33cc"], [31.97000,134.11000,url_commom +"ff33ff,ff000000&scale=2.0","#ff33ff"], [31.97000,134.12000,url_commom +"006600,ff000000&scale=2.0","#006600"], [31.97000,134.13000,url_commom +"006633,ff000000&scale=2.0","#006633"], [31.97000,134.14000,url_commom +"006666,ff000000&scale=2.0","#006666"], [31.97000,134.15000,url_commom +"006699,ff000000&scale=2.0","#006699"], [31.97000,134.16000,url_commom +"0066cc,ff000000&scale=2.0","#0066cc"], [31.97000,134.17000,url_commom +"0066ff,ff000000&scale=2.0","#0066ff"], [31.97000,134.18000,url_commom +"336600,ff000000&scale=2.0","#336600"], [31.97000,134.19000,url_commom +"336633,ff000000&scale=2.0","#336633"], [31.96000,134.00000,url_commom +"336666,ff000000&scale=2.0","#336666"], [31.96000,134.01000,url_commom +"336699,ff000000&scale=2.0","#336699"], [31.96000,134.02000,url_commom +"3366cc,ff000000&scale=2.0","#3366cc"], [31.96000,134.03000,url_commom +"3366ff,ff000000&scale=2.0","#3366ff"], [31.96000,134.04000,url_commom +"666600,ff000000&scale=2.0","#666600"], [31.96000,134.05000,url_commom +"666633,ff000000&scale=2.0","#666633"], [31.96000,134.06000,url_commom +"666666,ff000000&scale=2.0","#666666"], [31.96000,134.07000,url_commom +"666699,ff000000&scale=2.0","#666699"], [31.96000,134.08000,url_commom +"6666cc,ff000000&scale=2.0","#6666cc"], [31.96000,134.09000,url_commom +"6666ff,ff000000&scale=2.0","#6666ff"], [31.96000,134.10000,url_commom +"996600,ff000000&scale=2.0","#996600"], [31.96000,134.11000,url_commom +"996633,ff000000&scale=2.0","#996633"], [31.96000,134.12000,url_commom +"996666,ff000000&scale=2.0","#996666"], [31.96000,134.13000,url_commom +"996699,ff000000&scale=2.0","#996699"], [31.96000,134.14000,url_commom +"9966cc,ff000000&scale=2.0","#9966cc"], [31.96000,134.15000,url_commom +"9966ff,ff000000&scale=2.0","#9966ff"], [31.96000,134.16000,url_commom +"cc6600,ff000000&scale=2.0","#cc6600"], [31.96000,134.17000,url_commom +"cc6633,ff000000&scale=2.0","#cc6633"], [31.96000,134.18000,url_commom +"cc6666,ff000000&scale=2.0","#cc6666"], [31.96000,134.19000,url_commom +"cc6699,ff000000&scale=2.0","#cc6699"], [31.95000,134.00000,url_commom +"cc66cc,ff000000&scale=2.0","#cc66cc"], [31.95000,134.01000,url_commom +"cc66ff,ff000000&scale=2.0","#cc66ff"], [31.95000,134.02000,url_commom +"ff6600,ff000000&scale=2.0","#ff6600"], [31.95000,134.03000,url_commom +"ff6633,ff000000&scale=2.0","#ff6633"], [31.95000,134.04000,url_commom +"ff6666,ff000000&scale=2.0","#ff6666"], [31.95000,134.05000,url_commom +"ff6699,ff000000&scale=2.0","#ff6699"], [31.95000,134.06000,url_commom +"ff66cc,ff000000&scale=2.0","#ff66cc"], [31.95000,134.07000,url_commom +"ff66ff,ff000000&scale=2.0","#ff66ff"], [31.95000,134.08000,url_commom +"009900,ff000000&scale=2.0","#009900"], [31.95000,134.09000,url_commom +"009933,ff000000&scale=2.0","#009933"], [31.95000,134.10000,url_commom +"009966,ff000000&scale=2.0","#009966"], [31.95000,134.11000,url_commom +"009999,ff000000&scale=2.0","#009999"], [31.95000,134.12000,url_commom +"0099cc,ff000000&scale=2.0","#0099cc"], [31.95000,134.13000,url_commom +"0099ff,ff000000&scale=2.0","#0099ff"], [31.95000,134.14000,url_commom +"339900,ff000000&scale=2.0","#339900"], [31.95000,134.15000,url_commom +"339933,ff000000&scale=2.0","#339933"], [31.95000,134.16000,url_commom +"339966,ff000000&scale=2.0","#339966"], [31.95000,134.17000,url_commom +"339999,ff000000&scale=2.0","#339999"], [31.95000,134.18000,url_commom +"3399cc,ff000000&scale=2.0","#3399cc"], [31.95000,134.19000,url_commom +"3399ff,ff000000&scale=2.0","#3399ff"], [31.94000,134.00000,url_commom +"669900,ff000000&scale=2.0","#669900"], [31.94000,134.00000,url_commom +"669933,ff000000&scale=2.0","#669933"], [31.94000,134.01000,url_commom +"669966,ff000000&scale=2.0","#669966"], [31.94000,134.02000,url_commom +"669999,ff000000&scale=2.0","#669999"], [31.94000,134.03000,url_commom +"6699cc,ff000000&scale=2.0","#6699cc"], [31.94000,134.04000,url_commom +"6699ff,ff000000&scale=2.0","#6699ff"], [31.94000,134.05000,url_commom +"999900,ff000000&scale=2.0","#999900"], [31.94000,134.06000,url_commom +"999933,ff000000&scale=2.0","#999933"], [31.94000,134.07000,url_commom +"999966,ff000000&scale=2.0","#999966"], [31.94000,134.08000,url_commom +"999999,ff000000&scale=2.0","#999999"], [31.94000,134.09000,url_commom +"9999cc,ff000000&scale=2.0","#9999cc"], [31.94000,134.10000,url_commom +"9999ff,ff000000&scale=2.0","#9999ff"], [31.94000,134.11000,url_commom +"cc9900,ff000000&scale=2.0","#cc9900"], [31.94000,134.12000,url_commom +"cc9933,ff000000&scale=2.0","#cc9933"], [31.94000,134.13000,url_commom +"cc9966,ff000000&scale=2.0","#cc9966"], [31.94000,134.14000,url_commom +"cc9999,ff000000&scale=2.0","#cc9999"], [31.94000,134.15000,url_commom +"cc99cc,ff000000&scale=2.0","#cc99cc"], [31.94000,134.16000,url_commom +"cc99ff,ff000000&scale=2.0","#cc99ff"], [31.94000,134.17000,url_commom +"ff9900,ff000000&scale=2.0","#ff9900"], [31.94000,134.18000,url_commom +"ff9933,ff000000&scale=2.0","#ff9933"], [31.94000,134.19000,url_commom +"ff9966,ff000000&scale=2.0","#ff9966"], [31.93000,134.00000,url_commom +"ff9999,ff000000&scale=2.0","#ff9999"], [31.93000,134.01000,url_commom +"ff99cc,ff000000&scale=2.0","#ff99cc"], [31.93000,134.02000,url_commom +"ff99ff,ff000000&scale=2.0","#ff99ff"], [31.93000,134.03000,url_commom +"00cc00,ff000000&scale=2.0","#00cc00"], [31.93000,134.04000,url_commom +"00cc33,ff000000&scale=2.0","#00cc33"], [31.93000,134.05000,url_commom +"00cc66,ff000000&scale=2.0","#00cc66"], [31.93000,134.06000,url_commom +"00cc99,ff000000&scale=2.0","#00cc99"], [31.93000,134.07000,url_commom +"00cccc,ff000000&scale=2.0","#00cccc"], [31.93000,134.08000,url_commom +"00ccff,ff000000&scale=2.0","#00ccff"], [31.93000,134.09000,url_commom +"33cc00,ff000000&scale=2.0","#33cc00"], [31.93000,134.10000,url_commom +"33cc33,ff000000&scale=2.0","#33cc33"], [31.93000,134.11000,url_commom +"33cc66,ff000000&scale=2.0","#33cc66"], [31.93000,134.12000,url_commom +"33cc99,ff000000&scale=2.0","#33cc99"], [31.93000,134.13000,url_commom +"33cccc,ff000000&scale=2.0","#33cccc"], [31.93000,134.14000,url_commom +"33ccff,ff000000&scale=2.0","#33ccff"], [31.93000,134.15000,url_commom +"66cc00,ff000000&scale=2.0","#66cc00"], [31.93000,134.16000,url_commom +"66cc33,ff000000&scale=2.0","#66cc33"], [31.93000,134.17000,url_commom +"66cc66,ff000000&scale=2.0","#66cc66"], [31.93000,134.18000,url_commom +"66cc99,ff000000&scale=2.0","#66cc99"], [31.93000,134.19000,url_commom +"66cccc,ff000000&scale=2.0","#66cccc"], [31.92000,134.00000,url_commom +"66ccff,ff000000&scale=2.0","#66ccff"], [31.92000,134.01000,url_commom +"99cc00,ff000000&scale=2.0","#99cc00"], [31.92000,134.02000,url_commom +"99cc33,ff000000&scale=2.0","#99cc33"], [31.92000,134.03000,url_commom +"99cc66,ff000000&scale=2.0","#99cc66"], [31.92000,134.04000,url_commom +"99cc99,ff000000&scale=2.0","#99cc99"], [31.92000,134.05000,url_commom +"99cccc,ff000000&scale=2.0","#99cccc"], [31.92000,134.06000,url_commom +"99ccff,ff000000&scale=2.0","#99ccff"], [31.92000,134.07000,url_commom +"cccc00,ff000000&scale=2.0","#cccc00"], [31.92000,134.08000,url_commom +"cccc33,ff000000&scale=2.0","#cccc33"], [31.92000,134.09000,url_commom +"cccc66,ff000000&scale=2.0","#cccc66"], [31.92000,134.10000,url_commom +"cccc99,ff000000&scale=2.0","#cccc99"], [31.92000,134.11000,url_commom +"cccccc,ff000000&scale=2.0","#cccccc"], [31.92000,134.12000,url_commom +"ccccff,ff000000&scale=2.0","#ccccff"], [31.92000,134.13000,url_commom +"ffcc00,ff000000&scale=2.0","#ffcc00"], [31.92000,134.14000,url_commom +"ffcc33,ff000000&scale=2.0","#ffcc33"], [31.92000,134.15000,url_commom +"ffcc66,ff000000&scale=2.0","#ffcc66"], [31.92000,134.16000,url_commom +"ffcc99,ff000000&scale=2.0","#ffcc99"], [31.92000,134.17000,url_commom +"ffcccc,ff000000&scale=2.0","#ffcccc"], [31.92000,134.18000,url_commom +"ffccff,ff000000&scale=2.0","#ffccff"], [31.92000,134.19000,url_commom +"00ff00,ff000000&scale=2.0","#00ff00"], [31.91000,134.00000,url_commom +"00ff33,ff000000&scale=2.0","#00ff33"], [31.91000,134.01000,url_commom +"00ff66,ff000000&scale=2.0","#00ff66"], [31.91000,134.02000,url_commom +"00ff99,ff000000&scale=2.0","#00ff99"], [31.91000,134.03000,url_commom +"00ffcc,ff000000&scale=2.0","#00ffcc"], [31.91000,134.04000,url_commom +"00ffff,ff000000&scale=2.0","#00ffff"], [31.91000,134.05000,url_commom +"33ff00,ff000000&scale=2.0","#33ff00"], [31.91000,134.06000,url_commom +"33ff33,ff000000&scale=2.0","#33ff33"], [31.91000,134.07000,url_commom +"33ff66,ff000000&scale=2.0","#33ff66"], [31.91000,134.08000,url_commom +"33ff99,ff000000&scale=2.0","#33ff99"], [31.91000,134.09000,url_commom +"33ffcc,ff000000&scale=2.0","#33ffcc"], [31.91000,134.10000,url_commom +"33ffff,ff000000&scale=2.0","#33ffff"], [31.91000,134.11000,url_commom +"66ff00,ff000000&scale=2.0","#66ff00"], [31.91000,134.12000,url_commom +"66ff33,ff000000&scale=2.0","#66ff33"], [31.91000,134.13000,url_commom +"66ff66,ff000000&scale=2.0","#66ff66"], [31.91000,134.14000,url_commom +"66ff99,ff000000&scale=2.0","#66ff99"], [31.91000,134.15000,url_commom +"66ffcc,ff000000&scale=2.0","#66ffcc"], [31.91000,134.16000,url_commom +"66ffff,ff000000&scale=2.0","#66ffff"], [31.91000,134.17000,url_commom +"99ff00,ff000000&scale=2.0","#99ff00"], [31.91000,134.18000,url_commom +"99ff33,ff000000&scale=2.0","#99ff33"], [31.91000,134.19000,url_commom +"99ff66,ff000000&scale=2.0","#99ff66"], [31.90000,134.00000,url_commom +"99ff99,ff000000&scale=2.0","#99ff99"], [31.90000,134.01000,url_commom +"99ffcc,ff000000&scale=2.0","#99ffcc"], [31.90000,134.02000,url_commom +"99ffff,ff000000&scale=2.0","#99ffff"], [31.90000,134.03000,url_commom +"ccff00,ff000000&scale=2.0","#ccff00"], [31.90000,134.04000,url_commom +"ccff33,ff000000&scale=2.0","#ccff33"], [31.90000,134.05000,url_commom +"ccff66,ff000000&scale=2.0","#ccff66"], [31.90000,134.06000,url_commom +"ccff99,ff000000&scale=2.0","#ccff99"], [31.90000,134.07000,url_commom +"ccffcc,ff000000&scale=2.0","#ccffcc"], [31.90000,134.08000,url_commom +"ccffff,ff000000&scale=2.0","#ccffff"], [31.90000,134.09000,url_commom +"ffff00,ff000000&scale=2.0","#ffff00"], [31.90000,134.10000,url_commom +"ffff33,ff000000&scale=2.0","#ffff33"], [31.90000,134.11000,url_commom +"ffff66,ff000000&scale=2.0","#ffff66"], [31.90000,134.12000,url_commom +"ffff99,ff000000&scale=2.0","#ffff99"], [31.90000,134.13000,url_commom +"ffffcc,ff000000&scale=2.0","#ffffcc"], [31.90000,134.14000,url_commom +"ffffff,ff000000&scale=2.0","#ffffff"] ]; return data; } google.maps.event.addDomListener(window,"load",init); $('#ver').text(google.maps.version); </script> |
画像の保存も実は可能
URLを指定して直接表示したマーカーの画像は、
ブラウザの「名前を付けて画像を保存」にて保存することはできます。
※本投稿に表示されている新マーカー画像を保存すると確かめられます。
ただし、ファイル名の拡張子を含まない形でデータが送信されてくるようで、
そのままではファイル形式が「０ファイル(.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
当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。
当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。
コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook
運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。
関連記事
-
-
誰かが作成した有益なGoogleマイマップを検索する方法
どこかで誰かが作成してくれたGoogleMyMaps（Googleマイマップ） …
-
-
function(){…}の無名関数ってなんか苦手という場合のコツ｜setInterval/setTimeout
JavaScript関連のサンプルなどを見ているとよく出会う無名関数記述。 サン …