Как создать перетаскиваемую карту Google

Question

Я просто хочу, чтобы маркер находился в центре, а карта должна быть перетаскиваемойцентр

Answer 1

Надежда !! это помогает любому ...

addMarker() {

    setTimeout(() => {
         this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
         this.markerOptions.position = this.map.getCenter();
         this.markerOptions.map = this.map;
         this.markerOptions.draggable = false;
         this.markerOptions.title = 'My Location';
         this.marker = new google.maps.Marker(this.markerOptions);
         this.marker.bindTo('position', this.map, 'center');   //bind marker to be in center


      google.maps.event.addListener(this.marker, 'dragend', () => {
        this.map.setCenter(this.marker.getPosition()); // Set map center to marker position
      });

     google.maps.event.addListener(this.map, 'dragend', () => {
       this.marker.setPosition(this.map.getCenter()); // set marker position to map center          
    });
  }, 100);
}

или еще другим способом:

Посетите эту ссылку: демо

Answer 2

Это код для решения вашей проблемы карта, как держать маркер в центре

<div id="map_canvas">
   <img src="assets/marker.png" id="centerMarkerImg">
</div>

1007 * CSS *

#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;
}

.ts

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';
  }

}