Googleマップのマーカーをクリックしたらリンク先へ遷移させる

###前提・実現したいこと
GoogleMapの任意の場所にピン付をして、そこからリンクに飛べるようにする

###発生している問題・エラーメッセージ
GoogleMapが表示されない

エラーメッセージ

###該当のソースコード


<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
    <title>トイレポート</title>


<style>
      #map{
        width: 100%
        height: 600px;
      }
    </style>
    <div id="map"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
      function map_canvas(){
        var data = new Array();
          data.push({
            lat: '35.660576',
            lng: '139.685272',
            url: 'http://133.130.106.75/~w9457100578/kadai/cafeteria.html'
          });
          data.push({
            lat: '35.659426',
            lng: '139.686388',
            url: 'http://133.130.106.75/~w9457100578/kadai/itatoma.html'
          });
          data.push({
            lat: '35.660031',
            lng: '139.687123',
            url: 'http://133.130.106.75/~w9457100578/kadai/commupla.html'
          });
          data.push({
            lat: '35.660254',
            lng: '139.687332',
            url: 'http://133.130.106.75/~w9457100578/kadai/camplaA.html'
          });
          data.push({
            lat: '35.660201',
            lng: '139.687600',
            url: 'http://133.130.106.75/~w9457100578/kadai/camplaB.html'
          });
          data.push({
            lat: '35.658523',
            lng: '139.686930',
            url: 'http://133.130.106.75/~w9457100578/kadai/math.html'
          });
          data.push({
            lat: '35.659077',
            lng: '139.685964',
            url: 'http://133.130.106.75/~w9457100578/kadai/1stcenter.html'
          });
          data.push({
            lat: '35.659112',
            lng: '139.685321',
            url: 'http://133.130.106.75/~w9457100578/kadai/admini.html'
          });
          data.push({
            lat: '35.659351',
            lng: '139.685723',
            url: 'http://133.130.106.75/~w9457100578/kadai/museum.html'
          });
          data.push({
            lat: '35.659949',
            lng: '139.684897',
            url: 'http://133.130.106.75/~w9457100578/kadai/no1.html'
          });
          data.push({
            lat: '35.658946',
            lng: '139.688298',
            url: 'http://133.130.106.75/~w9457100578/kadai/tearoom.html'
          });
          data.push({
            lat: '35.660507',
            lng: '139.687777',
            url: 'http://133.130.106.75/~w9457100578/kadai/PE1.html'
          });
          data.push({
            lat: '35.660650',
            lng: '139.687198',
            url: 'http://133.130.106.75/~w9457100578/kadai/PE2.html'
          });
          data.push({
            lat: '35.661047',
            lng: '139.687783',
            url: 'http://133.130.106.75/~w9457100578/kadai/QOMgym.html'
          });
          data.push({
            lat: '35.661252',
            lng: '139.687177',
            url: 'http://133.130.106.75/~w9457100578/kadai/traininggym.html'
          });
          var latlng = new google.maps.LatLng(data[0].lat, data[0].lng);
          var opts = {
            zoom: 17,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map"), opts);
          for (i = 0; i < data.length; i++) {
            var markers = new google.maps.Marker({
              position: new google.maps.LatLng(data[i].lat, data[i].lng),
              map: map
            });
            google.maps.event.addListener(markers, 'click', (function(url){
              return function(){ location.href = url; };
            })(data[i].url));
          }
        }

        google.maps.event.addDomListener(window, 'load', map_canvas);
      </script>
  </head>
  <body>
    <h1>トイレポート@駒場Iキャンパス</h1>
    <h2>駒場Iキャンパスのトイレ情報まとめサイト</h2>
    <p>マップのピンをクリックすると、駒場Iキャンパス内で学生が使用できるトイレの情報が表示されます。</p>

  </body>
</html>

###試したこと

↑これを記述すると地図は表示されるが、javascriptで書いた内容は全く反映されない

###補足情報(言語/FW/ツール等のバージョンなど)
http://gimmicklog.main.jp/javascript/392/
を参考にしました

kei344

2018/01/03 15:16

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。