0

I decided I'd give the new Visual Refresh that was announced at Google I/O 2013 a try, since all it takes to get the new basemaps/UI is a single property/query string.

JavaScript API

function initializeMap() {
    var myOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    google.maps.visualRefresh = true;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

-- OR --

Static Maps API

https://maps.googleapis.com/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false

And it worked great, my maps now use the new basemap tiles and UI.

However since the change, when I open an InfoWindow on a mobile device (using the Javascript API), the close button in the top right hand corner of it doesn't seem to respond any longer. Has any one else observed this? I'm trying to find out if it's a bug with my code or with Google's.

UPDATE: Here's a basic Fiddle I'm using to test with. Works on Chrome, IE & Firefox but not on mobile devices (Only been able to try android so far)

http://jsfiddle.net/vG3WE/1

Nick Albrecht
  • 15,828
  • 8
  • 64
  • 95
  • Yep, having same problem here too with very basic map so I think it's Google. My thoughts are that it will be fixed eventually and just to not use the visual refresh for now. Not ideal but what can ya do? – Simon Kelly May 24 '13 at 07:52
  • Yeah that's what I got from my testing as well. I submitted a bug to their issue tracker so we'll just have to wait and see. In the mean time I've reverted my app back to the current base tiles. – Nick Albrecht May 24 '13 at 14:59

1 Answers1

1

I noticed the same effect on some Apple devices. Consider this as a very dirty hack, but if you don't want to wait until this bug is fixed, you can implement the close event yourself so that it should also work on mobile devices:

First of all you need to define an ID for your info window content (you'll need that later on)

var contentString = '<div id="infowindowContent">You should be able to close me</div>';     
var infowindow = new google.maps.InfoWindow({
  content: contentString
});

Then you need to attach a listener for the domready-event of this infowindow. Cause if this event is fired, you know that the info window is attached to the DOM and you can start implementing the following hack:

google.maps.event.addListener(infowindow, 'domready', function() {
  var infowindowCloseButton = $($($("#infowindowContent").parents()[2]).children()[0]);
  infowindowCloseButton.click(function(){
    infowindow.close();
  });
});

What we do is pretty simple: We just navigate to the close button of the infowindow and attach a mouseclick event to close this infowindow.

I put together a small example:

http://chatmap.eu/playground/closeInfoWindows.html

As I said: It is very dirty but it worked for me.

Christoph
  • 11
  • 1
  • While I agree it is not an ideal solution, this workaround did resolve the problem for me when using iOS devices. Thanks for sharing. Let's hope Google comes up with a fix soon. – Dave Crumbacher Jun 04 '13 at 17:36