Google Map in Jquery Dialog - InfoWindowの要素が機能しない

Question

jQueryモーダルダイアログ内でGoogleマップ（v3）に問題があります。地図上には単一のマーカーがあり、クリックするとマーカーがInfoWindowを起動します。 InfoWindowにはテキストエリアとボタンがあり、どちらも機能していません。私はテキスト領域に入力することはできませんし、ボタンのクリックイベントは発生しません。 InfoWindowにハイパーリンクを張そうとしましたが、クリックしても機能しませんでした。

Javascriptを：ここで

は、私はコードを持っているものである

function ShowDialog(dialogID) { 
    $("#" + dialogID).dialog({modal: true, resizable: false, 
           minWidth: 400, width: 'auto', maxWidth: 900 }); 
} 

var map; 
function ShowMap(address) { 
    ShowDialog('MapDialog'); 
    var options = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, 
        zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL }}; 
    map = new google.maps.Map(document.getElementById('map_canvas'), options);    
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });      
      var infoHtml = document.getElementById('MapInfoWindow'); 
      var infoWindow = new google.maps.InfoWindow({ content: infoHtml }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.open(map, marker); 
       $("#MapInfoWindow").show(); 
      }); 
     } 
    }); 
} 
function ShowDirections() { 
    var start = $("#txtDirectionsStart").val(); 
    var end = $("#hidAddress").val(); 
    var request = { 
     origin: start, 
     destination: end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    var directionsService = new google.maps.DirectionsService(); 
    var rendererOptions = { map: map } 
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
} 

HTML：

<div id="MapDialog" style="display: none;" class="dialog"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td><div style="width:650px;height:500px" id="map_canvas"></div></td> 
     </tr> 
     <tr> 
      <td align="right"><br /><a href="javascript:;CloseDialog('MapDialog')" title="Close" class="actionButton">Close</a></td> 
     </tr> 
    </table> 
    <div style="display: none" id="MapInfoWindow"> 
     <strong><asp:Literal ID="litInfoTitle" runat="server"></asp:Literal></strong> 
     <p><asp:Literal ID="litInfoAddress" runat="server"></asp:Literal></p> 
     <textarea rows="3" cols="50" id="txtDirectionsStart"></textarea>&nbsp; 
     <asp:HiddenField ID="hidAddress" runat="server" ClientIDMode="Static" /> 
     <input type="button" onclick="ShowDirections();" value="Go" /> 
    </div> 
</div> 

は、誰もがこの問題を解決するには、私を支援することができるだろうか？

Answer 1

最近、jQueryダイアログ（zIndex = 1000）の前に十分でない要素をポップアップするzIndexが原因で、このような問題が発生しました。 infowWindowのzIndexを変更してください。