Google maps click events not working in iOS (POLYGON_CLICK / MARKER_CLICK)

I’m submitting a … (check one with “x”) [ ] question [x] any problem or bug report [ ] feature request

The plugin version: (check one with “x”) [ ] 1.4.x [x] 2.0.0-beta3

If you choose ‘problem or bug report’, please select OS: (check one with “x”) [ ] Android [x] iOS

cordova information: (run $> cordova plugin list)

cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-camera-preview 0.9.0 "cordova-plugin-camera-preview"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 4.0.0 "File"
cordova-plugin-file-transfer 1.6.3 "File Transfer"
cordova-plugin-googlemaps 2.0.0-beta3-20170828-2350 "cordova-plugin-googlemaps"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Introduction to issue I am trying to add multiple polygons, each with a click event.

Current behavior:

I iterate over the list of polygons and add an event listener to each polygon. However, when I click / tap the polygon nothing happens on iOS (It works on Android). I have tried multiple things such as only adding one polygon etc. It seems that some GoogleMapsEvents are not being registered, however the MAP_READY event is occurring correctly.

Expected behavior:

When a polygon is clicked there should be an event which is triggered.

Steps to reproduce:

import { Component} from '@angular/core';
import { Platform } from 'ionic-angular';

import {
  GoogleMap,
  GoogleMaps,
  Polygon,
  GoogleMapsEvent,
} from '@ionic-native/google-maps';

@Component({
  selector: 'maps',
  templateUrl: 'maps.html',
  providers: []
})
export class Maps {
  gMap: GoogleMap;

  constructor(private googleMaps: GoogleMaps, public platform: Platform){
    // THIS DOES NOT WORK
    // platform.ready().then(() => {
    //   this.loadMap();
    // })
  }

  // Load the map only after the view is initialized
  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap(){
    let element: HTMLElement = document.getElementById('map');

    this.gMap = this.googleMaps.create(element);

    this.gMap.one(GoogleMapsEvent.MAP_READY).then(
      () => {
        this.gMap.setOptions({
          'mapType': 'MAP_TYPE_SATELLITE',
          'controls': {
            'compass': false,
            'myLocationButton': false,
            'indoorPicker': true,
            'mapToolbar': true
          },
          'gestures': {
            'scroll': true,
            'tilt': false,
            'rotate': false,
            'zoom': true
          },
          'camera': {
            'target': {
              lat: 39.1474745294,
              lng: -103.7982501089
            },
            'tilt': 0,
            'zoom': 14,
            'bearing': 0
          },
          'preferences': {
            'zoom': {
              'minZoom': 0,
              'maxZoom': 19
            },
            'padding': {
              'left': 30,
              'top': 50,
              'bottom': 20,
              'right': 10
            }
          }
        });

        // Add the polygons
        // this.addPolygons();

        this.gMap.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 39.1474745294,
            lng: -103.7982501089
          }
        })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked marker');
              });
          });

        this.gMap.addPolygon({
          points: [
            {lat:39.1570200558703,lng:-103.8081836700439},
            {lat:39.1438409925181,lng:-103.8083553314209},
            {lat:39.1570866105324,lng:-103.7968540191650},
            {lat:39.1570200558703,lng:-103.8081836700439}
            ],
          geodesic: true,
          fillColor: "#FFFFFF",
          strokeColor: "#FFFFFF",
          strokeWidth: 2,
        })
          .then(polygon => {
            polygon.setClickable(true);
            polygon.on(GoogleMapsEvent.POLYGON_CLICK)
              .subscribe(() => {
                alert('clicked poly');
              });
          });
      }
    );
  }

  // Function to add all the polygons which are linked to the client's account
  addPolygons(){
      let polygons = [
        [
          {lat:39.1413113950549,lng:-103.8035488128662},
          {lat:39.1523610730789,lng:-103.7902450561523},
          {lat:39.1406456964042,lng:-103.7866401672363},
          {lat:39.1413113950549,lng:-103.8035488128662}
        ],
        [
          {lat:39.1570200558703,lng:-103.8081836700439},
          {lat:39.1438409925181,lng:-103.8083553314209},
          {lat:39.1570866105324,lng:-103.7968540191650},
          {lat:39.1570200558703,lng:-103.8081836700439}
        ]
      ];

      for (let i=0; i<polygons.length; i++) {
        this.gMap.addPolygon({
          points: polygons[i],
          geodesic: true,
          fillColor: "#FFFFFF",
          strokeColor: "#FFFFFF",
          strokeWidth: 2,
        }).then(polygon => {
          // Make the polygon clickable
          polygon.setClickable(true);
          // Add the click event for the polygon
          polygon.one(GoogleMapsEvent.POLYGON_CLICK).then(
            () => {
              polygon.setFillColor('#2673a8');
              console.log("Clicked a polygon and changed the color");
              let mapGpsLocation = this.gMap.getCameraPosition().target;
              console.log("Got the map gps location", mapGpsLocation);
            }
          )
        });
      }
  }
}

Is there something that I am missing entirely here or perhaps something I need to do to get the same kind of functionality on iOS?

I have tried using both subscribe and then for event clicks for the polygons -> both work on Android but none seem to work on iOS. The platform ready function in the constructor also doesn’t seem to work so I use NgViewAfterInit.

Thank you!

---

If your problem is solved, please consider small amount donation to this project. Appreciate for your kindness. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/README.md#buy-me-a-beer

[Luttik]

This is probably fixed together with the panning issue. This wasn’t working for me either before he fixed that. So removing your platform and plugin dirs and running cordova prepare might just fix it for you.

[nicholasgcoles]

I am so glad that it works atleast!

Very sorry if this is all very trivial and I am not understanding it. I have tried now on two Mac machines and can’t get either to work (still works on windows however).

Is there any chance you could do me the biggest favour and explain what you did exactly from when you cloned my repository to get it to work. Perhaps your packages are different to mine?

Thanks so much.