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

About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 17 (9 by maintainers)
If you want me to help further more, please share your project files on GitHub repository.
i didn’t understand