How to make a responsive canvas for google map in ionic


#1

In this code, I am trying to make map canvas fit to below of box but it seems auto value is not acceptable for the map element.

map.ts

initializeMap() {
    let minZoomLevel = 16;
    Geolocation.getCurrentPosition().then((position) => {
        this.map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: minZoomLevel,
        center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        mapTypeControl: false,
        streetViewControl: false,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
    });
}

Html has a box under navbar to define Origin and Target of delivery service:

map.html

<ion-content>
  <ion-row>
    <ion-col width-80>
       <ion-item> <ion-label >Origin:</ion-label> <ion-input  [value]="Origin" ></ion-input> </ion-item>
    </ion-col>
    <ion-col> 

  <button ion-button icon-only icon-left (click)="OriginMarker()"  color="light"><ion-icon name="locate" ></ion-icon> </button>    
 </ion-col>  
</ion-row>
  <ion-row>
    <ion-col width-80>
       <ion-item> <ion-label >Target: </ion-label> <ion-input  [value]="Target"></ion-input> </ion-item>
    </ion-col>
    <ion-col> 
    <button ion-button icon-only icon-left (click)="TargetMarker()" color="secondary"><ion-icon name="locate" ></ion-icon> </button>
 </ion-col>  
</ion-row>
<ion-row>
    <ion-col width-75>
<button ion-button block outline color="secondary" large >Start Delivery </button>
  </ion-col>
  <ion-col>
 <ion-label>cost: <br>{{price}} </ion-label>
  </ion-col>
</ion-row>
<div id="map_canvas"></div>
</ion-content>

map.scss

page-map {
    #map_canvas {
      width: 100%;
      height: auto;
    }
}

Any of width and height properties are not accepting auto value.

1st screenshot shows height :auto;:

2nd screenshot when using height :100%;:

as you can see above when using 100% it make additional page which is out of screen and then needs to be scrolled.


#2

Hi , did you mange to get it done , can you please share the solution


#3

No unfortunately still same problem.
Only fallowing parameters are acceptable

	#map_canvas {
      width: 100%;
      height: 100%; //80%
    }

such this one is not appear in display(I’m not tested on device yet):

#map_canvas {
      width: 100%;
      height: AUTO;
    }