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

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

ただいまの
回答率

90.34%

  • JavaScript

    17496questions

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

  • HTML

    9547questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6187questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Webサイトに実装のgooglemapのピンをURLリンク貼りたい。

解決済

回答 1

投稿 編集

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

Sanpo0

score 2

html5でWebサイトを作っています。

会社概要のページに複数のgooglemapを実装しています。
その一つ一つの会社のGoogleMapのピンをクリックしたら、
外部サイトに飛ばしたくて、思考錯誤しているのですが、
なかなか解決できず、ご教授いただきたく書かせていただきました。

該当のソースコード

現在のソースになります。

<head>
...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>
</head>

<body>
....

<div id="wrap-a-1"></div>
.....

<script type="text/javascript">
  (function(){
    var latlng = new google.maps.LatLng(-----,----- );
    var myOptions = {
        zoom: 15
      , center: latlng
      , streetViewControl: false 
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_01 = new google.maps.Map(
        document.getElementById("wrap-a-1")
      , myOptions
    );
    var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map_01
    });

    ///合計で7つほどIDを分けて同じ記述してあります。///
    .
    . 
    .

}());
  </script>
</body>

<css>
#wrap-a-1 {
  position: absolute;
  width: 400px;
  height: 200px;  
}

この状態であると、綺麗に表示されるのですが、
ピンをクリックしても何も動きがありません。

試したこと

こちらのサイトを参考にして試してみました。

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

上記サイトのコードにある

//マーカーの情報
  var data = new Array();
    data.push({
      lat: '35.681382', //緯度
      lng: '139.7660843', //経度
      url: 'http://www.jreast.co.jp/estation/stations/1039.html' //リンク先
    });
    data.push({
      lat: '35.678187',
      lng: '139.76817',
      url: 'http://www.yaesu-book.co.jp/'
  });
    data.push({
      lat: '35.682063',
      lng: '139.773448',
      url: 'http://www.nihonbashi-tokyo.jp/'
  });

 

や、

//マーカーを配置するループ
  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
    });
    //クリックしたら指定したurlに遷移するイベント
    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>

    ...

    var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map_01
    });

    //↓このように付け加えたりしたのですが。。。//

    var data = new Array();
    data.push({
      lat: '----', //緯度
      lng: '----', //経度
      url: 'http://maps.google.com/maps?q=----' //リンク先
    });

    //地図を表示させるエリアのidを指定
    var map_01 = new google.maps.Map(
        document.getElementById("wrap-a-1")
      , myOptions
    );

    //マーカーを配置するループ
     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_01
    });
    //クリックしたら指定したurlに遷移するイベント
    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>

下に付け加えても全然反応がなく、むしろ
全て表示できなくなってしまいました。

どなたかわかる方がいらっしゃればご教授いただければ幸いです。

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

Mac 10.12/Sublime Txt

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

組み合わせてやったら普通にできましたよ
※APIキーだけ埋めればそのまま動くはずです。

<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=APIキー"></script>
</head>

<body>
<div id="wrap-a-1"></div>
<script type="text/javascript">
  (function(){
    var latlng = new google.maps.LatLng(34.611548, 135.504877);
    var myOptions = {
        zoom: 15
      , center: latlng
      , streetViewControl: false
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_01 = new google.maps.Map(
        document.getElementById("wrap-a-1")
      , myOptions
    );

    var data = new Array();
    data.push({
      lat: 34.611548, //緯度
      lng: 135.504877, //経度
      url: 'http://google.com' //リンク先
    });

    //マーカーを配置するループ
    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_01
    });
    //クリックしたら指定したurlに遷移するイベント
    google.maps.event.addListener(markers, 'click', (function(url){
      return function(){ location.href = url; };
    })(data[i].url));
  }
}());
</script>
</body>

<style>
#wrap-a-1 {
  position: absolute;
  width: 400px;
  height: 200px;
}
</style>

※余談ですが、地図がでなくなった場合などは、ブラウザのデベロッパーツールのコンソールにエラーがないか確認しましょう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/01/12 17:29

    icchii様!
    本当にありがとうございます。やってみたらできました。すごいです。また、アドバイスありがとうございます!次からエラーをチェックしてやってみます!ありがとうございました!!!!

    キャンセル

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

  • JavaScript

    17496questions

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

  • HTML

    9547questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6187questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。