universal motor gerat

2009 10 ≪ 123456789101112131415161718192021222324252627282930≫ 2009 12

Ads by Google

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

トラックバック(-) | コメント(-)

Yahoo!地図情報のFC2ブログへの埋め込み

んじゃYahoo! JAPAN WEB APIを使ってYahoo!地図情報をFC2ブログに埋め込むにはどうしたらいいんだろう？　ちょっとやってみます。

Yahoo! JAPAN ID を取得する。(持ってない場合)
Yahoo!デベロッパーネットワークでアプリケーションIDを登録する。
Yahoo!地図情報で目的地を表示し、緯度・経度を拾う。

http://map.yahoo.co.jp/pl?lat=35%2F39%2F31.000&lon=139%2F42%2F15.500&pointer=on

例えばアドレスバーのURLが上記になってる状態だと、latの引数が緯度、lonの引数が経度みたいですね。つまり緯度35/39/31.000、経度139/42/15.500の地図を表示してるってことです。
まぁ、別にどこの地図情報サービスで緯度・経度を取得しても構わないのですが…　

地図情報呼び出し用のHTMLコードを記述する。これもサンプルコードからほとんど引き写しで作りました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" 
   src="http://api.map.yahoo.co.jp/MapsService/js/V1/?appid=YahooDemo">
</script>
<title>Yahoo!地図情報 サンプル</title>
</head>
<body onload="initYahooMap(); ">
<div id="map_y01" style="height: 360px; width: 360px"></div>
<script type="text/javascript"></script>
</body>
</html>

この中で YahooDemo と書いてある部分には、実際に取得したアプリケーションIDを記載します。

YahooMapsCtrl の引数は…
1個目: id = 任意の文字列(div要素のidと等しくする)
2個目: pos = 緯度と経度をカンマ区切りで記述
3個目: layer = 縮尺(1-10の数字)
4個目: mode = 地図の種類
地図情報はdiv要素の位置に表示されます。その際には地図のサイズを height と width で指定してあげます。

この .html をFC2ブログにアップロードすると、以下のようなURLになる筈です。

http://ブログのアドレス/file/HTMLファイル名.html

そしたら記事から iframe で呼出ます。先に指定した地図のサイズに iframe のサイズをあわせるといいでしょう。ちなみにこの記事の場合、以下のようになってます。

<iframe src="http://universalmotorgerat.blog94.fc2.com/file/yahoomap_sample01.html" style="width:360px;height:360px;" scrolling="no" marginwidth="0" marginheight ="0" frameborder="0"></iframe>

最後に地図情報の表示の左下にクレジット表示を追加します。

今の所、Yahoo!デベロッパーネットワークで公開されてるサンプルでは、ブラックボックス的な部分が多くて良く判りませんでした。
またブログ内の他の部分からの影響を避けるために地図情報部分を iframe で作ってしまいました。方法的には、「珍品堂」さんの「【詳説】FC2ブログにGoogle Mapを埋め込む方法」の Yahoo! 版という感じです。

[タワーレコード渋谷店]

Webサービス by Yahoo! JAPAN
実際こんな感じになるデス。