0

I'm implementing google maps api v3 in angularjs. I have two maps on the page: one shows the user's location and sits in the sidebar while the other allows users to add markers. This second map is only used in a form to add entries to the system.

It work fine in everything except mobile Safari on iOS 7. On an iPad running iOS 7 the side map works - ie: you can pan and zoom, but the other map is as if it's an image - no panning, zooming, or clicking to add a marker.

In the iPhone on iOS7 both maps are static, as if they're images. Debugging in Safari doesn't show any errors.

Debugging does show that they don't ever fire the click event to add markers.

The iPad on iOS6 is fine. Android is fine. Desktop browsers are fine.

I'm using Angular-ui ui.Maps to generate the maps.

I can't even think how to debug this further. Has anyone had trouble like this with iOS 7? . Is iOS7 mobile Safari the new IE? I've had quite a few issues now that only crop up on iOS7.

Update:

The Doctor was right. Here's the code to fix it:

$timeout(function(){
        _.each(document.getElementsByClassName("gm-style"), function(e){
            this.addEventListener('touchstart', function(event){});
        });

    }, 3000);
user2890027
  • 321
  • 2
  • 13

1 Answers1

0

I get the sense that iOS7 Safari is a bit buggy when it comes to touch events.

I found this thread which talks about a specific touch event but I think other events have similar issues. `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7

Community
  • 1
  • 1
Matt Smith
  • 1,932
  • 1
  • 21
  • 41