In ionic naitve google map, How to keep marker in center when i drag map or on camera_move_start, Like uber do or Careem

here is my code
import { Component } from ‘@angular/core’;
import { NavController, Platform } from ‘ionic-angular’;
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker,
Environment,
} from ‘@ionic-native/google-maps’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
map: GoogleMap;
constructor(public navCtrl: NavController, public platform :Platform) {
platform.ready().then(() => {
this.loadMap();
});
}
ionViewDidLoad() {
// this.loadMap();
}

loadMap() {

// This code is necessary for browser
// Environment.setEnv({
//   'API_KEY_FOR_BROWSER_RELEASE': '(your api key for `https://`)',
//   'API_KEY_FOR_BROWSER_DEBUG': '(your api key for `http://`)'
// });

let mapOptions: GoogleMapOptions = {
  camera: {
     target: {
       lat: 43.0741904,
       lng: -89.3809802
     },
     zoom: 18,
     tilt: 30,
   },
   center:{lat: 43.0741904, lng: -89.3809802}
};
let map_id  = document.getElementById('map');
this.map = GoogleMaps.create(map_id, mapOptions);
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {


  console.log('map is ready to use.');
  let marker: Marker = this.map.addMarkerSync({
    title: 'Ionic',
    icon: 'blue',
    animation: 'DROP',
    position: {
      lat: 43.0741904,
      lng: -89.3809802
    },
    map:this.map
  });
  

  this.map.addEventListener(GoogleMapsEvent.CAMERA_MOVE).subscribe((data) => {
        console.log(this.map.getCameraPosition())
        marker.setPosition(data.target)
  });
  this.map.addEventListener(GoogleMapsEvent.CAMERA_MOVE_END).subscribe((data) => {
    console.log(this.map.getCameraPosition())
    console.log(data,'2');
    marker.setPosition(data.target);

});
this.map.addEventListener(GoogleMapsEvent.MAP_DRAG).subscribe((data) => {
console.log(this.map.getCameraPosition())
console.log(data,‘3’);
marker.setPosition(data.target);
});

  // marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
  //   alert('clicked');
  //   console.log(this.map.getCameraTarget())
  // });
  // marker.on(GoogleMapsEvent.CAMERA_MOVE).subscribe((MAP_DRAG) => {
  //   console.log(MAP_DRAG,'MAP_DRAG');
  // });
  // marker.on(GoogleMapsEvent.CAMERA_MOVE_END).subscribe((MAP_DRAG_END) => {
  //   console.log(MAP_DRAG_END,'MAP_DRAG_END');
  // });
  // marker.on(GoogleMapsEvent.CAMERA_MOVE_START).subscribe((MAP_DRAG_START) => {
  //   console.log(MAP_DRAG_START,'MAP_DRAG_START');
  // });

});

}

}

1 Like
<div id="map_canvas">
   <img src="assets/marker.png" id="centerMarkerImg">
</div>
#map_canvas {
  position: relative;
}
#centerMarkerImage {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom:0;
  margin: auto;
  width: 32px; // image width
  height: 24px; // image height
  z-index: 1;
}

export class HomePage {
  dummyMarker: any;
  mapDragMode: boolean = false;
  centerPos: any;

  ionViewDidLoad() {
    this.dummyMarker = document.getElementById("centerMarkerImg");
    this.dummyMarker.style.display = 'none';
  }

  loadMap() {
     this.map.on(GoogleMapsEvent.CAMERA_CHANGE).subscribe((params: any[]) => {
       if (!this.mapDragMode) {
         return;
       }
       const cameraPosition: any = params[0];
       this.centerPos = cameraPosition.target;
     });
   }
  start() : {
    this.mapDragMode = true;
    this.dummyMarker.style.display = 'block';
  }

  end() : {
    this.mapDragMode = false;
    this.dummyMarker.style.display = 'none';
  }

}
1 Like

Thanks for help, it works :slight_smile:

can you share the code? please.

bro? please share the code, i`m stuck here

<ion-content>

<div id=“map” style=“width: 100%; height: 100%;”>

<img src=“https://banner2.kisspng.com/20180406/sge/kisspng-image-map-google-map-maker-google-maps-map-marker-5ac74e8137f885.3108435315230112012293.jpg” id=“centerMarkerImg” __plugindomid=“pgm1065167708222” style="position: absolute;

left: 0;

top: 0;

right: 0;

bottom:0;

margin: auto;

width: 32px;

height: 24px;

z-index: 1;" id=“marker”>

</div>

</ion-content>