Google Maps marker's can't be clicked on device

Whenever I try to touch a marker on my iPhone its info window doesn’t get selected (info window not showing up). In a browser everything works however.

I’ve tried using @pbernasconi’s solution, but that makes my list not clickable (I have a list below the map).

Is there any other way of going about making the markers clickable without breaking the list?

Does including data-tap-disabled="true" in your map wrapper, rather than the ion-content wrapper, like this, work?

<ion-content>...
<div id="map" data-tap-disabled="true">...</div>
<ion-list>...</ion-list>
</ion-content>

Referenced from:

7 Likes

I was having the exact same problem after upgrading to the 1.04 beta and including data-tap-disabled="true" solved it for me. Thanks!

1 Like

Awesome! Now clicking on markers works.

However, the close button of an info window no longer can be clicked.

Having the same problem. The info windows can not be clicked/closed

I am also having the same problem - the fix allows the marker to be clicked (and infowindow.open triggered), but cannot click inside the infowindow (including close button). Any thoughts?

Without “data-tap-disabled=‘true’” and by programmatically opening an infowindow containing an ‘ng-click’, the click event fires like it should. I understand that ‘data-tap-disabled’ applies to the element to which it is affixed and all of its children. Consequently, I believe that the fix requires a method to stop its application once it encounters a child element with “data-tap-disabled=‘false’” (for instance). I have logged the issue on github here: https://github.com/driftyco/ionic/issues/1505

We’ve all been there:

Dear ionic,
PLEAASEEE can we make “google maps markers not working” a sticky or something, I see this request over and over and over.

The fix appears right in that thread, it seems. One needs “data-tap-disabled=‘true’” on the map container but also “scroll=‘false’” on the enclosing ‘ion-content’ element.

The problem with this fix is that you lose scroll. I have a codepen with a nested ‘ion-content’ to try and resolve, but it does not work on mobile.

Do you mean you lose scroll on the list below? (as the scroll on the map works fine for me in my android phone), I can also scroll the list by scrolling the page… So I assume your trying to get the list to scroll independently??

I was looking into something similar here… Nested States & Views in Ionic?

I don’t think you can do what you want to do (which I want to do too) which is split the window into content at the top with independently scrollable content at the bottom where the screen does not expand vertically. I can think of a hugely hacky way of doing this with absolute positioning but the code would be just horrible.

If you figure it out please tell me!

@andmar8 Hey thanks for the suggestion, but I think we’ll leave this unpinned. Our docs and codepens do demonstrate that if you need regular javascript click events to work with third party examples, such as google maps, you need data-tap-disable enabled.

With our new releases happening weekly now, this feature is no longer considered a “breaking change” by us. But this does bring up a good point, repeat questions are becoming all too common.

I highly suggest that everyone should search the forum for anything first before posting questions.

What worked for me was to do a mix of what was mentioned before:

  1. Add scroll=“false” to ion-content
  2. Add data-tap-disabled=“true” to your map’s div

Now the map markers can be tapped, and info windows can be closed and any links inside work.

If you want to have a list that scrolls in the same ion-content, just wrap your list in an ion-scroll tag and the scrolling should work.

4 Likes

Great!

It’s works fine to me.

Thanks.

Adding data-tap-disabled=“true” to the map element helped for me too. Thank you!

Thank u so much !! very good

thank you very much! had no idea why it was not working

It actually worked on chrome emulator. Once I tested it with Ionic View it did not work.

I have tried a lot of options but still can’t make it work on my android device. I even switched to Leaftlet but still no luck.

:frowning:

I tried to add scroll=“false” to my ion-content and add data-tap-disabled=“true” to my map’s div with no luck.
I still have same problem. Marker’s click event works fine on browser but not in my android device.

Any help @mhartington , please?

I’m using Ionic 1.0.1 and Apache Cordova 5.1.1.

Thanks in advance.

Codepen demo? I’ll load it on a device and check it out.

I already solve it. Sorry, the problem was on my code. :frowning:

Thanks @mhartington.