Angular – Close the previous infoWindow with Angular Map @agm

angulargoogle maps

I am asking a question that many people ask, but no one gave a clear answer, almost on AGM (Angular 2 package for Google map)

Here is my code, but my first opened marker does not want to close, and the other markers close half the time

clickedMarker(marker: Marker, infoWindow, index: number) {

   if (this.infoWindow && this.infoWindow !== infoWindow) {
      this.infoWindow.close();
    }
    this.infoWindow = infoWindow;
}

Can someone help me to fix this close problem, using the close function or the event emitter https://angular-maps.com/api-docs/agm-core/components/AgmInfoWindow.html#source

Thanks for your time and help 😉

EDIT : FOUND THE ANSWER

I had my <agm-info-window #infoWindow> displaying multiple information using <a *ngIf="myCondition"..>{{address}}</a> but it looks like it was not rendering the popup when the condition was evaluate to true again.

I replaced it by <a [class.hidden]="!myCondition">..</a> and it fixed the multiple display of markers.

Another good practice is to close when there is a click on map, and to close it if opened :

clickedMap($event) {
   if (this.infoWindow) {
      this.infoWindow.close();
   }
}

It might help in the future… who knows ?

Best Answer

After a long research and unclear solutions a finally got a fine solution for clear previous agm-info-window when a new one is opened

This is my component.html:

 <agm-map (mapClick)="close_window($event)" [fullscreenControl]='true' [mapTypeControl]='true' [latitude]="lat" [longitude]="lng" [zoom]="13" [scrollwheel]="false">
     <div *ngFor="let data of zonas">
        <agm-marker (markerClick)=select_marker(infoWindow) [latitude]="data.latitud" [longitude]="data.longitud">
           <agm-info-window #infoWindow >            
           </agm-info-window>
         </agm-marker>
      </div>
  </agm-map>

And this is my component.ts:

constructor(public apiService: ApiService) {}
infoWindowOpened = null
previous_info_window = null
...
close_window(){
if (this.previous_info_window != null ) {
  this.previous_info_window.close()
  }    
}

select_marker(data,infoWindow){
 if (this.previous_info_window == null)
  this.previous_info_window = infoWindow;
 else{
  this.infoWindowOpened = infoWindow
  this.previous_info_window.close()
 }
 this.previous_info_window = infoWindow
}

So every time a new window will be open it detect the event and closes the previous one, also this is working for closing a opened window if the user clicks outside the window in any other part of the map

Objectives

We would like to set a zoom level of AGM map to show all the markers on the map. Typically in Google Maps JavaScript API you use the fitBounds() method of the google.maps.Map class to achieve this.

https://developers.google.com/maps/documentation/javascript/reference/3/map

So, we have to get instance of the map object (the JavaScript API instance) and apply fitBounds() on it.

Solution

I have created a simple example that has a mock service that provides JSON data for 5 markers and draws map and markers using AGM map. In this example I used @ViewChild decorator to get the instance of AGM map and listen the mapReady event to get instance of map object (from JavaScript API). Once I get map instance I can easily create LatLngBounds object and call fitBounds() on map object. Have a look at the ngAfterViewInit() method in the app.component.ts to get an idea.

Code snippet

app.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MyMarker } from './marker';
import { MarkersService } from './markers.service';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

  title = 'AGM project (so48865595)';
  lat = 41.399115;
  lng = 2.160962;
  markers: MyMarker[];

  @ViewChild('AgmMap') agmMap: AgmMap;

  constructor(private markersService: MarkersService) { }

  ngOnInit() {
    this.getMarkers();
  }

  ngAfterViewInit() {
    console.log(this.agmMap);
    this.agmMap.mapReady.subscribe(map => {
      const bounds: LatLngBounds = new google.maps.LatLngBounds();
      for (const mm of this.markers) {
        bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
      }
      map.fitBounds(bounds);
    });
  }

  getMarkers(): void {
    this.markers = this.markersService.getMarkers();
  }

  mapIdle() {
    console.log('idle');
  }
}

app.component.html

<h1>{{ title }}</h1>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map #AgmMap [latitude]="lat" [longitude]="lng" (idle)="mapIdle()">
  <agm-marker *ngFor="let p of markers" [latitude]="p.lat" [longitude]="p.lng"></agm-marker>
</agm-map>

Conclusion

If you would like to check complete example please download the sample project:

https://github.com/xomena-so/so48865595

I hope this helps!

Angular google map close info window on new marker click

You can rewrite your clickedMarker very simple as follows

previous;
...
clickedMarker(infowindow) {
    if (this.previous) {
      this.previous.close();
    }
    this.previous = infowindow;
  }

Make the change to your event binding function in the template

(markerClick)="clickedMarker(infoWindow)"

The live code is here

Best Answer

Related Solutions

Angular – way to set the bounds and Zoom level in AGM Map

Objectives

Solution

Code snippet

Conclusion

Angular google map close info window on new marker click

Related Topic