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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

HTML

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

CSS

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

Q&A

解決済

1回答

4827閲覧

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

Sanpo0

総合スコア8

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/01/12 07:53

編集2017/01/12 08:25

###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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

html

1<head> 2<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=APIキー"></script> 3</head> 4 5<body> 6<div id="wrap-a-1"></div> 7<script type="text/javascript"> 8 (function(){ 9 var latlng = new google.maps.LatLng(34.611548, 135.504877); 10 var myOptions = { 11 zoom: 15 12 , center: latlng 13 , streetViewControl: false 14 , mapTypeId: google.maps.MapTypeId.ROADMAP 15 }; 16 var map_01 = new google.maps.Map( 17 document.getElementById("wrap-a-1") 18 , myOptions 19 ); 20 21 var data = new Array(); 22 data.push({ 23 lat: 34.611548, //緯度 24 lng: 135.504877, //経度 25 url: 'http://google.com' //リンク先 26 }); 27 28 //マーカーを配置するループ 29 for (i = 0; i < data.length; i++) { 30 var markers = new google.maps.Marker({ 31 position: new google.maps.LatLng(data[i].lat, data[i].lng), 32 map: map_01 33 }); 34 //クリックしたら指定したurlに遷移するイベント 35 google.maps.event.addListener(markers, 'click', (function(url){ 36 return function(){ location.href = url; }; 37 })(data[i].url)); 38 } 39}()); 40</script> 41</body> 42 43<style> 44#wrap-a-1 { 45 position: absolute; 46 width: 400px; 47 height: 200px; 48} 49</style>

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

投稿2017/01/12 08:12

編集2017/01/12 08:15
popobot

総合スコア6586

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Sanpo0

2017/01/12 08:29

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問