List

\r\n\t\t\t\t

\r\n\t\t\t \t

\r\n\t\t\t\t

回答率: 85.29%

質問するログイン新規登録

トップ JavaScriptに関する質問

Q&A

1回答

5110閲覧

Google maps apiのInfoWindow上にあるボタンを押すとモーダルウインドウが表示されるようにしたい

Tats.N

総合スコア62

0グッド

0クリップ

投稿2016/08/29 18:31

編集2016/08/29 20:19

こんにちは。いつもありがとうございます
Google Maps APIで表示させたInfoWindow内の<button>をクリックした時に#moreのリストを表示させたいのですが、
Uncaught TypeError: Cannot set property 'onclick' of null
というエラーが出ます。
window.onloadで囲っても見たのですが、それでもうまくいかず質問させていただきました。
ご教授願います。

使っているInfoboxはinfoWindowをカスタムするためのもので
https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js

jquery.popupoverlay.jsでモーダルウインドウを出そうとしています
https://github.com/vast-engineering/jquery-popup-overlay/blob/gh-pages/jquery.popupoverlay.js

*追記
どうもvar infoWindowHTMLで記入したHTMLのIDやエレメントをbody内のscriptで呼び出そうとしたときにnullになるみたいなのですが、この場合どうすればいいですか？

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> -->
6
7     <!-- <script async defer
8        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_lBe2BBKUMic9F1rgYXvNtK6D0EIGv9o&signed_in=true&callback=initMap"></script> -->
9    <meta name="viewport" content="width=device-width,initial-scale=1">
10    <link rel="stylesheet" type="text/css" href="style.css">
11    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyA_lBe2BBKUMic9F1rgYXvNtK6D0EIGv9o"></script> 
12
13    <script type="text/javascript" src="js/infobox.js"></script>
14    <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
15    <script type="text/javascript" src="js/jquery.popupoverlay.js"></script>
16    <script type="text/javascript">
17    
18
19      function initialize() {
20        var secheltLoc = new google.maps.LatLng(00.000000,00.000000);
21
22       var myMapOptions = {
23           zoom: 15
24          ,center: secheltLoc
25          ,mapTypeId: google.maps.MapTypeId.ROADMAP
26        };
27        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
28
29        
30		var icon = "images/icon.png"
31
32        var marker = new google.maps.Marker({
33          map: theMap,
34          position: new google.maps.LatLng(00.000000,00.000000),
35          visible: true,
36          icon: icon
37        });
38
39        var viewport = {
40    		width  : $(window).width(),
41    		height : $(window).height()
42		};
43
44        var infoWindowHtml = 
45        "<div id='content_wrapper'>"
46	        +"<div id='infoWin'>"
47		        +"<div>"
48		        	+"<h1 style=''>Header</h1>"
49		        	+"<blockquote>Hi There</blockquote>"
50		        +"</div>"
51		        +"<a href='mailto:test@test.com'>"
52			        +"<div id='mail_icon'>"
53			        +"</div>"
54		        +"</a>"
55	        +"</div>"
56		    +"<button id='more_button'></button>"
57		    
58		+"</div> <!-- Close content_wrapper -->"
59
60       
61		
62
63
64
65        var pxOffX;
66        var pxOffY;
67
68        var mobileWidth = 768;
69        var infoWinWidth, infoWinHeight;
70
71        if(viewport.width < mobileWidth){
72        	pxOffX = -(viewport.width/2); //it moves infowindow when you move the map
73        	pxOffY = -(viewport.height/2.7);
74        	infoWinWidth = viewport.width
75        	infoWinHeight = viewport.height/4;
76        	// document.getElementById("infoWin").style.fontSize = "200%";
77        }else if(viewport.width >= mobileWidth){
78        	pxOffX = -310;
79        	pxOffY = -160;
80        	infoWinWidth = 280
81        	infoWinHeight = infoWinWidth *0.65; //It is calculating height 
82        }
83
84        var myOptions = {
85           content: infoWindowHtml
86          ,disableAutoPan: false
87          ,maxWidth: 0
88          ,pixelOffset: new google.maps.Size(pxOffX, pxOffY) //You can fix postion of info window
89          ,zIndex: null
90          ,boxStyle: { 
91            background: "url('images/white.jpg')"
92            ,opacity: 0.90
93            ,width: infoWinWidth.toString() + "px"
94            ,height: infoWinHeight.toString() + "px" //This is the width of the window.
95           }
96          ,infoBoxClearance: new google.maps.Size(1, 1)
97          ,isHidden: false
98          ,pane: "floatPane"
99          ,enableEventPropagation: false
100        };
101
102        // console.log(myOptions.boxStyle.width);
103
104        //Add icon click function
105        google.maps.event.addListener(marker, "click", function (e) {
106          ib.open(theMap, this);
107          map.setCenter(marker.getPosition());
108        });
109        console.log("marker.getPosition() = " + marker.getPosition());
110
111        var ib = new InfoBox(myOptions);
112
113        ib.open(theMap, marker);
114
115        theMap.panBy(pxOffX/2,pxOffY/2);
116      }
117    </script>
118
119    <title>This is a title.</title>
120  </head>
121  <body onload="initialize()">
122
123    <div id="map_canvas" style="width: 100%; height: 100%"></div>
124
125	    <div id='more'>
126			</div>
127				<h2>List</h2>
128				<ul>
129				<li>1</li>
130			    	<li>2</li>
131			    	<li>3</li>
132				</ul>
133			</div>
134		</div>
135		<script>
136		    		var moreButton = document.getElementById('more_button')
137		    		moreButton.onclick = function(){
138		    			$('#more').popup('show');
139		    			console.log("Hey!");
140					}
141		</script>
142
143  </body>
144
145</html>

kei344

2016/08/29 18:42

InfoWindowとマーカー周りは略さないほうが良いと思います。

Tats.N

2016/08/29 19:49

ありがとうございます。略さずに書きました。

退会済みユーザー

2016/08/29 20:03 編集

infobox.js、jquery.popupoverlay.js がなんらかのプラグインならば、その配布元のURLを。あなたが書いたものならばそのソースを記述してください。

Tats.N

2016/08/29 20:20

ご指摘ありがとうございます。ソースも追加しました。

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

回答1件

1件だけだったらこういう感じとか。（ib.div_で情報ウィンドウのDOMが取得できると思うが未テスト）

JavaScript
1google.maps.event.addDomListener(ib.div_.querySelector( ".myClass" ), 'click', function(e) {  } );

複数件だったら下記記事のようにする感じでいけるとは思います。

【Androg: 【Google Maps API v3】情報ウィンドウをクリックした時、何か処理させるには？】
http://androg.seesaa.net/article/317136459.html

【Trigger event with infoWindow or InfoBox on click Google Map API V3 - Stack Overflow】
http://stackoverflow.com/questions/12102598/trigger-event-with-infowindow-or-infobox-on-click-google-map-api-v3

投稿2016/08/31 08:47

kei344

総合スコア69643

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.29%

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

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

質問する

List

関連した質問