2017 06123456789101112131415161718192021222324252627282930312017 08

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック(-) | コメント(-)

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

Web Services by Yahoo! JAPAN
んじゃ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コードを記述する。これもサンプルコードからほとんど引き写しで作りました。

この中で 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://blog-imgs-11.fc2.com/u/n/i/universalmotorgerat/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
実際こんな感じになるデス。

関連リンク

[関連記事]

[ 2007/06/22 19:22 ] blog | TB(0) | CM(0)   ブックマークに追加する
コメントの投稿













管理者にだけ表示を許可する
Profile

ウニモグ

Author:ウニモグ
About - このブログについて
Credits - 利用素材などの記載
Contact - フォームによるお問合せ

Recent comments
Monthly Archives
ブロとも申請フォーム


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