*

ルートラボの地図をwordpressの記事に表示させる方法

公開日: : Howto

このブログはwordpressを使っていますが、ルートラボの地図を貼り付けることができないことに気づきました。何でだろうと思って調べてみると、wordpressは標準では、記事内にJavaScriptのコードは貼り付けできないのだとか。

JavaScriptを走らせるブラグインもあるようですが、デザインが崩れたりすると厄介なので、とりあえずシステムをいじらずにルートラボの地図を貼り付けできる方法で対応することにしました。

もしかしたら常識中の常識かもしれませんが、時間が経つと忘れてしまうと思いますので、その方法を書いておきます。

手順

1. ルートラボで作成した地図の下の方にある「ルートを動かせる地図として貼り付ける」のHTMLコードをコピーします(下記)。

<script type=”text/javascript” encoding=”UTF-8″ src=”http://latlonglab.yahoo.co.jp/route/paste?id=cae5fe052834bf0faa3fa9dc08b2d910&width=360&height=360&mapstyle=map&graph=true&maponly=false”>

2. 上記のHTMLコードから、「http:/~」の部分をコピーします(下記)。

http://latlonglab.yahoo.co.jp/route/paste?id=cae5fe052834bf0faa3fa9dc08b2d910&width=360&height=360&mapstyle=map&graph=true&maponly=false

3. 2.でコピーしたURLをブラウザのURL入力窓にペーストして実行します。ブラウザがChromeの場合は、ウインドウ上に文字列が表示されます(下記)。
※IEの場合は、ファイルを保存しますか?というダイアログが出ますので適当な場所に保存してから、ファイル形式を.txt形式に変更して開きます。

document.writeln(‘<iframe style=”border: solid 1px #999; width: 360px; height: 360px; margin: 0; padding: 0;” src=”http://latlonglab.yahoo.co.jp/route/watch?id=cae5fe052834bf0faa3fa9dc08b2d910&mode=paste&graph=true&mapstyle=map&maponly=false&url=’+encodeURIComponent(location.href)+’” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”></iframe>’);

4. 上記の文字列から「<iframe~/iframe>」部分をコピーします(下記)。

<iframe style=”border: solid 1px #999; width: 360px; height: 360px; margin: 0; padding: 0;” src=”http://latlonglab.yahoo.co.jp/route/watch?id=cae5fe052834bf0faa3fa9dc08b2d910&mode=paste&graph=true&mapstyle=map&maponly=false&url=’+encodeURIComponent(location.href)+’” height=”240″ width=”320″ frameborder=”0″ scrolling=”no”></iframe>

5. 4.でコピーしたタグをwordpressの記事内に貼り付けて完了。更新するとちゃんと表示されるようになりました。

地図のオプション

ちなみに、ルートラボ上で選べるオプションは、コードの一部を変えることでも変更できます。覚えておくと後からちょっと表示方法を変更したい時に、ルートラボの画面まで行かずにブログの記事を変えるだけで済みますので便利ですね。

・形と大きさ:「width:」(幅)と「height:」(高さ)の後ろを変えます。
width:360px height:360pxであれば正方形ですし、width:240px height:360pxにすれば縦長、width:480px height:360pxだと横長になります。

・標高グラフの有無:「graph=」の後ろを変えます。対応は下記の通りです。
true=あり
false=なし

・タイトルの有無:「maponly=」の後ろを変えます。
true=なし
false=あり

・地図の種類:「mapstyle=」の後ろを変えます。
通常の地図=map
地形図=topographic
大きい文字=bold
モノトーン=monotone
水域図=waters
鉄道路線図=railway

関連記事
明日はBRM111東京200曽我梅林(2014-01-10)

ブログランキングに参加しています。
役に立ったよ!という方はワンクリックお願いします。
にほんブログ村 自転車ブログ ブルベへ
にほんブログ村

adsense-pc用

関連記事

記事はありませんでした

adsense-pc用

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

adsense-pc用

20150430
Ingress203日目「修復作業」

三浦半島が沈んだ翌日は修復作業中心。前にも書いたかもしれませんが、地元

20150430
Ingress202日目「三浦半島沈む」

昨日の早朝、三浦半島が緑に沈められました。これまでと同じグループによる

20150428
Ingress201日目「」

今日は2時スタート。穴を埋める作業をコツコツと。 遠征先のキーが

20150427
Ingress200日目「メンテ」

今日は寝坊して5時過ぎのスタート。自転車で。昨日久しぶりに走ったせいか

20150426
Ingress199日目「トレラン?」

今日は3:30のスタート。駅周辺でひたすらCF作りをして帰宅。

→もっと見る

  • 1970年生。ロードバイクは2010年12月から、ランニングは2012年1月から始めました。2012年初フルサブ4。足踏みしていたサブ3.5は東京マラソン2014でようやく達成。トレイルラン、ウルトラマラソンも走ります。

    旧ブログ:tera-tory

    2014年の目標
    自転車
    ・PBPへのエントリー権獲得(ブルベ)
    ラン
    ・3時間15分切り(フル) 未達
    ・90分切り(ハーフ) クリア!
    ・UTMFのエントリーポイント獲得
    ・富士登山競走(山頂コース)完走 クリア!

    follow us in feedly

    にほんブログ村 自転車ブログ ブルベへ
    にほんブログ村
PAGE TOP ↑