Карта Google в диалоге Jquery - элементы InfoWindow не работают - PullRequest
Новая
       27

Карта Google в диалоге Jquery - элементы InfoWindow не работают

0 голосов
/ 19 марта 2012

У меня проблема с Google Map (v3) в модальном диалоговом окне jQuery.На карте у меня есть один Маркер, маркер запускает 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>

Кто-нибудь сможет мне помочь в решении этой проблемы?

1 Ответ

1 голос
/ 27 апреля 2012

У меня недавно была такая проблема, которая была вызвана zIndex всплывающих элементов, которых было недостаточно, чтобы находиться перед диалоговым окном jQuery (zIndex = 1000). Попробуйте изменить zIndex окна infowWindow

...