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.