CODEWITHSUNDEEP
javascriptangulargoogle-mapsmaps
Khael Bubniak
Khael Bubniak

Reputation: 150

Angular Google Maps - Maps Info Windows

I am working on an angular app where I've implemented Angular Google Maps, (angular-maps.com). When I click a place on the map, it opens the standard info window of google maps. I need to replace this standard info window with a custom info window, with some buttons of my application. I don't know how to to do this inside angular and angular google maps. Does anyone know how to manipulate this standard info window, prevent it from opening and gathering all the information that had on it, and put it in a custom info window?

I've tried to implement javascript inside a ngZone, to run it outside angular, but with no success, I've tried to look up from some pre-built directive in angular maps, but i couldn't find it

this is the code that initializes the map:

 ngOnInit() {
this.mapsAPILoader.load().then(
  () => {
    const autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement, {types: ['establishment'] });
    autocomplete.addListener('place_changed', () => {
      this.ngZone.run(() => {
        const place: google.maps.places.PlaceResult = autocomplete.getPlace();
        if (place.geometry === undefined || place.geometry === null) { return; } else {
          const poi: Poi = {
            uid: place.place_id,
            title: place.name,
            coords: {lat: place.geometry.location.lat(), lng: place.geometry.location.lng()},
            draggable: false,
        };
          this.temporaryMarker(poi);
        }
      });
    } );
  }
);

}

this is my function that handle the "mapClick" of angular google maps:

 mapClicked(e: MouseEvent) {
console.log('mapClicked()=>', e);
if (e.placeId) {
  this.getPlaceDetails(e.placeId).subscribe(place => this.openInfoWindow(place));
}
this.clickedLat = e.coords.lat;
this.clickedLng = e.coords.lng;
this.infoWindowIsOpen = true;
const preventInfoWindow = // HERE IS WHERE I SUPPOSE THAT SHOULD HAVE MY CODE
// service.getDetails(request, this.openInfoWindow(place, status));
  }

until now, any MARKER click i can manipulate its info window, but that was easy. What i can't do, is to manipulate info windows from places on google maps, that standard Points of interest that google maps show you. I must have them on my UI, but I need to handle their information, prevent the standard info window from opening, and opening a custom info window.

Upvotes: 1

Views: 362

Answers (1)

f.khantsis
f.khantsis

Reputation: 3540

First look at this: https://angular-maps.com/api-docs/agm-core/components/agmmap#showDefaultInfoWindow

What you want to do, is

<agm-map [showDefaultInfoWindow]="false" (click)="mapClicked($event)">

Then the default window won't open, and you can show your own info window.

Upvotes: 1

Related Questions