###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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/12 08:29