私は、このページに表示されているマップ/チャート機能を再作成する方法に関するチュートリアルを探してきました。特定のポイントでSVGパスに要素を配置する方法は？
カーソルがヒストグラムチャート上の異なるポイント（標高を示す）にホバーすると、Googleマップ上のピン/カーソルが移動して、標高が関連するマップ上のポイントを示します。
リンクをクリックして自分で確認すると説明は簡単ですが、簡単です。
https://www.greaterhobarttrails.com.au/track/north-south-track/
どれ指導が理解されます。
ありがとうございます。
ジョン。
以下は、このタスクにどのようにアプローチするか（たぶん最良の解決策ではありませんが、うまくいくはずです）です。
パス配列の最初の要件として、各ポイントには緯度、経度、高度の3つのプロパティが必要です。
グラフを作成するには、いくつかのグラフライブラリを使用する必要があります。これはmouseoverイベントをサポートする必要があります（グラフライブラリの例は次のとおりです：https://www.sitepoint.com/15-best-javascript-charting-libraries/）。 Y軸は仰角で、X軸は経路の始点からの距離です（事前に各点の距離を計算する必要があります）。
3番目の手順として、マップにパスを表示する必要があります。そのためには、google maps api（https://developers.google.com/maps/）を使用できます。
最後に、チャートとマップを接続する必要があります。グラフからmouseoverイベントを購読する必要があります。これを処理する際には、現在どのパスポイントがユーザーによってホバリングされているかに関心があります。その後、そこから座標を取得し、これらの座標に基づいて地図上にマーカーを追加することができます。
私は自分のプラグインpathAnimatorからいくつかの助けの方法で、正しい方向にあなたを指すことができます：あなたはあなたが得ることができるので、（あなたの具体的な例では）一番下の要素にmousemoveイベントを添付する必要が
xパーセント（0から100まで）。pointAtメソッドを使用することができます。上のリンクのデモを確認すれば、その処理方法を理解できます。
多分私の[pathAnimator]（https://github.com/yairEO/pathAnimator）小さなlibには、援助 – vsync
のものであろう問題を説明し、基本的にあなたが使用することができます – vsync
一般化ではありません**タイトル**を入力してください私のpathAnimatorプラグインは、下のグラフの 'x 'のパーセンテージを知っているため（pageXマウスイベント引数を使用）、マップのパス上にポインタを置くことができるため、正しい位置にマップ上のポイントを設定できます。簡単です。 – vsync