How to move Agm map in angular and fixed marker to the center and update lat and lng?

Question

In my angular 9 application i am using @agm/core to display map and showing a marker on the map and maker is draggable but i want marker should fixed on center and map should be moveable when map move stoped then update lat and lng how can i do this in angular. thanks in advance.

this is my project demo image

this is my component

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

    }

    ngOnInit() {
        //load Places Autocomplete
        this.mapsAPILoader.load().then(() => {
            this.setCurrentLocation();
            this.geoCoder = new google.maps.Geocoder;

            let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
            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;
                });
            });
        });
    }

    // Get Current Location Coordinates
    private setCurrentLocation() {
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition((position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;
                this.zoom = 8;
                this.getAddress(this.latitude, this.longitude);
            });
        }
    }

this is my view code

  <agm-map #gm [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
        <agm-marker [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
            (dragEnd)="markerDragEnd($event)" (mouseOver)="onMouseOver(infoWindow,gm)"
            (mouseOut)="onMouseOut(infoWindow, $event)">
            <agm-info-window [isOpen]="false" #infoWindow>
                <a class="btn btn-attention pull-right">
                    Press the Red Location Pin, then move the Pin to your location。
                    <i class="fa fa-angle-double-right"></i>
                </a>
            </agm-info-window>
        </agm-marker>

    </agm-map>

score 2 · Answer 1 · answered Sep 27 '20 at 18:58

Fixed Map Marker

You can use normal CSS to achieve this ie:

<div class="map">
  <agm-map
 ...
  ></agm-map>
  <div class="map-center-overlay">
    <img src="../assets/marker.svg" width="30" height="30">
  </div>
</div>

and CSS:

.map {
  position: relative;
}

.map-center-overlay {
  margin: 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

You may also be able to achieve this using <agm-marker> but there are some complications using a fixed position, see here: Can I give an anchor to a marker in agm/core?

Updating lat/long on drag end

You want to attach to the map drag end event, rather than the marker (as you will not be dragging the marker).

It seems the dragEnd event on the map is not directly exposed(see https://github.com/SebastianM/angular-google-maps/issues/1092) but it can be achieved like:

<agm-map
  ...
  (centerChange)="centerChanged($event)"
  (mapReady)="mapReady($event)"
  ></agm-map>    

public centerChanged(coords: LatLngLiteral) {
    this.centerLatitude = coords.lat;
    this.centerLongitude = coords.lng;
  }

public mapReady(map) {
  map.addListener("dragend", () => {
    // do something with centerLatitude/centerLongitude
    });
  }

Stackblitz

Here is a working stackblitz(view the console to see the lat/long on drag end): https://stackblitz.com/edit/so-agm-map-centre-marker?file=src%2Fapp%2Fmap.component.ts

How to move Agm map in angular and fixed marker to the center and update lat and lng?

1 Answers1