こんにちは。いつもありがとうございます
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&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>