GooglemapV3 infowindow closeclickイベントが起動しない

Question

以下のコードは、マーカーのクリック時にGoogleマップでinfowindowを表示するために使用されています。しかし、何らかの理由で情報ウィンドウの 'closeclick'イベントが機能していないためです。それ以前は動作していましたが、Ajax呼び出しのマップをリフレッシュした後に、インフォウィンドウオブジェクトなどのオブジェクトを再オープンする必要があります。 1分後に地図が更新され、Ajax呼び出しで閉じられないと情報ウィンドウが開いたままである必要があります。

地図上にポリラインを描画し、Googleマップ上に描画するすべての点にインフォウィンドウを開き、同様の要件が上記のようなインフォボックスオブジェクトにも適用されます。

 $(".mainDiv").each(function() { 
    google.maps.event.trigger(map, 'click'); 
    if (PlayBackDevices.indexOf(removeSpaces($(this).find(".deviceid").html()).trim()) > -1) { 
      var image = new google.maps.MarkerImage($(this).find(".imagepath").html()); 
      myLatLng = new google.maps.LatLng($(this).find(".latitude").html(), $(this).find(".longitude").html()); 
      var beachMarker = new MarkerWithLabel({ 
       position: myLatLng, 
       map: map, 
       icon: image, 
       title: $(this).find(".deviceName").html().trim(), 
       labelContent: $(this).find(".deviceName").html().trim() 
      }); 
      markers.push(beachMarker); 
      var imgPath = trailImagePath + trailColor.trim() + ".png"; 
      var beachMarkerTemp = new RichMarker({ 
       position: myLatLng, 
       map: map, 
       draggable: false, 
       flat: true, 
       anchor: RichMarkerPosition.BOTTOM//, 
      }); 
      i = i + 1; 
      oms.addListener('click', function (beachMarker) { 
       infoWindow.close(); 
       infoWindowDevicePoints.length = 0; 
       if (deviceName.trim() == beachMarker.title.trim()) { 
        $.ajax({ 
         type: "Post", 
         url: "/Home/CommonLevel2Information", 
         data: { DeviceId: 101 }, 
         async: true, 
         dataType: "html", 
         cache: false, 
         success: function (result) { 
          result = createInfo('', result + '<br/><a href="' + linkToNextLevel + '" title="Click to view DeviceDetail"><%=GlanceWeb.Resources.Level2.Level2.RegMrDtl%>...</a>', deviceId); 
          beachMarker.desc = result; 
          if (result.toString().indexOf("divMainSnap") > 0) { 
           var checkExist = setInterval(function() { 
            $(".gm-style-iw").css("width", "400px !important;"); 
            infoWindow = new google.maps.InfoWindow({ content: beachMarker.desc, maxWidth: 400 }); 
            infoWindow.open(map, beachMarker); 
            position = beachMarker.position;// iw.getPosition(); 
            $(".gm-style-iw").each(function() { 
             if ($(this).find("div.divFirstSnap").length) { 
              $(this).removeClass("wiThouImage"); 
              $(this).css("max-width", "none"); 
             } 
            }) 
            clearInterval(checkExist); 
           }, 1000); 
          } 
          else { 
           var checkExist = setInterval(function() { 
            infoWindow = new google.maps.InfoWindow({ content: beachMarker.desc, maxWidth: 200 }); 
            infoWindow.open(map, beachMarker); 
            position = beachMarker.position;// iw.getPosition(); 
            if ($(".gm-style-iw").length > 0) { 
             $(".gm-style-iw").removeAttr("width"); 
             $(".gm-style-iw").each(function() { 
              if (!$(this).find("div.divFirstSnap").length) { 
               $(this).addClass("wiThouImage"); 
              } 
             }) 

             clearInterval(checkExist); 
            } 

           }, 1000); 
          } 

          //Following section is used to manage device pop-ups after ajax 
          for (var i = 0; i < infoWindowDevicePoints.length; i++) { 
           infoWindowDevicePoints[i].latLng 
           if (position == infoWindowDevicePoints[i].latLng) 
            isExist = false; 
          } 

          if (isExist) { 
           infoWindowDevicePoints.push({ 
            latLng: beachMarker.position, 
            popUpData: beachMarker.desc 
           }); 
          } 
          UnBlockGlanceScreen(); 
         } 
        }); 
        } 
      }); 
      google.maps.event.addListener(infoWindow, "closeclick", function() { 
       debugger; 

       var that = this; 
       that.getposition() 
       var latlnginfo = that.getposition(); 
       infowindowdevicepoints = $.grep(infowindowdevicepoints, function (value) { 
        return value.latlng != latlnginfo; 
       }); 
      }); 

       oms.addListener('spiderfy', function() { 
        infoWindow.close(); 
        infoWindowDevicePoints.length = 0; 
       }); 
       oms.addMarker(beachMarker); 

      } 

     }); 


}); 

ご協力いただきありがとうございます。

Answer 1

問題は、ajaxリクエストに応じてinfoWindowを作成することだけです。ただし、closeclickイベントリスナーを追加すると、おそらくajaxレスポンスが発生する前に実行されます。

あなたはこのブロックを移動する必要があります。

google.maps.event.addListener(infoWindow, "closeclick", function() { 
    debugger; 

    var that = this; 
    that.getposition() 
    var latlnginfo = that.getposition(); 
    infowindowdevicepoints = $.grep(infowindowdevicepoints, function(value) { 
     return value.latlng != latlnginfo; 
    }); 
}); 

...このブロック内で、情報ウィンドウ

$.ajax({ 
    ... 
    success: function(result) { 
      // add a call to the event listener here 
    }