Ride with GPS の埋め込み

Ride with GPS をブログへ載せる時に本文へ埋め込むと表示に時間が掛かるため、キャプチャ画像をクリックしたら埋め込み表示するようにしました。

ルート 131.9km △2,139m
クリックすると RWGPS Map Controlを埋め込み表示します。

これを載せるには本文に書くHTMLと、動作させるJavaScriptが必要です。

●本文へ書くHTML

赤字部分を変更して使います。

<p>ルート　距離km △獲得標高m<br />
<span id="rwgps" style="font-size: 8pt;">クリックすると RWGPS Map Control を埋め込み表示します。<br />
<a href="#" onclick="embRWGPS('マップID', 'マップTYPE');return false;">
<img src="キャプチャ画像URL" title="RWGPS Map Control を埋め込み表示します" style="border: 1px solid lightgray;" />
</a>
</span>
</p>

RWGPSのURLが　https://ridewithgps.com/routes/32404975　の場合、
マップIDは、32402975 の部分です。

キャプチャ画像URLは、実際のRWGPSの画面をキャプチャして作成します。

マップTYPEは、次の種類があります。お好みで。右側が記述する文字です。
Map → roadmap
Terrain → terrain
Satellite → satellite
Hybrid → hybrid
RWGPS → rwgps
OSM → osm
OSM Outdoor → osmOutdoor
Esri Topo → esriTopo

● JavaScript

// RWGPS埋め込み表示用
<script>
function embRWGPS(mapID, mapType){
  var elem = document.getElementById("rwgps");
  elem.innerHTML = '<iframe src="https://ridewithgps.com/embeds?type=route&amp;id=' + mapID +  '&amp;metricUnits=true&amp;sampleGraph=true&amp;overlay=' + mapType + '" style="width: 1px; min-width: 100%; height: 500px; border: none;" scrolling="no"></iframe>'
}
</script>