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

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

ただいまの
回答率

88.77%

Google map API で表示された吹き出しを任意の場所クリックで消したい!

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 342

somon

score 13

地元の消防団で「消火栓マップ」を作成し運用しているのですが、マーカーをクリック(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>&nbsp;⇒ <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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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