Map is not able to be dragged or zoom

[traktor2017]

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>

[traktor2017]

do not know why but my html do not want to be posted

[wf9a5m75]

Please read this page BEFORE posting your question.
#2661

[traktor2017]

I formatted the code. I have tried to add draggable property into mapOptions but it hasnt helped

[wf9a5m75]

Thank you. I think the problem is in your HTML structure. Please share your project files on GitHub repository in order to inspect your app.

[traktor2017]

I can share it on bitbucket, is this ok?

[traktor2017]

Created test project and invited you. The problem is on the page reg-continue. Should load this page right away

[traktor2017]

@wf9a5m75 have you walk through my issue already?

[wf9a5m75]

Not yet. I'm busy person. I check many issues not only yours but also other people's, one by one.

[wf9a5m75]

I built your app, but I couldn't read your language. Could you change your app code, just display a map page?

[traktor2017]

This is already the right page. You should scroll to the bottom. and click on this icon

Right under input the map will be shown.
Sorry not to discribe that before

[traktor2017]

@wf9a5m75 when you will be able to check? or give some possible reasons of the problem, so i can check it by myself

[wf9a5m75]

Sorry for late, but I don't have enough private time .

#2667

@adamduren is a good contributor and he has good knowledge.
Please invite him to your project.

[adamduren]

@traktor2017 Happy to take a look

[traktor2017]

sent the invite already

[adamduren]

@traktor2017 I made a pull request which demonstrates making the map scrollable.

The reason for this is that the map will not be scrollable if within a form tag. I am not sure why this decision was made but here is the code which causes the behavior. Hope this helps.

@wf9a5m75 Can you explain the reasoning behind excluding these tags?

[wf9a5m75]

I don't remember why form is added, but these exclude tags usually do not contains map inside them.
Skipping the number of elements speeds up the process time.

canvas and svg are different reason. Both tags do not contain DOM elements inside them.

[adamduren]

@wf9a5m75 Thank you for the explanation. I recently encountered this as well. Maybe we should document in the readme if not already elsewhere for this exclusion. I would see it as a fairly common pattern for a map to be in a form in the case of it being used to power user input.

If it is documented then that might help resolve confusion for now. Future changes might be to do a walk up the dom tree from where the app element is located and remove from the ignored tags if an ignored tag an ancestor.

Pseudo Algorithm:

mapEl = Located Map Element
ignoredTags = ['pre', 'textarea', 'p', 'form', 'input', 'caption', 'canvas', 'svg']
for ancestor in mapEl.parent:
  if ancestor.elementName in ignoredTags:
    ignoredTags.remove(ancestor.elementName)

I know it's more complicated than this as it would have to be per map instance but just a cursory idea for a solution that eventually caters to supporting more tags..

[wf9a5m75]

I confirmed form is able to remove from the exclude list.

The tags are defined long time ago, but the implementation have updated.
The current implementation checks elements have map under them.

I update the code on the multiple_maps branch.

[traktor2017]

Thank you guys very much!