質問編集履歴

2 追記しました

Tats.N

Tats.N score 56

2016/08/30 05:19  投稿
Google maps apiのInfoWindow上にあるボタンを押すとモーダルウインドウが表示されるようにしたい
こんにちは。いつもありがとうございます
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
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> -->
    <!-- <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_lBe2BBKUMic9F1rgYXvNtK6D0EIGv9o&signed_in=true&callback=initMap"></script> -->
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="style.css">
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyA_lBe2BBKUMic9F1rgYXvNtK6D0EIGv9o"></script>
   <script type="text/javascript" src="js/infobox.js"></script>
   <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
   <script type="text/javascript" src="js/jquery.popupoverlay.js"></script>
   <script type="text/javascript">
   
     function initialize() {
       var secheltLoc = new google.maps.LatLng(00.000000,00.000000);
      var myMapOptions = {
          zoom: 15
         ,center: secheltLoc
         ,mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
       
       var icon = "images/icon.png"
       var marker = new google.maps.Marker({
         map: theMap,
         position: new google.maps.LatLng(00.000000,00.000000),
         visible: true,
         icon: icon
       });
       var viewport = {
           width : $(window).width(),
           height : $(window).height()
       };
       var infoWindowHtml =
       "<div id='content_wrapper'>"
           +"<div id='infoWin'>"
               +"<div>"
                   +"<h1 style=''>Header</h1>"
                   +"<blockquote>Hi There</blockquote>"
               +"</div>"
               +"<a href='mailto:test@test.com'>"
                   +"<div id='mail_icon'>"
                   +"</div>"
               +"</a>"
           +"</div>"
           +"<button id='more_button'></button>"
           
       +"</div> <!-- Close content_wrapper -->"
     
       
       var pxOffX;
       var pxOffY;
       var mobileWidth = 768;
       var infoWinWidth, infoWinHeight;
       if(viewport.width < mobileWidth){
           pxOffX = -(viewport.width/2); //it moves infowindow when you move the map
           pxOffY = -(viewport.height/2.7);
           infoWinWidth = viewport.width
           infoWinHeight = viewport.height/4;
           // document.getElementById("infoWin").style.fontSize = "200%";
       }else if(viewport.width >= mobileWidth){
           pxOffX = -310;
           pxOffY = -160;
           infoWinWidth = 280
           infoWinHeight = infoWinWidth *0.65; //It is calculating height
       }
       var myOptions = {
          content: infoWindowHtml
         ,disableAutoPan: false
         ,maxWidth: 0
         ,pixelOffset: new google.maps.Size(pxOffX, pxOffY) //You can fix postion of info window
         ,zIndex: null
         ,boxStyle: {
           background: "url('images/white.jpg')"
           ,opacity: 0.90
           ,width: infoWinWidth.toString() + "px"
           ,height: infoWinHeight.toString() + "px" //This is the width of the window.
          }
         ,infoBoxClearance: new google.maps.Size(1, 1)
         ,isHidden: false
         ,pane: "floatPane"
         ,enableEventPropagation: false
       };
       // console.log(myOptions.boxStyle.width);
       //Add icon click function
       google.maps.event.addListener(marker, "click", function (e) {
         ib.open(theMap, this);
         map.setCenter(marker.getPosition());
       });
       console.log("marker.getPosition() = " + marker.getPosition());
       var ib = new InfoBox(myOptions);
       ib.open(theMap, marker);
       theMap.panBy(pxOffX/2,pxOffY/2);
     }
   </script>
   <title>This is a title.</title>
 </head>
 <body onload="initialize()">
   <div id="map_canvas" style="width: 100%; height: 100%"></div>
       <div id='more'>
           </div>
               <h2>List</h2>
               <ul>
               <li>1</li>
                   <li>2</li>
                   <li>3</li>
               </ul>
           </div>
       </div>
       <script>
                   var moreButton = document.getElementById('more_button')
                   moreButton.onclick = function(){
                       $('#more').popup('show');
                       console.log("Hey!");
                   }
       </script>
 </body>
</html>
```
  • JavaScript

    25828 questions

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

  • HTML

    15271 questions

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

  • CSS

    10304 questions

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

Tats.N

Tats.N score 56

2016/08/30 04:45  投稿
Google maps apiのInfoWindow上にあるボタンを押すとモーダルウインドウが表示されるようにしたい
こんにちは。いつもありがとうございます
Google Maps APIで表示させたInfoWindow内の<button>をクリックした時に#moreのリストを表示させたいのですが、
Uncaught TypeError: Cannot set property 'onclick' of null
というエラーが出ます。
window.onloadで囲っても見たのですが、それでもうまくいかず質問させていただきました。
ご教授願います。
```html
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> -->
    <!-- <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_lBe2BBKUMic9F1rgYXvNtK6D0EIGv9o&signed_in=true&callback=initMap"></script> -->
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" type="text/css" href="style.css">
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyA_lBe2BBKUMic9F1rgYXvNtK6D0EIGv9o"></script>
   <script type="text/javascript" src="js/infobox.js"></script>
   <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
   <script type="text/javascript" src="js/jquery.popupoverlay.js"></script>
   <script type="text/javascript">
   
     function initialize() {
       var secheltLoc = new google.maps.LatLng(35.666123,139.733916);
       var secheltLoc = new google.maps.LatLng(00.000000,00.000000);
      ///////////略
      var myMapOptions = {
          zoom: 15
         ,center: secheltLoc
         ,mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
       
       var icon = "images/icon.png"
       var marker = new google.maps.Marker({
         map: theMap,
         position: new google.maps.LatLng(00.000000,00.000000),
         visible: true,
         icon: icon
       });
       var viewport = {
           width : $(window).width(),
           height : $(window).height()
       };
       var infoWindowHtml =
       "<div id='content_wrapper'>"
           +"<div id='infoWin'>"
               +"<div>"
                   +"<h1 style=''>Header</h1>"
                   +"<blockquote>Hi There</blockquote>"
               +"</div>"
               +"<a href='mailto:test@test.com'>"
                   +"<div id='mail_icon'>"
                   +"</div>"
               +"</a>"
           +"</div>"
           +"<button id='more_button'></button>"
           
       +"</div> <!-- Close content_wrapper -->"
      /////////略
     
       
       var pxOffX;
       var pxOffY;
       var mobileWidth = 768;
       var infoWinWidth, infoWinHeight;
       if(viewport.width < mobileWidth){
           pxOffX = -(viewport.width/2); //it moves infowindow when you move the map
           pxOffY = -(viewport.height/2.7);
           infoWinWidth = viewport.width
           infoWinHeight = viewport.height/4;
           // document.getElementById("infoWin").style.fontSize = "200%";
       }else if(viewport.width >= mobileWidth){
           pxOffX = -310;
           pxOffY = -160;
           infoWinWidth = 280
           infoWinHeight = infoWinWidth *0.65; //It is calculating height
       }
       var myOptions = {
          content: infoWindowHtml
         ,disableAutoPan: false
         ,maxWidth: 0
         ,pixelOffset: new google.maps.Size(pxOffX, pxOffY) //You can fix postion of info window
         ,zIndex: null
         ,boxStyle: {
           background: "url('images/white.jpg')"
           ,opacity: 0.90
           ,width: infoWinWidth.toString() + "px"
           ,height: infoWinHeight.toString() + "px"　//This is the width of the window.
          }
         ,infoBoxClearance: new google.maps.Size(1, 1)
         ,isHidden: false
         ,pane: "floatPane"
         ,enableEventPropagation: false
       };
       // console.log(myOptions.boxStyle.width);
       //Add icon click function
       google.maps.event.addListener(marker, "click", function (e) {
         ib.open(theMap, this);
         map.setCenter(marker.getPosition());
       });
       console.log("marker.getPosition() = " + marker.getPosition());
       var ib = new InfoBox(myOptions);
       ib.open(theMap, marker);
       theMap.panBy(pxOffX/2,pxOffY/2);
     }
   </script>
   <title>This is a title.</title>
 </head>
 <body onload="initialize()">
   <div id="map_canvas" style="width: 100%; height: 100%"></div>
       <div id='more'>
           </div>
               <h2>List</h2>
               <ul>
               <li>1</li>
                   <li>2</li>
                   <li>3</li>
               </ul>
           </div>
       </div>
       <script>
                   var moreButton = document.getElementById('more_button')
                   moreButton.onclick = function(){
                       $('#more').popup('show');
                       console.log("Hey!");
                   }
       </script>
 </body>
</html>
```
  • JavaScript

    25828 questions

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

  • HTML

    15271 questions

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

  • CSS

    10304 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る