cordova-plugin-googlemaps: Map is not able to be dragged or zoom
I’m submitting a … (check one with “x”)
- question
- any problem or bug report
OS: (check one with “x”)
- Android
- iOS
- Browser
cordova information: (run $> cordova plugin list)
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)
"@ionic-native/core": "^5.10.0",
"@ionic-native/google-maps": "^5.5.0",
Current behavior: When i launch the app on my android device - it is shown, even position is perfectly set but right after map is not moving at all and if a set a different position of a marker - it is still does not move, camera does not move. I tried event like MAP_CLICK - does not work.
Expected behavior: I can easily drag or zoom or whatever what can i do with map. on the browser when ionic cordova run browser everything works perfectly.
Screen capture or video record:
I send a video archived - th ebehavior on the phone
Related code, data or error log (please format your code or data):
That is my ts file functions related to the map
geoFunction(){
if(this.showMap){
this.searchCoordinates();
} else {
this.openMaps();
}
}
openMaps() {
console.log("enter map");
this.showMap = true;
Environment.setEnv({
'API_KEY_FOR_BROWSER_DEBUG': 'AIzaSyCdYCIfghArCYBeJnstJCaitNU_dlhJFcg',
'API_KEY_FOR_BROWSER_RELEASE': 'AIzaSyCdYCIfghArCYBeJnstJCaitNU_dlhJFcg'
})
LocationService.getMyLocation().then((meLocation: MyLocation) => {
let options: GoogleMapOptions = {
camera: {
target: meLocation.latLng
}
};
this.map = GoogleMaps.create('map_canvas', options);
this.map.animateCamera({
target: meLocation.latLng,
zoom: 17,
tilt: 60,
bearing: 140,
duration: 5000
}).then(() => {
this.map.addMarker({
title: 'Стандартная точка выезда',
position: meLocation.latLng,
draggable: true,
animation: 'bounce'
}).then((marker: Marker) => {
this.marker = marker;
this.onMarkerAdded.call(this)
});
});
});
}
onMarkerAdded() {
this.marker.showInfoWindow();
this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe(
(position: any) => {
Geocoder.geocode({
position: position[0]
}).then((responce: GeocoderResult[]) => {
if(responce.length != 0){
this.data.car.start_location = `${responce[0].extra.lines[2]}, ${responce[0].extra.lines[1]} ${responce[0].extra.lines[0]}`;
this.marker.setPosition(position[0]);
this.marker.setTitle(this.data.car.start_location);
this.marker.showInfoWindow();
} else {
this.alertProv.showAlert('','Адресс по указанной Вами точке не существует. Выберите другой.');
}
});
}
);
}
searchCoordinates(){
Geocoder.geocode({
address: this.data.car.start_location
}).then((responce: GeocoderResult[]) =>{
console.log(responce);
if(responce.length != 0){
this.marker.setPosition(responce[0].position);
this.marker.setTitle(this.data.car.start_location);
this.marker.showInfoWindow();
} else {
this.alertProv.showAlert('','Геоточки по указанному вами адрессу не существует. Введите другой.');
}
});
}
That is my html where map is set
<div class="geo">
<div class="svg" (click)="geoFunction()">
<svg ......../></svg>
</div>
<ion-input class="input" type="text" name="geo" placeholder="Стандартная точка выезда" [(ngModel)]="data.car.start_location" required>
</ion-input>
</div>
<div class="map" id="map_canvas" *ngIf="showMap">
</div>
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 19 (10 by maintainers)
Commits related to this issue
- fix: can not intractive with the map inside <form> https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2665 — committed to mapsplugin/cordova-plugin-googlemaps by wf9a5m75 5 years ago
@traktor2017 Happy to take a look
Please read this page BEFORE posting your question. https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2661