現在位置: トップ > YOLP公式ブログ > Tips > シリーズくま次郎 最終回 くま次郎の奮闘 ~ オリジナル地図ができた!

ここから本文です

シリーズくま次郎 最終回 くま次郎の奮闘 ~ オリジナル地図ができた!

[Tips]  2013年3月14日
え~、YOLPをご利用の皆さま、一週間ぶりです。スタッフの方に誘われてやってきた、ゲストのくま次郎です。
自分のサイトに地図を貼ってみたいと思い立ち、前回はなんとか地図を表示するところまで到達。今回はいよいよ完結編! 表示する場所を指定しポイントアイコンを表示します。

場所の指定ってどうやるの? 

地図は表示できたぞ、ばんざーい! 


といつまでも浮かれているわけにはいきません。表示されてるのはサンプル通りの東京ミッドタウン。私の散歩コースじゃなーい! ってことで表示場所の指定です。
地図に表示される場所の指定
を読むと、なるほど、ふむふむ、緯度経度を指定すればいいってことが判明。ではさっそく散歩コースの緯度経度を・・・って   えー! いちいち緯度経度を確認しながら散歩してませんよぅ。

緯度経度を調べるにはヤフー地図。場所を右クリックして「この地点の情報を見る


するとほら、左上の窓に数字が現れます。これがその場所の緯度経度です。


この数字ををサンプルコードの new Y.LatLng の数字と入れ替えると・・・ 見事に場所が私の散歩コースに移動してくれました。調べてみたところLatは緯度、Lngは経度を意味しているそうです。へぇぇ! 

ポイントを表示

さぁていよいよポイントです。ポイントにアイコンを表示するのはきっとこれ。
アイコンを表示(Y.Marker)


なんだかややこしい説明が書かれていますが、サンプルソースのうち緯度経度の部分だけを修正してそのまま自分のソースに入れてみたところ、   おお! ポイントアイコンが出た-! 


コメントを表示

調子に乗って続いていっちゃおう。今度はコメント文字の表示。
文字を表示(Y.Label)
これだよね? ソースのうち緯度経度とコメントの部分を修正して   やったー! 吹き出しコメントも出た。


オリジナルアイコンにしてみよう

ここまで順調に来るとついつい欲張ってしまうのですよ。「もし任意の画像をアイコンとして表示したい場合」の文字にピクッ! ときたです。もちろんやってみましたよ、アイコンを「くま次郎」に変身大作戦。
自分で描いた画像をホームページのところにアップして、Y.Icon に続くアドレス部分を今アップした画像のアドレスに変えてみると・・・
じゃーん! 


ふっふっふ。完璧だー! オリジナル地図のできあがり!  これでもう妻に文句(第1回参照)は言わせない。ウェブサイトも最初に比べてずいぶんカッコよくなった気がするし、
「おーい!」 呼ぼうとしたけど、
(いやいや、ちょっと待て。ここまでは指摘されたところ。他にも線を引いたり円を描いたり、地図デザインも変えられるみたいだし、せっかくだからもっといろいろ試してみて・・・)
こうして、私、くま次郎の旅はまだまだ明日も続くのでありました。
※地図の基本的な使い方についてはこちらをご覧ください。

今回のサンプルコードはこちらです。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>くま次郎の散歩コース</title>
<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.3005839,136.985033), 17, Y.LayerSetId.NORMAL);

    var icon = new Y.Icon('<アイコン画像のファイルパス>');
    var marker = new Y.Marker(new Y.LatLng(35.3005839,136.985033), {icon: icon});
    ymap.addFeature(marker);

    var label = new Y.Label(new Y.LatLng(35.3005839,136.985033), "ここで撮影しました");
    ymap.addFeature(label);

}
</script>
</head>
<body>
<div id="map" style="width:512px; height:240px"></div>
</body>
</html>

<あなたのアプリケーションID>には、ご自身のアプリケーションIDを入れてください。アプリケーションIDについてはこちらまたは前回の記事をご覧ください。


Facebookページへの
やTwitterアカウントの
RSSリーダーの登録もよろしくお願いします。

いままでの記事


グーグルリーダーに登録  Subscribe with livedoor Reader  My Yahoo!に追加
Yahoo!地図アプリ iPhone版/Android版(無料)
Yahoo!地図ブログ
本文はここまでです このページの先頭へ