Questions

agm dynamic marker not updating?

Spread the love

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

agm dynamic marker not updating
agm dynamic 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

Reference

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


Spread the love
Tagged , , , , , , ,

About Chandra

Technology lover. Professionally Software Developer and write some Technical Blog to help newcomer.
View all posts by Chandra →

4 thoughts on “agm dynamic marker not updating?

Leave a Reply

Your email address will not be published.