グーグルマップの吹き出しの内のボタンからモーダルが出ません。

前提・実現したいこと

JSの勉強のために、簡易的なJSでのアプリケーションを作っております。
グーグルマップAPIを使って、特定エリアにピンを立て、ピンをクリックすると吹き出しが出ます。
吹き出しの中に、ボタンがあって、そのボタンを押すと、JSのオンクリックが起動し、モーダルが出るようにしたいです。

発生している問題・エラーメッセージ

吹き出し内のボタンをクリックしても、モーダルが出現しません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>JavaScript Sample</title>
6    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
9    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
10    <style type="text/css">
11        #map {
12        height: 500px;
13        }
14        .modal {
15        display: none;
16        }
17        #slider{
18        position: center;
19        }
20    </style>
21</head>
22<body>
23
24    <div class="modal">
25        <div>ここにモーダルで表示させたいものをいれます。</div>
26    </div>
27    
28    <div>
29        <h2>今日の天気</h2>
30        <p>
31        <small>現在時刻:</small>
32        <span id="time"></span>
33        <small>場所:</small>
34        <span id="here"></span> 
35        <small>現在の気温:</small>
36        <span id="temp"></span> 
37        <span id="icon"></span> 
38        </p>
39    </div>
40
41    <div class="slider" >
42        <li><img src="source/hogehoge.jpg"/></li>
43        <li><img src="source/hoge.jpg"/></li>
44    </div>
45    
46    <p id="map"></p>
47</body>
48<script src="sample/sample.js" type="text/javascript" charset="utf-8"></script> 
49<script src="https://maps.googleapis.com/maps/api/js?key=eeeeeee=initMap"></script>
50
51</html>
52

JS
1$(function(){
2    $('.slider').bxSlider({
3        auto: true,
4        slideWidth: 300,
5        speed: 900,
6        mode: 'fade',
7        nextText: true
8    });
9});
10  
11
12
13$(function() {
14$.ajax({
15    url: 
16    cache: false,
17    success:function (weatherdata){
18  // img insert
19  var img = document.createElement('img');
20  img.src = "http://openweathermap.org/img/w/"+weatherdata.weather[0].icon+".png";
21  img.alt = weatherdata.weather[0].main;
22  document.getElementById('icon').appendChild(img);
23  // ＝摂氏＋＝K
24  document.getElementById('temp').innerHTML = Math.floor(weatherdata.main.temp - 273.15);
25   
26  // 位置
27  document.getElementById('here').innerHTML = weatherdata.name;
28   
29  }
30  });
31});
32setInterval(function(){
33    var date = new Date();
34    var time ;
35      time = date.getFullYear()+'.';
36      time += (date.getMonth()+1)+'.';
37      time += (date.getDate())+'.';
38      time += date.getHours()+'.';
39      time += date.getMinutes()+'.';
40      time += date.getSeconds(); 
41     document.getElementById('time').innerHTML = time;
42    },1000);
43
44
45function initMap() {
46    var data = [
47        { lat:　36.204824, lng: 138.252924, title: "日本" ,content: '<div class="infobox" id="japan">" <div class="inner"><div class="header"><h3>日本</h3></div><div class="footer"><button class="modalBtn" data-modalIndex="1" type="button">Detail</button></div>'},
48        // "<img src=source/itprooffice.png>"},
49        { lat:　51.813707, lng: 0, title: "イギリス" ,content:'<div class="infobox" id="england">" <div class="inner"><div class="header"><h3>イギリス</h3></div><div class="footer"><button class="modalBtn" data-modalIndex="1" type="button">Detail</button></div>'},
50       ];
51
52    var infoWindow=[];
53    var marker=[];
54    var map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む
55        center: data[0],
56    zoom: 2.5 // 地図のズームを指定
57    });
58    for (var i = 0; i < data.length; i++) {
59        markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};
60        marker[i] = new google.maps.Marker({
61        position: markerLatLng,
62        map: map,
63        animation: google.maps.Animation.BOUNCE
64        });
65        infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
66            content: data[i]['content']
67        });
68        markerEvent(i); 
69    }
70
71    function markerEvent(i) {
72        marker[i].addListener('click', function() { // マーカーをクリックしたとき
73        infoWindow[i].open(map, marker[i]); // 吹き出しの表示
74        });
75    }
76}
77$(function(){
78    
79    var modal = document.getElementById('modal');
80    $('.modalBtn').on('click', function(e) {
81                modal.addClass('is-active');
82      });
83})

試したこと

コンソールで、吹き出し内のボタンの情報を確認しましたが、class="modalBtn" data-modalIndex="1"は期待通り入っています。　

JS初心者で、まだ、スクリプトタグの位置によって、挙動が変わることへの理解ができていません。
今回のモーダルが出ないのも、このことが原因でしょうか？
宜しくお願い致します。

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

回答2件

var modal = document.getElementById('modal');　ではなく、
var modal = document.getElementsByClassName('modal')[0];　です。

投稿2018/05/03 06:36

退会済みユーザー

総合スコア0

ベストアンサー

これでどうでしょう。

js
1$( 'body' ).on( 'click', '.modalBtn', function( e ) {
2    modal.addClass( 'is-active' );
3} );

投稿2018/05/03 05:42

kei344

総合スコア69643

maroooooooon

2018/05/03 05:52

ご回答ありがとうございます！教えて頂いたコードで試してみましたが、モーダルは出ていません、、、

kei344

2018/05/03 06:30

そもそもaddClassが無いですね。 $('#modal').addClass('is-active'); こうしてみてください。ただ、提示のコードの範囲で 'is-active'をクラスに指定したからといってモーダルが表示されると思えませんが、どこか別に規定しているのでしょうか。

kei344

2018/05/03 06:40

あ、クラスですね。 $('.modal').addClass('is-active');

maroooooooon

2018/05/06 09:17

ありがとうございます！頂いたアドバイスの元、試行錯誤した結果、動くようになりました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

今日の天気

日本

イギリス

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

試したこと

関連した質問