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

video_2019-07-31_09-58-24.zip

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

Most upvoted comments

@traktor2017 Happy to take a look

Please read this page BEFORE posting your question. https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2661