wf9a5m75
commented
4 years ago Please share your project files on GitHub. Without your code, I can't help
Closed tomfong closed 4 years ago
wf9a5m75
commented
4 years ago Please share your project files on GitHub. Without your code, I can't help
tomfong
commented
4 years ago Please share your project files on GitHub. Without your code, I can't help
page.html
<div id="map_canvas"></div>
<ion-content>
<ng-container *ngFor="let person of people">
<ion-item (click)="showMarker(person)">
Show Marker
</ion-item>
</ng-container>
</ion-content>page.scss
#map_canvas {
height: 40%;
}page.ts
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMap, GoogleMaps, Environment, Marker, GoogleMapsAnimation, GoogleMapsEvent } from '@ionic-native/google-maps/ngx';
export class Page implements OnInit {
map: GoogleMap;
markers = {};
circles = {};
people = [{...}]; // contains person objects
constructor(
private platform: Platform,
) {
this.initializeMarkers();
}
loadMap() {
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': (My API),
'API_KEY_FOR_BROWSER_DEBUG': (My API),
});
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: {
lat: 114,
lng: 22,
},
zoom: 9,
tilt: 0,
},
controls: {
myLocationButton: true,
myLocation: true,
compass: true,
},
gestures: {
scroll: true,
tilt: true,
rotate: true,
zoom: true,
},
});
this.map.clear();
}
async initializeMarkers() {
this.map.clear();
this.markers = {};
this.circles = {};
for (const person of this.people) {
await this.map.addMarker({
title: person.alias,
position: { lat: 114, lng: 22 },
visible: false,
animation: GoogleMapsAnimation.DROP,
}).then(
marker => {
this.markers[person.uuid] = marker;
}
);
await this.map.addCircle({
radius: 30,
center: this.markers[person.uuid].getPosition(),
fillColor: 'rgba(0, 0, 255, 0.5)',
strokeColor: 'rgba(0, 0, 255, 0.75)',
strokeWidth: 1,
visible: false,
}).then(
circle => {
this.circles[person.uuid] = circle;
}
);
this.markers[person.uuid].bindTo('position', this.circles[person.uuid], 'center');
}
}
showMarker(person: any) {
const marker = this.markers[person.uuid];
const circle = this.circles[person.uuid];
if (marker.isVisible()) {
marker.hideInfoWindow();
marker.setVisible(false);
circle.setVisible(false);
} else {
marker.showInfoWindow();
marker.setVisible(true);
circle.setVisible(true);
}
this.map.setAllGesturesEnabled(true);
}
ngOnInit() {
this.platform.ready().then(() => this.loadMap());
}
}
Suppose "people" is a valid array that contains "person" objects with key UUID.
wf9a5m75
commented
4 years ago <ion-content>
<div id="map_canvas"></div>
<ng-container *ngFor="let person of people">
<ion-item (click)="showMarker(person)">
Show Marker
</ion-item>
</ng-container>
</ion-content><ion-content> <div id="map_canvas"></div> <ng-container *ngFor="let person of people"> <ion-item (click)="showMarker(person)"> Show Marker </ion-item> </ng-container> </ion-content>
No, it's not an issue... div element must be outside ion-content, otherwise the map cannot be visible. And the map is functional and draggable unless I make markers visible/invisible.
wf9a5m75
commented
4 years ago Please share your project "files(not past code)" on GitHub.
tomfong
commented
4 years ago <ion-content> <div id="map_canvas"></div> <ng-container *ngFor="let person of people"> <ion-item (click)="showMarker(person)"> Show Marker </ion-item> </ng-container> </ion-content>
sorry... yours is solution, and I will close this issue.
I'm submitting a ... (check one with "x")
If you choose 'problem or bug report', please select OS: (check one with "x")
cordova information: (run
$> cordova plugin list)If you use
@ionic-native/google-maps, please tell the package.json (only@ionic-native/coreand@ionic-native/google-mapsare fine mostly)Current behavior: When I click a button to set some Marker and Circle visible, they become visible but the gesture of the map is not functional. I can only drag the map upwards but cannot drag to other directions unless I leave the page and enter the page again.
Expected behavior: After setting visibility of some Marker and Circle, the gesture of the map should function normally.