Google Map InfoWindow wont close

[parky128]

Hi,

I appear to have a problem getting an infoWindow to close in a Google Map panel. It appears the close icon in the top right of the infoWindow is disabled. I can close the window in Chrome but not on an iPhone, has anyone come across this before?

There is no configuration property in the Google Maps API that allows you to make an infoWindow closable or not, this should just be default behaviour from my past experiences of using the maps API.

Thanks,
Rob

[mitchellsimoens]

But you can click on a marker? Any error? Code?

[parky128]

Sorry, should have posted some code for you!

Yes my Markers are clickable which displays the infoWindow as expected. Its just the infoWindow will not close when clicking the little cross icon.

After creating a Marker on my map I am registering a google maps click handler on my Marker object like so:

google.maps.event.addListener(googlemap.unitMarker,'click', Ext.Function.bind(this._showMarkerInfoWindow, this, [googlemap.unitMarker]));

As you can see I am using a delegate function here as eventually I will be calling the same function from other types of Markers on my map display in which case the infoWindow will need to display different types of content.

showMarkerInfoWindow: function(Marker) {
        
    // Unit
    if (Marker.untID) {
        var r = this.application.getCurrentGridStore().getById(Marker.untID);
        if (r!==undefined) {
            if (Marker.infoWindow==null) {
                var iw = new google.maps.InfoWindow({
                    content: this._untInfoWindowContent(Marker, r.data),
                    disableAutoPan: false,
                    maxWidth: 300
                });
                Marker.infoWindow=iw;
            } else {
                Marker.infoWindow.setContent(this._untInfoWindowContent(Marker, r.data));
            }
        }
        Marker.infoWindow.open(Marker.map, Marker);


    }
        
 },
 
 _untInfoWindowContent:function(marker, d) {
    // TODO: Change to use Ext.XTemplate?
    return "<div>"
            +"<span  style='position:relative; top:-7px;left:2px;'><b>"+d.UnitName+"</b></span>"+"<br/>"
            +"<br/>"
            +"<b>"+d.EventDTLocalDisplay+"</b>: "
            +d.Location+"<br/>"
            +"</div>";
}

So I now have infoWindows displaying when clicking each of my Markers, they just wont close for me.

I even tried adding a listener to the infoWindow's closeclick event which is fired when the close icon is clicked and calling the infoWindow close function:

google.maps.event.addListener(Marker.infoWindow, 'closeclick', function() {
                 Marker.infoWindow.close();
                 console.log('closeclick');
             });

But this doesn't make any different.

The infoWindows do close correctly in Chrome and Safari on my desktop machine, but not on an iPhone 3GS running iOS 5.0

Any ideas? Are there any sample apps that use Google Maps with clickable Markers and infoWindows?

Thanks

[minorbug]

I'm also having this problem. Not only can I not close an infowindow, but my infowindow has a link with an onclick event that opens a new view. Works in Chrome, not in Safari on iOS 5.

[runebjerregaard]

I have the same problem. Nothing happens when I tap the cross.

[FidoX]

I had the same problem, with the map and with all <a> html links. You can see how I've solved here:
http://www.sencha.com/forum/showthread.php?154101-Can-t-click-on-map-buttons.

Greetings.