CODEWITHSUNDEEP
google-mapsionic-frameworkgeolocationmapsionic-native
zaheer ahmed
zaheer ahmed

Reputation: 198

Move Camera to current position in ionic maps

I am working on google maps in ionic using google maps plugin and geolocation plugin. And getting my current location using watchposition function of geolocation that updates lat long after position changed. Every thing is fine but the problem that i am facing is that i want to move camera position to my current location that is changing by changing position. when i set the fixed lat long in movCamera function it moves the camera towards these latlong but when i set this to my current location it moves the map to some other location but not mine.

can any one tell me whats the problem??

Here is the code . . . 

    export class HomePage {
 x: number = 0;
  y: number = 0;
  constructor(public navCtrl: NavController,private googleMaps: GoogleMaps, public platform:Platform,private geolocation: Geolocation) {
            platform.ready().then(() => {
                    this.loadMap();
              });
  }

loadMap() {

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

this.geolocation.watchPosition().subscribe((position) => {
  this.x = position.coords.longitude;
  this.y = position.coords.latitude;
  let ionic: LatLng = new LatLng(this.x,this.y);
 let map: GoogleMap = this.googleMaps.create(element,{
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          }
        });
 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(() => {
console.log('====>>>>>Map is ready!');

 });

 let ionic1: LatLng = new LatLng(33.635322,73.073989);

 // create CameraPosition
 let Camposition: CameraPosition = {
   target: ionic,
   zoom: 22,
   tilt: 30
 };

 // move the map's camera to position
 map.moveCamera(Camposition);


}, (err) => {
  console.log(err);
});
}

}

Upvotes: 0

Views: 3231

Answers (1)

Tharindu Diluksha
Tharindu Diluksha

Reputation: 21

let ionic1: LatLng = new LatLng(33.635322,73.073989);

Here you are assigning your location coordinates to the ionic1 variable. But in the Camposition options you have provide variable named ionic for the target. 

// create CameraPosition
let Camposition: CameraPosition = {
    target: ionic,
    zoom: 22,
    tilt: 30
 };

It should be corrected as ionic1.

// create CameraPosition
let Camposition: CameraPosition = {
    target: ionic1,
    zoom: 22,
    tilt: 30
 };

Also do not use this kind of variable names. Use a proper naming convention in order to avoid these kinds of mistakes. Select like following.

let defaultLocation: LatLng = new LatLng(33.635322,73.073989);

Upvotes: 0

Related Questions