Jquery Dialog中的Google Map - InfoWindow元素不起作用答案

【问题标题】：Google Map within Jquery Dialog - InfoWindow elements not workingJquery Dialog中的Google Map - InfoWindow元素不起作用
【发布时间】：2012-04-04 05:43:03
【问题描述】：

我在 jQuery 模式对话框中遇到了 Google Map (v3) 的问题。在地图上我有一个标记，单击该标记时会启动一个信息窗口。 InfoWindow 有一个 textarea 和一个按钮，它们都不起作用。我无法在文本区域中输入，并且按钮的单击事件不会触发。我也尝试在 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>

有人能帮我解决这个问题吗？

【问题讨论】：

您遇到了什么错误，您能否提供您尝试实现此功能的页面的网址。可能是我看到一些 js 错误
没有任何 JS 错误或任何错误。该网站也不公开。如果我将对话框从模态更改为有效。

标签： jquery jquery-ui google-maps google-maps-api-3

【解决方案1】：

我最近遇到了这样的问题，这是由于弹出元素的 zIndex 不足以出现在 jQuery 对话框前面（zIndex=1000）。尝试改变 infowWindow 的 zIndex

【讨论】：