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