質問編集履歴

1 書式の改善

Sanpo0

Sanpo0 score 6

2017/01/12 17:25  投稿

Webサイトに実装のgooglemapのピンをURLリンク貼りたい。
###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(34.611548, 135.504877);
   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マップのマーカーをクリックしたらリンク先へ遷移させる](http://gimmicklog.main.jp/javascript/392/)
上記サイトのコードにある
```
//マーカーの情報
 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
  • JavaScript

    25624 questions

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

  • HTML

    15126 questions

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

  • CSS

    10207 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る