CODEWITHSUNDEEP
angulargoogle-maps-api-3google-maps-markersagm-map
Ree
Ree

Reputation: 903

angular agm-map how to let user drop marker

I've seen similar questions but at this point on my angular journey I do not possess enough understanding to implement their answers correctly.

I want users to be able to add a marker on the map. I am using agm-map.

I have seen this is the solution in the google api doc:

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
    }
  );

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.Marker({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

but I honestly don't know how to use it - specifically, where to place it?

And I wonder if this is compatible with agm-map. In agm-map I tried to find something similar and looked at the AgmMarker directive. But I'm not sure how to make sense of it all. My code for the map currently looks like this:

<agm-map id="map" [styles]="aubergine" [zoom]="15" [maxZoom]="25" [minZoom]="12" [disableDefaultUI]="true"
                  style="display:block;" [latitude]="lat" [longitude]="lng">

                  <agm-marker-cluster
                    imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">

                    <agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m.label, i)"
                      [latitude]="m.lat" [longitude]="m.lng" [label]="m.label" [markerDraggable]="m.draggable"
                      (dragEnd)="markerDragEnd(m, $event)" [iconUrl]="{
                      url: './assets/img/marker.png',
                      scaledSize: {
                          width: 20,
                          height: 20
                      }
                  }">

                      <agm-info-window>
                        <strong>here is some info</strong>
                      </agm-info-window>

                    </agm-marker>
                  </agm-marker-cluster>
                </agm-map>

Could someone please help me to put the pieces together?

Upvotes: 0

Views: 857

Answers (0)

Related Questions