質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20383questions

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

  • HTML

    11474questions

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

  • CSS

    7536questions

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

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,620

Tats.N

score 48

こんにちは。いつもありがとうございます
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になるみたいなのですが、この場合どうすればいいですか?

<!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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/30 03:42

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

    キャンセル

  • Tats.N

    2016/08/30 04:49

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

    キャンセル

  • Kosuke_Shibuya

    2016/08/30 05:02 編集

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

    キャンセル

  • Tats.N

    2016/08/30 05:20

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

    キャンセル

回答 1

0

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

google.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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20383questions

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

  • HTML

    11474questions

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

  • CSS

    7536questions

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