Are there any ways to make the map marker always on the middle of the map even if camera moving?

[kefahB]

Hello,

see here #266

[azambiez]

@kefahB I didn't meant to get the current center of the map. I meant to always let the MAP MARKER always center screen even if I am moving the map.

[kefahB]

@azambiez Yes in your cameraChanged="onCameraChanged" you declar getMapsCenter and it will give you the new center of the maps; Then you change the lat lng of your old marker

function onCameraChanged(args) {
        let newCenter = getMapsCenter();
        // get your old marker
        marker = mapView.findMarker(function (marker) {
            //do stuff here if needed || maybe this work here : marker.position = mapsModule.Position.positionFromLatLng(newCenter.lat, newCenter.lng);
        });
        // or here
        marker.position = mapsModule.Position.positionFromLatLng(newCenter.lat, newCenter.lng);
}

[azambiez]

@kefahB onCameraChanged only fire AFTER MAP HAS STOP MOVING, not when the map is moving. So currently I use a fake maker using image and set it to center of screen. Hope to have a solution on this soon.

[kefahB]

@azambiez if you want keep your marker in the middle while maps move try to use cameraMove

if you take look at doc you find this :

cameraChanged | Fired after the camera has changed  |
---------------- + ------------------------------------ |
cameraMove       | Fired while the camera is moving       |

[azambiez]

@kefahB cameraMove does not trigger anything.

[kefahB]

Can you provid the code with xml and js ?

[azambiez]

This is my XML.

`<Page class="page" navigatingTo="onNavigatingTo"
xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk">

<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://back" tap="onBackButtonTap"/>
    <Label class="action-bar-title" text="Create Order"></Label>
</ActionBar>

<GridLayout>
    <maps:mapView
        latitude="{{ latitude }}" 
        longitude="{{ longitude }}" 
        mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
        zoom="{{ zoom }}" 
        bearing="{{ bearing }}" 
        tilt="{{ tilt }}" 
        padding="{{ padding }}" 
        mapReady="onMapReady"
        cameraMove="onCameraMove"
        cameraChanged="onCameraChanged">

    </maps:mapView>

    <AbsoluteLayout width="70" height="100">
        <Image src="res://marker" stretch="fill" class="marker"/>
    </AbsoluteLayout>

    <GridLayout android:rows="*, auto" ios:rows="auto, *">
        <StackLayout orientation="vertical" android:row="1" class="map-control">
            <GridLayout columns="auto, *" rows="auto, *">
                <Label row="0" col="0" text="From" />
                <TextField hint="From" text="{{ from }}" editable="false" row="0" col="1"/>
                <Label row="1" col="0" text="To" />
                <TextField hint="To" text="{{ to }}" style="margin-top: 0;" editable="false" row="1" col="1" tap="onDestinationTextTap"/>
            </GridLayout>
        </StackLayout>
    </GridLayout>
</GridLayout>

`

And my JS.

`const app = require("application"); var mapsModule = require("nativescript-google-maps-sdk"); var frameModule = require('ui/frame'); var geolocation = require("nativescript-geolocation");

const OrderViewModel = require("./order-view-model"); const MapViewModel = require("../shared/map-view-model"); var startingPoingMarker = new mapsModule.Marker(); var mapViewModel = new MapViewModel();

var mapInfo = { latitude: 11.577725, longitude: 104.83431, zoom: 16, bearing: 0, tilt: 0, padding: [80, 40, 40, 40], mapAnimationsEnabled: true, from: "Pin location", to: "...", }; var orderViewModel = new OrderViewModel(mapInfo);

exports.onNavigatingTo = function (args) { const page = args.object; page.bindingContext = orderViewModel; app.getRootView().gesturesEnabled = false; };

exports.onDrawerButtonTap = function (args) { const sideDrawer = app.getRootView(); sideDrawer.showDrawer(); };

exports.onMapReady = function (args) { var mapView = args.object; var gMap = mapView.gMap;

// Request location permission then enable the get current location button
mapViewModel.requestPermissions().then(function(granted){
    if(granted){
        mapView.myLocationEnabled = true;
        mapView.settings.myLocationButtonEnabled = true
    }
})
// move to device's current location
.then(function(){
    geolocation.getCurrentLocation({desiredAccuracy: 3, updateDistance: 10, maximumAge: 20000, timeout: 20000}).
    then(function(location) {
        if (location) {
            orderViewModel.latitude = location.latitude;
            orderViewModel.longitude = location.longitude;
        }
    }, function(e){
        console.log("Error: " + e.message);
    });
})
// Create a starting point marker
.then(function(){
    // var marker = new mapsModule.Marker();
    startingPoingMarker.position = mapsModule.Position.positionFromLatLng(orderViewModel.latitude, orderViewModel.longitude);
    startingPoingMarker.title = "From";
    startingPoingMarker.snippet = "Starting Point";
    startingPoingMarker.flat = false;
    startingPoingMarker.userData = { index : 1};
    // startingPoingMarker.infoWindowTemplate = 'testWindow';
    mapView.addMarker(startingPoingMarker);
    // console.log(startingPoingMarker);
});

};

exports.cameraChangeHandler = function (args){ console.log(args); }

exports.onBackButtonTap = function (args){ frameModule.topmost().goBack(); };

exports.onCameraChanged = function (args) { startingPoingMarker.position = mapsModule.Position.positionFromLatLng(args.camera.latitude, args.camera.longitude); }

exports.onCameraMove = function (args) { console.log(args); }

exports.onDestinationTextTap = function (args) { frameModule.topmost().navigate("choose-destination/choose-destination-page"); }`

[kefahB]

I have the same issue with mapReady it not fired when the map load .. try to move to another page or switch to anther app an go back and see id mapMove will trigger !