Google Map Apiを用いて現在地から登録された住所への経路を表示させたい。

Question

ラーメンの口コミを登録するサイトを作っています。
押すとMAPが現在地に移動するボタンと
登録された店の場所にMAP上でピンを立て、ピンの中のボタンを押すと現在地からの経路を検索してくれる機能を実装しようとしています。

//現在地取得
    document.getElementById('getcurrentlocation').onclick = function() {
      geoLocationInit();
    }

    function geoLocationInit() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(success, fail);
        } else {
          createMap(pyrmont);
      }
    }

   // success
   function success(position) {
     var currentLat = position.coords.latitude;
     var currentLng = position.coords.longitude;

     var pyrmont = new google.maps.LatLng(currentLat,currentLng);

     createMap(pyrmont)

    var currentMarker = new google.maps.Marker({
            position: pyrmont,
            map: map,
            icon: {
            url: '/assets/move.png',
            scaledSize: new google.maps.Size(30, 30)
            },
            })
        currentMarker.setMap(map);
    }

    // fail
    function fail(pyrmont) {
      createMap(pyrmont);
    }


    // map表示
    function createMap(pyrmont) {
      map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 18
      });

      // var currentPos = new google.maps.LatLng(currentLat, currentLng);
      var currentMarker = new google.maps.Marker({
            position: pyrmont,
            map: map,
            icon: new google.maps.MarkerImage(
            '/assets/move.png',
            new google.maps.Size(80,50),
            ),
        });
        currentMarker.setMap(map);

　　　///ピンを立てる
      <% @shops.each do |s| %>
          (onload = function(){
          var contentString = "住所：<%= s.address %>"

          var marker = new google.maps.Marker({
              position:{lat: <%= s.latitude %>, lng: <%= s.longitude %>},
              map: map,
              title: contentString
            });

              infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
              content:'<%= link_to s.name, shop_path(s) %><input type="button" value="ここに行く" calcRoute()">'
              // 吹き出しに表示する内容
            });

              marker.addListener('click', function() { // マーカーをクリックしたとき
              infoWindow.open(map, marker); // 吹き出しの表示
            });
// ここからルートを取得、表示
            document.getElementById('calcRoute').onclick = function() {
                var request = {
                  origin: currentLat+','+currentLng, //現在地(必須)。経度緯度かテキスト入力。
                  destination: <%= s.latitude %>+','+<%= s.longitude %>,  //目的地(必須)。経度緯度かテキスト入力。
                  travelMode: google.maps.DirectionsTravelMode.WALKING, //交通手段(必須
                  avoidHighways: false, //高速道路を使うかどうか。trueだと高速道路を可能な限りルートの計算から除外
                  avoidTolls: false //有料道路を使うかどうか。trueだと有料道路を可能な限りルートの計算から除外
                };

                directionsService.route(request, function(response,status){
                  if (status == google.maps.DirectionsStatus.OK){
                    directionsDisplay.setDirections(response);
                  }
                });
            }
          })();
      <% end %>
    }
    }

しかし、現在地を取得するボタンを押すと

document.getElementById('calcRoute').onclick = function() {

に対してCannot set property 'onclick' of nullとエラーが出てしまいます。
いろいろ調べて試してみたのですがうまくいかないので、どなたかアドバイスいただけると幸いです。

Answer 1

エラー内容は単純にdocument.getElementById('calcRoute') = nullになっている、というものなので、id="calcRoute"となる要素が存在するか、もしくはjavascriptが読み込まれる際に該当要素が読み込まれているか*1、一度確認してみてください。

*1: 例えばjavascriptを<header>部に記述すると、要素を読み込む前にonclickを付けようと試みるため、エラーとなる事があります。

Answer 2

質問者様

ピンの中のボタンを押すと現在地からの経路を検索してくれる機能

しかし、現在地を取得するボタンを押すと

ピン=現在地=マーカの認識で合っていますでしょうか？

まず

document.getElementById('calcRoute')

Google Mapの範囲でいえばid="calcRoute"は見つける事ができませんした。
Google Map外に用意されたボタンなのでしょうか？

また現在

marker.addListener('click', function() { // マーカーをクリックしたとき
    infoWindow.open(map, marker); // 吹き出しの表示
});

という機能がすでに実装されているように見受けられます。
もし「マーカをクリックした際現在地からの経路を検索してくれる機能」であるなら
こちらに処理を記載されては？

Comments

[Yn_26247]

説明不足ですみません、現在地を取得するボタンは
<button id="getcurrentlocation" type="button" class="cl〜〜＞として別で作っています。
店舗が登録されている場所にマーカーを、
マーカーを押した時に表示されるウィンドウに追加された
<input type="button" value="ここに行く" calcRoute()">をクリックすると現在地からマーカーまでの経路表示させたいと考えています。calcRoute()をid="calcRoute"に変えても問題は解決しませんでした。
説明が下手でもうしわけありません。

[kuma_kuma_]

> マーカーを押した時に表示されるウィンドウに追加された
><input type="button" value="ここに行く" calcRoute()">
このinputタグにはid="calcRoute"の指定がまずありません。
><input type="button" value="ここに行く" id="calcRoute">
後からイベントを追加するのであればこの様な記述が必要です。

またclickイベント表記で実行されたいのであれば
><input type="button" value="ここに行く" calcRoute()">
ではなく
><input type="button" value="ここに行く" onclick="calcRoute()">
となります。