How to create agm-map with interface to pick up location?


Topic: How to create agm-map with interface to pick up location?

Arsenii pro asked 7 years ago

I need an interface for user to select a location on the map for the future use in the app. I use the next code for google map integration: <agm-map class="z-depth-1-half map-container" style="height: 400px;" [latitude]="pickup_latitude" [longitude]="pickup_longitude" [zoom]="13"> <agm-marker [(latitude)]="pickup_latitude" [(longitude)]="pickup_longitude" [draggable]="true" [title]="'Pickup Location'"></agm-marker> </agm-map> According to marker.d.ts code I added 'draggable' property to change marker location. But it doesn't work. I see the marker but can't change it's location. How can I fix it?

Arsenii pro answered 7 years ago

I've found solution on my own. Here it is:
<agm-map class="z-depth-1-half map-container" style="height: 400px;" [latitude]="mapOpenLocation.lat" [longitude]="mapOpenLocation.lng" [zoom]="13" [fullscreenControl]="true" (mapClick)="changePickupMarkerLocation($event)">
<agm-marker *ngIf="showMarker" [latitude]="pickup_latitude" [longitude]="pickup_longitude" [title]="'Pickup Location'"></agm-marker>
</agm-map>
and corresponding component code:
showMarker = false;
changePickupMarkerLocation($event: { coords:LatLngLiteral}) {
this.pickup_latitude=$event.coords.lat;
this.pickup_longitude=$event.coords.lng;
this.showMarker=true;
}
Hope it can be helpful to somebody.

Damian Gemza staff answered 7 years ago

Dear Arsenii, We cannot get you ready-to-use solution, because we're not providing it. You have to use official agm-core docs: https://angular-maps.com/ Best Regards, Damian

Arsenii pro commented 7 years ago

Thank you for the reply. I've found a workaround solution provided below. Regards, Arsenii

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No