地元の消防団で「消火栓マップ」を作成し運用しているのですが、マーカーをクリック(orタップ)した時に出てくる吹き出しを吹き出し内にある「☓」をクリックしなくても、地図上の任意の場所をクリック(orタップ)することで消したいのですが、上手くいきません。
以前はFusiontableレイヤーを採用していたのですが、2019年12月に廃止されるとのことで、もともとあったデータをkmlファイルにして、kmlレイヤーで再設定した経緯があります。以前のFusiontableレイヤーでは上手くできていました。
infowindow の open や close の表記がダメなのだと思い、いろいろ試みたのですが行き詰まってしまいました。
アドバイス頂ければ助かります。よろしくお願い致します。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>消火栓マップ</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; width:300px; top: 6%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; z-index: 5; background-color: #fff; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 28px; } </style> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> <div id="floating-panel"> <select id="mode" onchange="calcRoute();"> <option value="DRIVING">車</option> <option value="WALKING">歩き</option> </select> <select id="fromAddress" onchange="calcRoute();"> <option value="34.790348, 134.719083">1支部</option> <option value="34.788139, 134.723404">2支部</option> <option value="34.796028, 134.723404">3支部</option> <option value="34.801071, 134.717789">4支部</option> <option value="34.800423, 134.706573">5支部</option> <option value="34.805237, 134.698410">6支部</option> </select> <form action="#" onsubmit="calcRoute(fromAddress.value, this.toAddress.value); return false"> <font size="3"color="#ff0000"><b>火災発生住所</b></font> ⇒ <input type="text" size="10" id="toAddress" name="to" value="" /> <input type="button" value="検索" onclick="calcRoute()"> </form> </div> </body> <!--[if lt IE 9]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=【APIキー】"></script> <script type="text/javascript"> var rendererOptions = {draggable: true}; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var map, infowindow; function initialize() { infowindow = new google.maps.InfoWindow(); var myLatlng = new google.maps.LatLng(34.796831, 134.714427); var myOptions = { zoom : 15, mapTypeId : google.maps.MapTypeId.SATELLITE, center : myLatlng, }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var Layer = new google.maps.KmlLayer({ url: 'URL.kml', map: map, suppressInfoWindows: false,//true を指定するとマーカーをクリックしても吹き出しが表示されない! preserveViewport: true //Zoomとセンターが正常になった∵KMLを読み込むとZoom、Centerが効かなくなる! }); google.maps.event.addListener(layer, "click", function() { infowindow.setOptions({ position : evt.latLng, content : evt.infoWindowHtml, pixelOffset : evt.pixelOffset }); infowindow.open(map); }); google.maps.event.addListener(map, "click", function() { infowindow.close(); }); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); google.maps.event.addListener(directionsDisplay, "directions_changed", function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute(); } function calcRoute(fromAddress, toAddress) { var selectedMode = document.getElementById("mode").value; var fromAddress = document.getElementById("fromAddress").value; var toAddress = document.getElementById("toAddress").value; var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]}; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { func(response); } }); } // ラインオブジェクト var lineObj = new google.maps.Polyline({ strokeColor: '#00FF00', strokeOpacity: 0.9, strokeWeight: 5 }); // 出発地マーカーオブジェクト var startMarker = new google.maps.Marker({ icon: 'URL.png' }); // 目的地マーカーオブジェクト var endMarker = new google.maps.Marker({ icon: 'URL.png' }); function func(response) { var routes = response.routes[0]; lineObj.setPath(routes.overview_path); lineObj.setMap(map); var legs = routes.legs[0]; startMarker.setPosition(legs.start_location); startMarker.setMap(map); endMarker.setPosition(legs.end_location); endMarker.setMap(map); map.fitBounds(routes.bounds); // 追記(自動的に...) } </script> </html>
あなたの回答
tips
プレビュー