I'm currently in the process of developing a hybrid mobile application using Ionic. One aspect of the app involves incorporating swipe-able cards on top of a map, similar to the layout seen in the TripAdvisor app. As a newcomer to this technology, I'm facing some challenges with implementing this feature.
Take a look at the TripAdvisor example
To achieve this design, I am utilizing Angular Google Maps for the map display within an <agm-map> element. Additionally, I am employing Ionic's ion-slides element along with ion-card in each ion-slide to create the sliding cards effect. My goal is to have the map occupy the entire content area while having the slides positioned on top of it. Although I have managed to display the map and slides below it, I'm encountering difficulties in overlaying them. I experimented with different positioning techniques as suggested in this resource: Guide on floating a div over Google Maps, but these attempts either distort the card dimensions or cause the map to disappear entirely.
While I attempted to replicate the issue on stackblitz, I encountered difficulty loading the map. Nonetheless, I will provide the code snippet for reference (please ensure to add your own Google Maps API key in app.module.ts) View the code here
Any assistance or guidance would be greatly appreciated. Given my limited experience in this field, I am eager to learn and improve!
home.html code:
<ion-header>
<ion-navbar>
<ion-title>
Slides Overlay
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<agm-map [latitude]="51.507692" [longitude]="-0.127718">
</agm-map>
<ion-slides loop centeredSlides slidesPerView="auto">
<ion-slide *ngFor="let slide of scenes; let i = index">
<ion-card>
<img [src]="cat" class="slide-image">
<ion-card-content>
<h2>
Heading {{i}}
</h2>
<h3>Sub-heading {{i}}</h3>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
home.scss code:
page-home {
agm-map {
height: 100%;
}
.swiper-slide{
width: 70% !important;
}
.slide-image {
height: 100px;
width: 100%;
object-fit: cover;
}
ion-card {
height: 160px;
}
ion-card-content, .card-content-md{
text-align: left;
padding: 0 0 0 3px;
}
}