Google Map APIに動的にテキストを配置する方法を見つけた！！

私たちは、不動産系のサイトや会社の所在地を表示する際などに、よくGoogle Map APIを利用しています。
大体は、赤いピンをたて、必要であれば、コメントを吹き出しに入れる程度です。
しかし、地図上に直接テキストを表示する、となると、案外見つけにくかったので、ここで紹介したいと思います。

弊社で制作を担当している不動産サイトでのことなんですが、日々、物件数の増減をエリアごとに地図上に表示させたいという課題がありました。

簡単にできると思っていたのですが、Googleで検索してみても、なかなか思うような結果が得られません。

やりたいことは、Google Map上にテキストで数字を表示したいだけなんです。

しかし、吹き出しに入れる方法はあっても、地図上に直接テキストを表示する方法は出てきません。

少し可能性を感じた方法では、ピン画像のかわりにテキストを画像化して読み込むという方法でした。

しかし、これでは日々変動する数字を表現するには、テキストの画像化の仕組みの実装とか、1000番くらいまでの画像をつくってサーバーに置いておくなど、あまりスマートな処理方法が思いつきません。

なので、あきらめず、しつこく検索したところ、Dynamic Iconsというキーワードに行き当たりました。

おっ！と思い、その解説サイトを探してみたところ、Googleの英語の解説ページにやっと行き当たったので、腰を据えて読みすすめたところ…。

Dymamic Icons

このDynamic Iconsは、まさに探していた通り、動的にテキストを変更して配置できるアイコンだということが分かりました。

これで行ける！と、さらに読み進めていくと、一つ残念なことがわかりました。

実は、この解説が、Google Map APIではなく、なんとGoogle Charts APIの解説ページだったんです…。

ページのヘッダーをよく見りゃわかることだったんですが、英語ばっかりで、ついつい見逃してしまってました。

惜しい…。あと少しのところまできたのに…と、後ろ髪ひかれつつ、でも、「Dynamic Icons」というキーワードでさらに検索を続けました。

・・・

見つけました。

なんと、このGoogle Charts APIのDynamic IconsをGoogle Map APIで読み込んで使用する方法があったのです！！

以下、その使用方法を簡単に説明します。

--------------------------------------------------------------------------------------

使用方法は、そんなに難しくありません。

マーカーのiconのURLを下記のように指定するだけです。

※様々なアイコンに変更できるので、？以降は、公式サイトを参考にしてください。

http://chart.apis.google.com/chart?chst=d_text_outline& chld=FFCC33|16|h|FF0000|b|Mad+Scientist|Boo

これは、「Mad（半角スペース）Scientist（改行）Boo」という文字が入った緑色のアイコンを地図上に立てることができます。

これをGoogle Map APIで、このURLをマーカーの画像指定のためのURLとして指定することで、動的なテキストを地図上に配置することができました。

--------------------------------------------------------------------------------------

サンプル：

myMarker = new google.maps.Marker({

              position : markCenter,

              clickable : false,

              icon : 'http://chart.apis.google.com/chart?'

                            + 'chst=d_text_outline'

                            + '&chld=000000|' + myFontSize + '|h|ffffff|_|'

                            + ‘オリジナル|テキスト

              });

myMarker.prototype = new google.maps.OverlayView();

myMarker.setMap(myMap);

※myMapはgoogle.maps.Mapのオブジェクト

書式は下記のとおりです。

書式

chst=d_text_outline

chld=<text_fill_color>|<font_size>|<text_alignment>|
<outline_color>|<font_weight>|<text_line_1>|...|<text_line_n>

<text_fill_color>

文字色の指定。6桁の16進数の色で指定します。透過指定はありません。

<font_size>

ピクセルでフォントサイズを指定します。

<text_alignment>

ヘッダーを含む、全ての文字揃えを指定します。下記より選択してください。

• l … 左揃え
• h … 中央揃え
• r … 右揃え

<outline_color>

テキストのアウトラインの色を指定します。6桁の16進数の色で指定します。透過指定はありません。

<font_weight>

ノーマル（_）又はボールド（b）です。

<text_line_1>| ...|<text_line_n>

表示するテキストを記述します。「|」で改行します。「chst=d_fnote_title」では、最初の行がタイトルとして表示されます。

以上です。お役に立てば幸いです！

---

この記事を読んで、私たちに興味を持ったお客様は、気軽にお問い合わせください！

★お問い合わせ