Google maps javascript - events not working

ionic-v1
1

I integrated google maps javascript api v3 and I use markers that show an infowindow. However I can’t close it on iOS. I can touch on a marker and the infowindow shows up, however close is not working.

I added a special event listener without success. On top of that issue all other google maps standard elements are not acting as well (like the selector of the typ of map or the ± signs).

It seems that all standard events are disabled and I can’t enable them. However the marker click event works and the infowindow shows up, but I can’t close it…

I googled around but could not find a solution, any help ?

Thanks,
Martin

2

Can you put up a codepen or plunkr of the code in question?

3

Here we go
http://cdpn.io/jBEky

It works in desktop browsers.

It does work only limited on iOS:

  • you can click on the marker and the infowindow will show
  • you can click on the google maps controls (± or type) but nothing happens
  • you can pinch to zoom
  • you can’t close (by touch the X) any dialog (so the infowindow)

Android similar behavior as reported by some beta testers

Cheers,
Martin

4

Some further investigations from my side.

The standard sample http://codepen.io/ionic/pen/uzngt works on the phone and can handle all events.

As soon as I’m within a tab or menu, I can’t get it working. Seems that something is disabling the google maps events within tabs or side-menus.

I’m now as well on 0.9.24 but no difference.

5

Next update after some testing

If I add the following into my directive

// Stop the side bar from dragging when mousedown/tapdown on the map

google.maps.event.addDomListener(element[0], ‘mousedown’, function(e) {
e.preventDefault();
return false;
});

It works at least on Android, will test iOS tomorrow.

Will update my codepen accordingly

6

I just figured out that the event.addDomListener is not the solution as such, it is the scroll=“false” on the content of this view !

7

so what was the actual fix here? I am blocked and have spent time trying to resolve this issue.

8

experiencing the same issue but using angular-google-maps directive. Any word on the fix? I am dealing with the same issue you describe and using latest versions

9

Any fix for this? I am facing the same issue here?

10

So what do you put the scroll=false on?

I’m experiencing a problem in android that is very similar, whereby you create a map, add a marker with infowindow, click on the marker in a desktop browser and the infowindow opens, do the same in android, nothing happens???

Closest I’ve found so far when googling is someone saying 100% height/widths can break it…

http://stackoverflow.com/questions/18078422/google-maps-v3-infowindow-on-android-click-doesnt-work

11

WOOHOOO!!! I was very close to abandoning ionic simply because this was a huge showstopper…

<ion-content scroll="false" data-tap-disabled="true">
    <div id="map"></div>
</ion-content>

It does indeed work :smile:

This pushed me down the right path…

5 Likes
12

saved my day! :slightly_smiling: