【JavaScript・jQuery】google Map APIが表示されない

現在レスポンシブのダミーコンテンツを独学で勉強しています。
カフェ検索のようなサイトを作っているのですが、
JavaScript部分かjQuery部分かで問題が発生いたしました。
（どちらのエラーか切り分けができず）

できた事

Google APIを利用して、複数ピンのあるmap表示
ハンバーガーのナビゲーション（開くとTOP、プライバシーポリシー、about、お問い合わせ）

map表示のためには、下記が必要なので、htmlほhead部分に記述しました。
こちらはうまくできました。

html
1  <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=（私のキー）&callback=initMap">
2  </script>

ハンバーガーのナビゲーションには、下記が必要なのでhtmlほhead部分に記述しました。
こちらもうまくできました。

jQuery
1  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

うまく出来ない所

上記、1,2は単体だと表示も動作もされるのですが、
両方をhtmlに記述すると、ハンバーガーをクリックした後、
表示画面が一瞬出て自動的に消えてしまいます。

コードは下記をhtml部分に記述しました。

JavaScript
1  <script>
2    $(function() {
3      $('#nav_toggle').click(function() {
4        $("header").toggleClass('open');
5        $("nav").fadeToggle(500);
6      });
7    });
8  </script>

参考にしたサイト

▼最初はこちらをやりたかったのですが、難しかったので
https://tastytable.jp/

▼こちらでトライしています。
https://app.lunch-pass.jp/

行き詰ってしまいましたので、ご教授いただけますと幸いです。

再追記

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <meta name="description" content="あああああ">
8  <title>ああああ</title>
9  <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=（キー）&callback=initMap">
10  </script>
11  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12  <script type="text/javascript" src="../js/javascript03.js"></script>
13
14  <!-- menu -->
15  <script>
16    $(function() {
17      $('#nav_toggle').click(function() {
18        $("header").toggleClass('open');
19        $("nav").fadeToggle(500);
20      });
21    });
22  </script>
23
24  <!-- faq -->
25  <script>
26    $(function() {
27      $('.faq_block__list_a').hide();
28      $('.faq_block__list_q').click(function() {
29        $(this).toggleClass("open");
30        $(this).next(".faq_block__list_a").slideToggle();
31      });
32    });
33  </script>
34</head>
35
36<body>
37  <header>
38    <div class="global_menu">
39      <div id="nav_toggle">
40        <div>
41          <span></span>
42          <span></span>
43          <span></span>
44        </div>
45      </div>
46      <nav>
47        <ul>
48          <li><a href="index.html">TOP</a></li>
49          <li><a href="about.html" target="_blank">About</a></li>
50          <li><a href="privacy.html" target="_blank">プライバシーポリシー</a></li>
51          <li><a href="contact.html">お問い合わせ</a></li>
52        </ul>
53      </nav>
54    </div>
55  </header>
56
57  <main>
58    <section>
59      <div class="main_visual">
60        <h1 class="main_visual__logo">あああ</h1>
61        <p class="main_visual__sub_text">あああ</p>
62      </div>
63    </section>
64    <section>
65      <div class="about_block">
66        <h2 class="about_block__title">あああ</h2>
67        <ul class="about_block__list">
68          <li class="about_block__list_block">
69            <p class="about_block__list_block-title">あああ</p>
70            <p class="about_block__list_block-text">あああ</p>
71            <p class="about_block__list_block-image"><img src="../img/bnr01.png" alt="あああ"></p>
72            <p class="about_block__list_block-subtext">あああ</p>
73          </li>
74          <li class="about_block__list_block">
75            <p class="about_block__list_block-title">あああ</p>
76            <p class="about_block__list_block-text">あああ</p>
77            <p class="about_block__list_block-image"><img src="../img/bnr02.png" alt="あああ"></p>
78          </li>
79          <li class="about_block__list_block">
80            <p class="about_block__list_block-title">あああ</p>
81            <p class="about_block__list_block-text">あああ</p>
82            <p class="about_block__list_block-image"><img src="../img/bnr03.png" alt="あああ"></p>
83          </li>
84        </ul>
85      </div>
86    </section>
87
88    <section>
89      <div class="map_block">
90        <div id="map"></div>
91      </div>
92    </section>
93
94    <section>
95      <div class="faq_block">
96        <h2 class="faq_block__title">あああ</h2>
97        <dl class="faq_block__list">
98          <dt class="faq_block__list_q">あああ</dt>
99          <dd class="faq_block__list_a" style="display: none;">あああ</dd>
100        </dl>
101      </div>
102    </section>
103  </main>
104
105  <aside>
106    <div class="bg_decoration"></div>
107  </aside>
108
109  <footer id="footer">
110    <div class="footer_block">
111      <ul class="footer_block__link_list">
112        <li><a href="about.html" target="_blank">About Us</a></li>
113        <li><a href="privacy.html" target="_blank">Privacy policy</a></li>
114        <li><a href="contact.html">Contact</a></li>
115      </ul>
116      <p class="copyright">あああ</p>
117    </div>
118  </footer>
119</body>
120</html>
121

JavaScript
1//ピンの表示
2function initMap() {
3  var locations = [
4    ['<div class="comment"><a href="allarea.html#target01">あああ</a></div>', 座標, 座標],
5    ['<div class="comment"><a href="allarea.html#target02">あああ→</a></div>', 座標, 座標],
6  ];
7
8  var map = new google.maps.Map(document.getElementById('map'), {
9    zoom: 16,
10    gestureHandling: 'greedy', //PC：スクロールでズーム  モバイル：指1本のスクロールで地図移動
11    mapTypeControl: false, //マップタイプ コントロール
12    fullscreenControl: true, //全画面表示コントロール
13    streetViewControl: true, //ストリートビュー コントロール
14    zoomControl: true, //ズーム コントロール
15    center: new google.maps.LatLng(座標, 座標), //MAP初期値
16    mapTypeId: google.maps.MapTypeId.ROADMAP
17  });
18
19  var infowindow = new google.maps.InfoWindow;
20  var marker, i;
21
22  for (i = 0; i < locations.length; i++) {
23    marker = new google.maps.Marker({
24      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
25      map: map
26    });
27
28    google.maps.event.addListener(marker, 'click', (function (marker, i) {
29      return function () {
30        infowindow.setContent(locations[i][0]);
31        infowindow.open(map, marker);
32      }
33    })(marker, i));
34  }
35
36  // スクロールすると戻るボタンが現れる
37  $(function() {
38    var appear = false;
39    var pagetop = $('#page_top');
40    $(window).scroll(function () {
41      if ($(this).scrollTop() > 100) {  //100pxスクロールしたら
42        if (appear == false) {
43          appear = true;
44          pagetop.stop().animate({
45            'right': '50px' //右から50pxの位置に
46          }, 300); //0.3秒かけて現れる
47        }
48      } else {
49        if (appear) {
50          appear = false;
51          pagetop.stop().animate({
52            'right': '-50px' //右から-50pxの位置に
53          }, 300); //0.3秒かけて隠れる
54        }
55      }
56    });
57    pagetop.click(function () {
58      $('body, html').animate({ scrollTop: 0 }, 500); //0.5秒かけてトップへ戻る
59      return false;
60    });
61  });
62  
63 //menu
64    $(function(){
65    $('#nav_toggle').click(function(){
66      $("header").toggleClass('open');
67      $("nav").fadeToggle(500);
68    });
69  });
70}
71

kei344

2018/12/27 08:42

HTMLとCSSと、関数initMap定義部分のJavaScriptを質問文に追記してください。

Lhankor_Mhy

2018/12/27 09:15

『google Map APIが表示されない』というタイトルですが、『ハンバーガーをクリックした後、表示画面が一瞬出て自動的に消えてしまいます』とのご説明があり、これはハンバーガーメニューが消えているように読みました。ハンバーガーメニューの中に地図があるのですか？　それとも、『地図が表示されず、さらにハンバーガーメニューも消えてしまう』ということですか？

roro_mochi

2018/12/27 09:21 編集

すみません。掲題が違っていました！ ▼問題点 --------------------------- 地図とハンバーガーメニューは表示されている。ハンバーガーメニューをクリックしたら、表示が一瞬で消えてしまう。下記を消したら、ハンバーガーメニューの問題は解消されますが、当然地図は表示されない。 <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=（私のキー）&callback=initMap"> </script> ソースは少し整理しないととても長いので、後ほどになりますが投稿させていただけたらと思います。

Lhankor_Mhy

2018/12/27 09:26

なるほど。私も、kei344さんと同じものが見たいです。おそらく、クリックイベントを重複して登録しているのではないかと思うのですが……

roro_mochi

2018/12/27 09:28

Lhankor_Mhyさまいつもありがとうございます。検索したらLhankor_Mhyさまと同じようなアドバイスがあったので、試行錯誤してみたのですが。。。解決ができませんでした。もしクリックイベント重複で見つけられていませんでしたら大変申し訳ないのですがご指摘いただけると幸いです。

Lhankor_Mhy

2018/12/27 09:34

kei344さんと同じように、initMapが怪しいと思っています。ご提示いただけますか？

kei344

2018/12/27 09:35

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文にコードブロックで追記することをお勧めします。

roro_mochi

2018/12/27 09:44

お待たせいたしました。質問を更新いたしました。至らずこちらにコードを投稿してしまい、度々教えていただきありがとうございます！

Lhankor_Mhy

2018/12/27 09:49

更新されていないようですね。 teratailの質問更新はちょっとデザインが悪くて、更新したつもりになってしまうんですよね。

roro_mochi

2018/12/27 09:54

度々申し訳ありません。今度は更新されているかと思うのですがいがかでしょうか？お手数をお掛けします。

Lhankor_Mhy

2018/12/27 09:56

initMapが閉じていないようですが、この続きはないのですか？

roro_mochi

2018/12/27 13:45

遅くなりすみません。閉じタグはありました。貼り付けミスでした。

Lhankor_Mhy

2018/12/28 01:41

ご提示のコードでサンプルを作りましたが、問題が再現しませんでした。 http://jsfiddle.net/Lhankor_Mhy/frjz4a6w/ 質問者様の環境で、上記URLのコードは動作しますでしょうか？動作しないのであれば、環境の問題かと思います。質問者様の環境をご提示ください。動作するのであれば、ご提示いただいていない部分に問題があります。問題が再現するコードをご提示ください。

roro_mochi

2018/12/28 02:26

ありがとうございます！ご親切にサンプルまでいただき恐縮です（年末のお忙しい中にありがとうございます）ご提示いただきましたコードで実行したところ動かなかったため、 ■htmlの24行目のdivを削除 ■htmlのhead部分に下記を追加 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> こちらでサンプルの通り動きました！コード(html、JS）を追記いたしました。

Lhankor_Mhy

2018/12/28 03:15

ご解決された、ということでしょうか？それでしたら、自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself

roro_mochi

2018/12/28 03:25

それが解決していなくて。Lhankor_Mhyさまのコードのみ新規ファイルに記述したところ動きましたが、自分のファイルでは動かなかったです。

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

回答1件

ベストアンサー

2箇所に同じコードがあるのが原因です。これによりクリックイベントが重複し、1回のクリックで2回分動作します。

HTML
1  <!-- menu -->
2  <script>
3    $(function() {
4      $('#nav_toggle').click(function() {
5        $("header").toggleClass('open');
6        $("nav").fadeToggle(500);
7      });
8    });
9  </script>

js
1 //menu
2    $(function(){
3    $('#nav_toggle').click(function(){
4      $("header").toggleClass('open');
5      $("nav").fadeToggle(500);
6    });
7  });

解決方法は、片方を削除することです。

投稿2018/12/28 03:37

Lhankor_Mhy

総合スコア36074

roro_mochi

2018/12/28 06:25

ありがとうございます！トグルがうまく表示されるようになりました！！！ 2つも記述しておりお手数をお掛けいたしました。 MAP部分やトグルは読み込み（？）に時間がかかるようなので更新したりキャッシュ削除をするとMAP表示がされるのですが、JavaScriptは外部ファイルに記述すべきだったでしょうか。