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 6 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?

Add comment

Arsenii pro answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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 6 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Arsenii

Pro User 69Support score
16Questions 5Answers 0Snippets