cordova-plugin-googlemaps: POLYGON_CLICK not working properly while using multiple polygons

I am loading three polygons on the map dynamically . I have different functionality when user clicks on the polygon. But out of the three polygons loaded, the polygon click only works on two of them and on the third polygon , the click is considered as click outside the polygon. My code is

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, ToastController,LoadingController,ViewController } from 'ionic-angular';
import { Http } from '@angular/http';
import { LocationAccuracy } from '@ionic-native/location-accuracy';
import { Values } from '../../../providers/service/values';
import { Storage } from '@ionic/storage';
import { Service } from '../../../providers/service/service';
import { StatusBar } from '@ionic-native/status-bar';
import { HTTP } from '@ionic-native/http';
import {
    GoogleMaps,
    GoogleMap,
    GoogleMapsEvent,
    Marker,
    MarkerOptions,
    Polygon,
    Geocoder,
    LatLngBounds,
    Poly,
    ILatLng




} from '@ionic-native/google-maps';

@IonicPage({
    name: 'address'
})
@Component({
    templateUrl: 'address.html',
    selector: 'page-address'
})
export class Address {
    @ViewChild('apartment') apartment;
    @ViewChild('map') myitem: ElementRef;
    map: GoogleMap;
    ilatlng: ILatLng;
    location: any;
    marker: Marker;
    marker1: Marker;
    points: any = {};
    polygon: any={};
    address: any = {};
    poly: Poly;
    loader:any;
    homeloc: any;
    editAddress: any = {};
    showcorrectadd: boolean = false;
    showincorrectadd: boolean = false;
    vendorid: any;
    add:any={};
    marker2:any;
    marker3:any;

    constructor(public http: Http, public loadCtrl: LoadingController, private HTTP: HTTP,public viewCtrl:ViewController, public StatusBar: StatusBar, private cd: ChangeDetectorRef, private locationAccuracy: LocationAccuracy, public values: Values, public storage: Storage, public nav: NavController, public toastCtrl: ToastController, public service: Service) {
       


    }


    getzones() {
        return new Promise(resolve => {
            this.HTTP.get('http://xpym.ru/zones.json', {}, { 'Content-Type': 'application/json' }).then(Data => {
                //console.log(data.zones);

                let data = JSON.parse(Data.data);
            
                console.log(data);

                for (let item in data.zones) {
                   // console.log(data.zones[item].coordinates)
                    if (data.zones[item].coordinates) {
                        this.points[item] = data.zones[item].coordinates;
                        
                        

                    }



                }
           //  console.log(this.points[0]);

                this.loadMap();
                //this.getlocation()
                

            });
        });
      
    }

    ionViewDidLoad() {
    this.StatusBar.overlaysWebView(true);
       this.getzones();
       



    }

   

    loadMap() {
        var target = [

            { lat: 60.03615988476938, lng: 30.451032268829636 },
            { lat: 60.03514794001693, lng: 30.45258526784926 },
            { lat: 60.03464873824492, lng: 30.450978624649338 },
            { lat: 60.03568916602118, lng: 30.449656295604996 }


        ];
        //getting center of zone 1
        var latLngBounds = new LatLngBounds(target);
        console.log(latLngBounds.getCenter())

        var option = {
            enableHighAccuracy: true // use GPS as much as possible
        };


        var div = document.getElementById("map_canvas");
        this.map = GoogleMaps.create(div, {
            camera: {
                target: target,
                zoom: 24

            }
        });
       




        for (let item in this.points) {
            if (this.points[item]) {
                console.log("added polygon")
                this.polygon[item] = this.map.addPolygonSync({
                    points: this.points[item],
                    strokeColor: '#ffd00a',
                    fillColor: 'rgba(255, 208, 10,0.3)',
                    strokeWidth: 6,
                    clickable: true
                });
             
            this.polygon[item].on(GoogleMapsEvent.POLYGON_CLICK).subscribe((data) => {
             

                this.createMarker1(data[0], item).then((marker: Marker) => {
                    this.marker2 = marker;

                });
             
     
                

               


            });
        }
        this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe((data) => {

           
                this.createMarker2(data[0]).then((marker: Marker) => {
                    this.marker1 = marker;
                   
                  
                });

            
            

        });
    }


    this.map.getMyLocation(option).then((location) => {
        console.log(location)
        this.createMarker(location.latLng).then((marker: Marker) => {
            this.marker = marker;

        });


        this.map.setCameraTarget(location.latLng);

        // move the map's camera to position


    }, error => this.createMarker(latLngBounds.getCenter()).then((marker: Marker) => {
        this.marker3 = marker;

    }));


}

    //marker when inside polygon
    createMarker(loc) {

        let markeroptions: MarkerOptions = {
            position: loc,
            draggable: true,


            icon: {
                url: 'assets/imgs/pin1.png',
                size: { width: 44, height: 60 }
            }


        };

        return this.map.addMarker(markeroptions);
    }
    //marker put initially 
    createMarker1(loc, item) {
        this.vendorid = item;
        console.log(this.vendorid);
        Geocoder.geocode({
            position: loc,

        }).then((results) => {
            this.homeloc = loc;
            console.log("got location with address" + results);
           
            this.editAddress["city"] = results[0].locality;
            this.editAddress["postcode"] = results[0].postalCode;
            this.editAddress["country"] = results[0].country;
            let add = results[0].thoroughfare;
            let split = add.split(" ");
            this.address="";
            if (split[1]){
                this.add[0] = split[1];
            }
            if (split[2]) {
                this.add[1] = split[2];
            }
            if (split[3]) {
                this.add[2] = split[3];
            }
           for(let item in this.add){
               this.address = this.address + " " +  this.add[item] ;
           }
            this.address = this.address + ", " + "дом " + split[0] ;
           console.log(this.address)
           


            this.editAddress["address_2"] =this.address;
            this.showincorrectadd = false;
            this.showcorrectadd = true;
            this.cd.detectChanges();
            
           // console.log(this.address)



        }
        );
        this.map.clear();
        for (let item in this.points) {
            if (this.points[item]) {
                console.log("vendorid" + item)
                this.polygon = this.map.addPolygonSync({
                    points: this.points[item],
                    strokeColor: '#ffd00a',
                    fillColor: 'rgba(255, 208, 10, 0.3)',
                    strokeWidth: 6,
                    clickable: true
                });
            

                this.polygon.on(GoogleMapsEvent.POLYGON_CLICK).subscribe((data) => {


                    this.createMarker1(data[0], item).then((marker: Marker) => {
                        this.marker2 = marker;

                    });

                });
            }
        }







           
          
        

        let markeroptions: MarkerOptions = {
            position: loc,


            icon: {
                url: 'assets/imgs/pin.png',
                size: { width: 230, height: 117 }
            }


        };

        return this.map.addMarker(markeroptions);
    }
    //marker when outside polygon
    createMarker2(loc) {
        Geocoder.geocode({
            position: loc,

        }).then((results) => {
            console.log("got location with address" + results)

            let add = results[0].thoroughfare;
            let split = add.split(" ");
            this.address = "";
            if (split[1]) {
                this.add[0] = split[1];
            }
            if (split[2]) {
                this.add[1] = split[2];
            }
            if (split[3]) {
                this.add[2] = split[3];
            }
            for (let item in this.add) {
                this.address = this.address + " " + this.add[item];
            }
            this.address = this.address + ", " + "дом " + split[0];
            console.log(this.address)
            this.showincorrectadd = true;
            this.showcorrectadd = false;
            this.cd.detectChanges();
            
            //console.log(this.address)



        }
        );

        this.map.clear();
        for (let item in this.points) {
            if (this.points[item]) {
                console.log("vendorid" + item)
                this.polygon = this.map.addPolygonSync({
                    points: this.points[item],
                    strokeColor: '#ffd00a',
                    fillColor: 'rgba(255, 208, 10, 0.3)',
                    strokeWidth: 6,
                    clickable: true
                });
                //this.polygon.setFillColor("");

                this.polygon.on(GoogleMapsEvent.POLYGON_CLICK).subscribe((data) => {

                  
                        this.createMarker1(data[0], item).then((marker: Marker) => {
                            this.marker2 = marker;
                            
                        });


                    
               




                });
            }

        }



        let markeroptions: MarkerOptions = {
            position: loc,


            icon: {
                url: 'assets/imgs/pin2.png',
                size: { width: 262, height: 115 }
            }


        };


        return this.map.addMarker(markeroptions);
    }
   





    
}




I have also added a video showing this

giphy

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 17 (9 by maintainers)

Most upvoted comments

If you want me to help further more, please share your project files on GitHub repository.

i didn’t understand