1

tested on iPhone and iPad running iOS12, in chrome and safari

Bug description: after interacting (zooming in/out) with google map (integrated in the site by an iframe) on an iOS device (tested on iOS12) using either chrome or safari, clicking on links outside the map does nothing.

try it out here on codepen

interestengly enough, the bug doesn't happen in jsfiddle

here is a youtube video I made if you don't have an iOS device.

happens on my site which is a plain html page with google maps iframe like so (no other javascript, css files are added for testing purposes):

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12101.03207249142!2d-74.04012067655368!3d40.690314788042684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sus!4v1537933952825" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

the above iframe is obtained straight from google maps "share > embed a map" feature.

Any clues how to get around this bug?

5
  • Bug does not happen on Android devices. Sep 26, 2018 at 4:29
  • I am having this same issue where after you interact with the Google Maps Embedded Map, the other links (navbar/homepage logo/etc.) cannot be interacted with anymore until numerous clicks (10+) finally get it to start to work on the page. Did you ever figure this out? It's only happening for me on iOS touch devices (Safari and Chrome) but doesn't happen on Android / Windows 10 touch devices or any non-touch device. It's specific to iOS. Jun 17, 2019 at 15:28
  • No I didn't figure it out and unfortunately I removed the video from youtube demonstrating the issue. This is probably a bug that Apple should be aware of IMO. Jun 18, 2019 at 16:17
  • I believe I've found an acceptable solution off of another post. The topic was actually about the mousewheel or trackpad getting stuck inside the iframe but it has also resolved the issue we've described in this thread. Now, when the user clicks into the iframe, they need to click a second time to actually interact with the map. When they touch outside the iframe (like the navbar in my issue for instance), they have to touch the menu item twice so that you can interact with it. On the second touch though, the navbar menu item does function. stackoverflow.com/a/29895985/1975008 Jun 19, 2019 at 15:39
  • So the post from above does a good job of regaining focus outside the iframe correctly when the user interacts with the +/- zoom buttons or toggling the terrain. When the user pinces and zoomes with two fingers though, I'm still noticing the issue where it takes a ton of clicks to escape the Google Maps Embedded Map iframe... I'll post if I found out more here as I continue to research it as time permits. Jun 19, 2019 at 16:03

1 Answer 1

1

After some research, I have found a solution that works properly.

If you add an event listener to the body it will fix the problem.

document.body.addEventListener("fooAction", function(e) {
    // something that does nothing
});
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.