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