Yahoo!地図APIでマーカーをクリックすると吹きだしを出す方法

YOLPのマーカーをクリックして吹きだし表示

Google Maps APIを使っている人にとっては、今回のタイトルは「はい？」と感じるほどに当たり前のことだと思います。
私もそう感じた1人です。(笑)

公式解説ページである「Yahoo!デベロッパーネットワークJavaScriptマップ」を見ましても、アイコン(マーカー)、吹きだし(バルーン)のキーワードが出てきますので、当然できるものとばかり思っていました。

ところが、ここからドツボにハマる私がいます…。

Yahoo!地図WEB API(YOLP)の基本的な使い方にバルーンが無い

先ほどの公式解説ページにあります「基本的な使い方」を見てみますと、「地図上にアイコンや図形を表示する」という、それらしい項目がまず目に付きます。

書かれている項目としては、「文字を表示」、「アイコンを表示」、「線を表示」、「多角形を表示」、「円を表示」となっていて、そもそも吹きだしが書かれていない…。(汗)
「文字を表示」は小さい吹きだしを出しますので、これが近いといえば近いですが、パッと見た感じではマーカーとの連携方法が書かれていません。

そこでリファレンスを見てみると、マーカーでラベル表示をするパラメータを見つけました。

YOLPのJavaScriptマップでマーカーにラベルを付ける

では早速マーカーにラベルを付けてみましょう。

<html>
<body>
<div id="map" style="width:400px; height:300px"></div>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.LayerSetControl());
ymap.addControl(new Y.ScaleControl());
ymap.addControl(new Y.SliderZoomControlHorizontal());
var marker = new Y.Marker(new Y.LatLng(35.66572, 139.73100), {title: "東京ミッドタウンっぽい"});
ymap.addFeature(marker);
}
</script>
</body>
</html>

上記のソースの【アプリケーションID】をご自身のIDに置き換えてHTMLとして保存し、ブラウザで表示すると下記のようになります。

Yahoo!地図WEB APIでマーカーにラベル表示

赤字の1行目でマーカーの定義をして、2行目で地図上に表示するように指示しています。

通常はマーカーのみ表示されていますが、カーソルをマーカー上に持っていくと(マウスオーバー)ラベルが表示され、マーカーからカーソルを離すとラベルが消えます。

Yahoo!地図WEB APIのラベルに画像も表示

ラベルには文字だけでなく、HTMLが記述できますので、画像なども表示できるようです。

しかし画面端にはみ出た場合、Google Maps APIのように自動でスクロールすることもないなど、細かいところで至らない部分があり、あくまでタイニー版吹きだしです。
サンプルソースを見ると吹きだし自体はあるようなので、これをどうにかしてマーカーと連携したいですね。

YOLPのJavaScriptマップでマーカーに吹きだしを付ける

サンプルでは吹きだし単体を地図上に表示する例しかありませんので、検索して先人の知恵を借りることに。

しかし、驚くほど情報がありません…。

唯一見つけたものは、マーカーの座標からバルーンの表示位置を割り出すという、かなりシステマチックなものでスマートではありません。
リファレンスには「このアイコンに関連付けられる吹きだしの表示位置を指定します。」という記述がありますので、何かしら関連付ける方法があるはずです。

そこで編み出した方法がこれです。

<html>
<body>
<div id="map" style="width:400px; height:300px"></div>

<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.LayerSetControl());
ymap.addControl(new Y.ScaleControl());
ymap.addControl(new Y.SliderZoomControlHorizontal());
var marker = new Y.Marker(new Y.LatLng(35.66572, 139.73100), {title: 'ん、何か居るかも？'});
marker.bindInfoWindow('<img src="http://www.hanemaru.com/img/profileimg.jpg"><br>やっほー、はね丸です。<br>リアルでは一度も訪れたことはありませんが…。(笑)');
ymap.addFeature(marker);
}
</script>
</body>
</html>

赤字の1行を追加するだけで実現できました。

「bindInfoWindow」という、かなり直球なメソッド…。(笑)

続くカッコ内に、表示したい情報を書きます。
実行すると、下記のようになります。

YOLPでマーカーにラベル表示

カーソルをマーカー上に持っていくとラベルが表示され…

YOLPのマーカーをクリックして吹きだし表示

マーカーをクリックすると、吹きだしが表示されます。

やっと目的の動作をするようになりました。
マウスオーバーで概要が見れて、クリックで詳細が見れるという、利用者にとっても優しいインターフェースが実装できますね。

私はこれが実現できなくてYOLPを使っていませんでしたが、これでGoogle Maps APIからの切り替えに憂いがなくなりました。
同じような方が居ましたら、この機会に是非YOLPを試してみてください。

■関連記事
１．Yahoo!地図WEB APIでマップ表示

２．Yahoo!地図WEB APIへ超簡単に地図検索を実装

３．Yahoo!地図APIでマーカーをクリックすると吹きだしを出す方法

Tweet
カテゴリー	：	WEB API
キーワード	：	WEB API,Yahoo!,地図,YOLP,Yahoo!地図WEB API

めちゃくちゃ参考になりました。
感謝申し上げます。

風の又ちゃん　2018-06-13 22:07:40

コメントを記入する

コメントを受け付けました。
コメントは管理人の承認後、表示されます。

はね丸

　お問い合わせ

普通の会社員をしながら、趣味でWEB製作をしています。
PHP自体は4年ほど触ってますが、触れる時間が少ない事もあってそこそこの技術力しかないです。
深夜12時に帰宅してから作業…ということも多いため、生産能力も著しく低いです。

こんな私ですが、今後もよろしくお願いします。

育児や仕事、日々思うことなどプライベートなブログはこちら。
イクメンはね丸の思うこと

@hanemaru_comをフォロー

はね丸のWEB工房メニュー