I am currently using the AGM angular module for Angular 2+ to integrate the Google Map API.
In my project, I have a directive that displays waypoints as markers on the map using the Google Map Directions Service.
Now, I am looking for a way to handle the onClick event on each marker on the map and display tooltips based on the marker's position.
However, I am struggling to find a method to retrieve a list of markers from the map object. Unfortunately, there is no "getMarkers()" method available.
Since the markers were added to the map by google.maps.DirectionsRenderer from the Google Maps Directions service response, I do not have a list of existing markers at this point.
Below is the code snippet of my directive:
@Directive({
selector: 'agm-map-directions'
})
export class DirectionsMapDirective implements OnChanges {
@Input()
private waypoints: Waypoint[];
@Input()
private origin: string;
@Input()
private destination: string;
@Input()
private optimizeWaypoints: boolean;
@Input()
private travelMode: string;
constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnChanges(changes: SimpleChanges): void {
this.renderDirections();
}
renderDirections() {
this.gmapsApi.getNativeMap().then(map => {
let directionsService = new google.maps.DirectionsService;
let directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
directionsService.route({
origin: this.origin,
destination: this.destination,
waypoints: this.waypoints,
optimizeWaypoints: this.optimizeWaypoints,
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
//There I want to handle markers onClick event
} else {
window.alert('Directions request failed due to ' + status);
}
});
});
}
}
Here is my template:
<div id="map">
<agm-map *ngIf="mapLoaded"
style="height: 500px"
[zoomControl]="false"
[disableDefaultUI]="false"
[disableDoubleClickZoom]="true"
[streetViewControl]="false">
<agm-map-directions
[waypoints]="waypoints"
[origin]="supplierInfo.origin"
[destination]="supplierInfo.destination"
[optimizeWaypoints]="true"
[travelMode]="'DRIVING'"></agm-map-directions>
</agm-map>
</div>
Is there a method to easily retrieve a list of markers from the map object?
Alternatively, are there any other solutions to achieve the same goal?