【JacaScript】google mapの吹き出しのイベント方法

はじめて自分でコンテンツ制作をしているのですが、JavaScriptがうまく動いてくれません。

1.やりたいこと（できた）

googleマップに複数ピンを立て、クリックすると吹き出しが出る。
吹き出しの中は、テキストリンク。
テキストリンクをクリックしたら、アンカーで情報掲載場所に遷移。
情報は最初は非表示でクリックされたら表示される。
ピンごとに情報の内容を変更する。

googleマップに複数ピンを立てる
ピンをクリックしたら吹き出しを出す
吹き出しにテキストリンクを用意
テキストリンクをクリックしたらアンカーリンクの場所へ遷移（情報部分）
情報部分の初期設定は非表示

2.やりたいこと（できていない）

ピンがクリックされたら該当する情報を表示
ピンごとに該当する情報を変更 → 上記で止まってしまいまだ試していません

html
1<!DOCTYPE html>
2<html>
3
4  <head>
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
8    <link href="../css/style.css" rel="stylesheet">
9    <script type="text/javascript" src="../js/javascript.js"></script>
10    <script src="https://maps.googleapis.com/maps/api/js?key=（私のkey）&callback=initMap" async defer></script>
11  </head>
12
13  <body id="index">
14
15    <!-- header始まり -->
16    <header>
17    ～～～略～～～
18    </header>
19    <!-- header終わり -->
20
21    <!-- wrap始まり -->
22    <div id="wrap" class="clearfix">
23      <div class="content">
24
25        <!--ここから左カラム-->
26        <div class="main">
27          <h1>MAP</h1>
28          <p>地図です</p>
29
30          <!-- ここからgooglemap -->
31          <section class="google-map">
32            <div id="map"></div>
33          </section>
34          <!-- ここまでgooglemap -->
35
36          <!--ここから情報-->
37            <p id="target" style="background-color:gray; margin-top: 50px; height: 200px;">ここに情報を表示</p>
38          <!--ここまで情報-->
39
40        </div>
41        <!--ここまで左カラム-->
42
43        <!--ここから右カラム-->
44        <aside class="sidebar">
45          <section>
46            <h2>テキスト</h2>
47            <ul>
48              <li><a href="#">テキスト</a></li>
49              <li><a href="#">テキスト</a></li>
50              <li><a href="#">テキスト</a></li>
51              <li><a href="#">テキスト</a></li>
52              <li><a href="#">テキスト</a></li>
53            </ul>
54          </section>
55          <section>
56            <h2>テキスト</h2>
57            <ul>
58              <li><a href="#">テキスト</a></li>
59              <li><a href="#">テキスト</a></li>
60              <li><a href="#">テキスト</a></li>
61            </ul>
62          </section>
63        </aside>
64        <!--ここまで右カラム-->
65      </div>
66    </div>
67    <!-- wrap終わり -->
68
69    <!-- footer始まり -->
70    <footer>
71      <small>footerのテキスト</small>
72    </footer>
73    <!-- footer終わり -->
74
75  </body>
76
77</html>
78

JavaScript
1//ピンの表示
2function initMap() {
3  var locations = [
4    ['<div class="comment"><a href="#target" onclick="OnLinkClick();>テキストリンク</a></div>', 緯度, 経度],
5    ['<div class="comment"><a href="#target" onclick="OnLinkClick();>テキストリンク</a></div>', 緯度, 経度],
6    ['<div class="comment"><a href="#target" onclick="OnLinkClick();>テキストリンク</a></div>', 緯度, 経度],
7    ['<div class="comment"><a href="#target" onclick="OnLinkClick();>テキストリンク</a></div>', 緯度, 経度],
8    ['<div class="comment"><a href="#target" onclick="OnLinkClick();>テキストリンク</a></div>', 緯度, 経度]
9  ];
10
11  var map = new google.maps.Map(document.getElementById('map'), {
12    zoom: 16,
13    gestureHandling: 'greedy', //PC：スクロールでズーム  モバイル：指1本のスクロールで地図移動
14    mapTypeControl: false, //マップタイプ コントロール
15    fullscreenControl: true, //全画面表示コントロール
16    streetViewControl: true, //ストリートビュー コントロール
17    zoomControl: true, //ズーム コントロール
18    center: new google.maps.LatLng( 緯度, 経度), //MAP初期値
19    mapTypeId: google.maps.MapTypeId.ROADMAP
20  });
21
22  var infowindow = new google.maps.InfoWindow;
23  var marker, i;
24  
25//    window.alert(locations.length);
26  
27  for (i = 0; i < locations.length; i++) {
28    marker = new google.maps.Marker({
29      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
30      map: map
31    });
32
33    google.maps.event.addListener(marker, 'click', (function (marker, i) {
34      return function () {
35        infowindow.setContent(locations[i][0]);
36        infowindow.open(map, marker);
37      }
38    })(marker, i));
39  }
40  
41  // 情報の初期表示は非表示
42  document.getElementById("target").style.display ="none";
43  
44  //ピンがクリックされたら情報が開く
45  function OnLinkClick(){
46    const target = document.getElementById("target");
47
48    if(target.style.display=="block"){
49      // noneで非表示
50      target.style.display ="none";
51    }else{
52      // blockで表示
53      target.style.display ="block";
54    }
55  }
56  }

参考にさせていただいたサイト

▼LIGさんのサイト（うまくできませんでした）
https://liginc.co.jp/375017

▼LIGさんの制作事例
https://www.guidoor.jp/city/mishima/

▼Google Maps APIを使って複数のマーカーと吹き出し - JavaScript
https://qiita.com/Ryosuke-Hujisawa/items/d1d9bb6f06f2e2d75b2a
→こちらをJSに使いました

▼google maps apiでマーカー表示、画像表示、注釈表示をしてみる
http://www.googleappsscript.info/2018-03-25/map_show_map_marker.html
→吹き出し部分はこちらを参考にしました

教えていただきたいこと

下記の2点について。
1は、onClickの関数で表示するかと思いましたが、
JSの「var locations」にonclick="OnLinkClick();を入れるとテキストが消えてしまいました。

2は、まだ試していませんが、私のJSは、二次元配列ですがピンごとの情報も入れたいので、
三次元配列？というものになるのでしょうか？

1.ピンがクリックされたら情報を表示

2.ピンごとに情報を変更 → 上記で止まってしまいまだ試していません

お手数ですがどうぞ宜しくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

onclick="OnLinkClick();を入れるとテキストが消えてしまいました。

onclick属性のクォーテーション閉じ忘れが原因だと思います。

三次元配列？というものになるのでしょうか？

概要が分かりませんが、#targetにテキストを用意する程度であれば、必要ないように思います。

投稿2018/12/10 02:58

Lhankor_Mhy

総合スコア36089

roro_mochi

2018/12/10 04:07

ありがとうございます。 >onclick属性のクォーテーション閉じ忘れが原因だと思います。うっかりしていました。解決できました！ >#targetにテキストを用意する程度であれば、必要ないように思います。ピンの吹き出しにあるアンカーリンクの遷移先は、ピンの数と同じだけ必要になるので、ピンが増えれば、情報も増えることになります。 googleマップで検索窓に「ランチ」と入れたら、該当するピンが地図上に出て情報が窓の下に羅列されるイメージなのですが。。。 #targetに全情報を持たせるという事なのでしょうか？お手数ですがよろしくお願いいたします。

Lhankor_Mhy

2018/12/10 04:38

すみませんが、概要を把握しかねていますので、補足をお願いします。三次元配列となりますと、要素が3つになります。現状は [【マーカーの数】, 【そのパラメータ】] つまり、 [【1番目のマーカー】, 【その緯度】] のように参照しているかと思います。これが3次元配列になった時に、 [【マーカーの数】, 【そのパラメータ】, 【？？？】 ] 3つ目の軸は、何を想定してらっしゃいますか？

roro_mochi

2018/12/10 07:44

今、 var locations =[【アンカーリンク】, 【緯度、経度】 ]が入っているので、さらに var locations =[【アンカーリンク】, 【緯度、経度】, 【詳細情報（←ここが増える）】]という配列だと思っているような結果が得られるのかなと思いました。今日、初めてJSを触ったので深くは理解できていないので、説明が上手にできておらずすみません。配列にこだわっているわけではなく、その方法しか今はわからない状況でした。マップ上のピンをクリック →吹き出しが出る →吹き出しにはテキストリンク（お店の名前のみ） →テキストリンクをクリック →アンカーリンク先へ遷移 →お店の詳細情報が出てくる（最初は隠れている）このピンが複数あるため、情報を添え字で取ってくる配列なのかなと考えました。

Lhankor_Mhy

2018/12/10 07:49

var locations =[【アンカーリンク】, 【緯度、経度】 ] という現状のご認識が間違っています。現状は、 var locations =[ [【アンカーリンク】, 【緯度、経度】 ], [【アンカーリンク】, 【緯度、経度】 ], ...] です。　難しいかもしれませんが、[1, 2, 3]←これは1次元配列です。 2次元配列は、[ [1, 2, 3], [1, 2, 3, 4], [1, 2, 3] ] のような感じ 3次元配列は、[ [ [1, 2, 3], [1, 2, 3], [1, 2, 3] ], [ [1, 2, 3], [1, 2, 3, 4], [1, 2, 3] ], [ [1, 2, 3], [1, 2, 3], [1, 2, 3, 4] ] ] のような感じ

roro_mochi

2018/12/10 07:58

そうだったんですね。大変失礼しました。。。方法を変えます。

Lhankor_Mhy

2018/12/10 08:02

積み木みたいなものを想像してください。マーカーが1個のとき、【アンカーリンク】, 【緯度、経度】は1次元です。1×2個の積み木だと思ってください。マーカーが2個になると、【アンカーリンク】, 【緯度、経度】【アンカーリンク】, 【緯度、経度】は2次元です。積み木は2×2個になりました。では、マーカーが3個になると、3次元になるでしょうか？ならないですよね？【アンカーリンク】, 【緯度、経度】【アンカーリンク】, 【緯度、経度】【アンカーリンク】, 【緯度、経度】となって、積み木が3×2個になるだけです。では、【詳細情報】が増えると、どうでしょうか？【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】そうですね、積み木が3×3個になるだけで、2次元のままです。積み木に高さを加えて3次元にするには、何かもう一つの要素が必要になります。たとえば、店舗の場所が時間によって変わる、移動ワゴンみたいな地図情報を作るなら、 0～1時【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】 1～2時【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】 2～3時【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】【アンカーリンク】, 【緯度、経度】, 【詳細情報】のようにするのがいいでしょう。この場合、積み木は24×3×3で3次元です。

roro_mochi

2018/12/10 08:14

ありがとうございます。まだしっかりつかめていませんが、これから理解を深めます。最後の移動ワゴンの例なのですが、 24×3×3とありますが、 27×3×3ではないのでしょうか？ 0-1時のグループで3×3 それが3グループあるので27 と思ったのですが。。。今やりたいことは、配列では難しいかもしれません。アンカー部分のパラメータid名を変更した方が今は良いかなと思いました。配列になってから少し難しくなってきました。（ありがとうございます）

Lhankor_Mhy

2018/12/10 08:29

私には配列を使うのがいいように思えますが、試行錯誤してみてください。

行動規範の内容に同意します