Angular Google Maps - Maps Info Windows

Question

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.

f.khantsis · Accepted Answer · 2019-09-09 09:42:11Z

1

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.

answered Sep 9, 2019 at 9:42

f.khantsis

3,6106 gold badges52 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Google Maps - Maps Info Windows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related