Search code examples
angulargoogle-mapsangular2-services

Navigate google map screen to updated marker position


I am using AGM(angular google map) for map stuff. I have put a getCurrentLocation button, which returns me latitude and longitude of current location. I am able to update the marker to that place but my maps is not navigating to that specific location. Here is my sample code.

getCurrentLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((response) => {
            this.setPosition(response);
        }, function () {
            alert("Unable to get the GPS location");
        }, { maximumAge: 60000, timeout: 5000, enableHighAccuracy: true });
    };
}

and here is my setPosition method

setPosition(position: Position) {
    this.marker.lat = position.coords.latitude;
    this.marker.lng = position.coords.longitude;
    //What to do here to move screen to this marker position
}

Here is my screen after updating the marker. Marker is lost. Thanks enter image description here


Solution

  • I was able to figure out the problem. Basically problem was i was mapping 'agm-marker' and 'agm-map' [latitude] and [longitude] with different variables. So once i started to map it with same variables it started to worked fine.

    <agm-map [latitude]="signageRequest.gpsXcoordinate" [clickableIcons]="gpsXcoordinateStatus.readonly" [mapDraggable]="!gpsXcoordinateStatus.readonly"
    [longitude]="signageRequest.gpsYcoordinate" [zoom]="zoom" [disableDefaultUI]=false [zoomControl]=false (mapClick)="mapClicked($event)"
        [usePanning]="true">
        <agm-marker [latitude]="signageRequest.gpsXcoordinate" [longitude]="signageRequest.gpsYcoordinate" [markerDraggable]="false"
                (dragEnd)="markerDragEnd(marker, $event)"></agm-marker>
    </agm-map>