CODEWITHSUNDEEP
jqueryjquery-uigoogle-mapsgoogle-maps-api-3
willfkk
willfkk

Reputation: 1

Google Map within Jquery Dialog - InfoWindow elements not working

I'm having a problem with a Google Map (v3) within a jQuery modal dialog. On the map I have a single Marker, the marker launches an InfoWindow when clicked on. The InfoWindow has a textarea and a button, neither of which is working. I can't type in the text area and the button's click event doesn't fire. I have also tried putting a hyperlink in the InfoWindow but when clicked on it also didn't work.

Here is what I have for code:

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>

Would anybody be able to assist me in solving this problem?

Upvotes: 0

Views: 1154

Answers (1)

Pascal
Pascal

Reputation: 11

I recently had an issue like this that was caused by the zIndex of poping up elements not enough to be in front of jQuery dialog (zIndex=1000). Try to change the zIndex of the infowWindow

Upvotes: 1

Related Questions