agm dynamic marker not updating?

Maps forced refresh or mouse click on map? agm marker not updating?

The solution you need to use “NgZone run” to update or refresh map.

Step: 1

You have in import NgZone from angular/core
import { NgZone } from ‘@angular/core’;

Step: 2

Next you need to inject into constructor.

constructor(
    private ngZone: NgZone
  ) {}

Step: 3

Modify map event call you should have to keep this map modification code/functionality into ngZone run block.

anyMapEventFuction(event){
      this.ngZone.run(() => {     
          // map modification code
     }
}

Example code below:

import { Component, NgZone, OnInit, ViewChild, Input, ElementRef } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { AgmCoreModule, MapsAPILoader } from '@agm/core';
import { BrowserModule } from "@angular/platform-browser";

declare var google: any;

@Component({
  selector: 'app-map-google-autocomplete',
  templateUrl: 'map-google-autocomplete.component.html',
  styleUrls: ['map-google-autocomplete.component.css'],
})

export class MapGoogleAutocompleteComponent implements OnInit {
  public latitude: number;
  public longitude: number;
  public searchControl: FormControl;
  public zoom: number;
  public google: any;

  @ViewChild("search")
  public searchElementRef: ElementRef; 

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

  ngOnInit() {
    this.mapsAPILoader.load().then(() => {
      //set google maps defaults
      this.zoom = 4;
      this.latitude = 39.8282;
      this.longitude = -98.5795;

      //create search FormControl
      this.searchControl = new FormControl();

      //set current position
      this.setCurrentPosition();

      //load Places Autocomplete
      this.mapsAPILoader.load().then(() => {
        let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
          types: ["address"]
        });
        autocomplete.addListener("place_changed", () => {
          this.ngZone.run(() => {
            //get the place result
            let place: google.maps.places.PlaceResult = autocomplete.getPlace();

            //verify result
            if (place.geometry === undefined || place.geometry === null) {
              return;
            }

            //set latitude, longitude and zoom
            this.latitude = place.geometry.location.lat();
            this.longitude = place.geometry.location.lng();
            this.zoom = 12;
          });
        });
      });
    });
  }


 private setCurrentPosition() {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 12;
      });
    }
  }

}

Keep your google map functional change under ngZone run block to avoid map update or refresh issue.

Hope you have fixed your all issues now. Please give your valuable feedback. If you have any kind of questions or issues about this article, please let me know.

Follow others articles

• Angular google maps (agm) complete guide tutorial
• AGM MAPS ZOOM CONTROL POSITION SET

Reference

• Angular Google Maps (AGM)

Thank you! please don’t forget to like our Facebook page to get more interesting updates.