質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.05%

  • JavaScript

    13273questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 108

azricot

score 2

前提・実現したいこと

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>

試したこと

<div id="sample"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.6863595388604!2d139.6853634!3d35.6600983!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x447d943f8a75b1f8!2z5p2x5Lqs5aSn5a2m6aeS5aC044Kt44Oj44Oz44OR44K5!5e0!3m2!1sja!2sjp!4v1512574194833" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe></div>

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

補足情報(言語/FW/ツール等のバージョンなど)

http://gimmicklog.main.jp/javascript/392/
を参考にしました

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/01/04 00:16

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

    キャンセル

  • azricot

    2018/01/04 00:38

    ありがとうございます!修正しました!

    キャンセル

  • kei344

    2018/01/04 00:41

    HTML部分がコードブロックからもれていますが・・・。

    キャンセル

  • azricot

    2018/01/04 00:44

    すみません問題の部分だけかと思っていました。修正しました

    キャンセル

回答 1

+1

根本的に間違っているのは、<div id="map"></div> が <head></head> 内に有ることです。body要素の子要素としておきましょう。

また、Google Maps JavaScript API は現在 APIキーが必須になっているので、参考にするサイトが古いです。

【Google Maps JavaScript APIの使い方まとめ】
https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/04 01:01

    そうなんですね。早速やり直します。ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    13273questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。