1

I'm creating a hybrid mobile app using Ionic and for one page I'm trying to have swipe-able cards that sit on top of a map, similar to in the TripAdvisor app. I'm new to all of this so really struggling with this one.

TripAdvisor example

I'm using Angular Google Maps to create the map in an <agm-map> element. And Ionic's ion-slides element with ion-card in each ion-slide to create the sliding cards. I want the map to fill the entire content area. So far I have the map and the slides sitting below it, but I can't figure out how to get them to sit on top of it. I've tried playing around with positioning like suggested here: How to float a div over Google Maps? but that seems to mess up the cards widths and heights or make the map disappear completely.

I tried to recreate on stackblitz but couldn't get the map to load, but will share anyway so you can see the code (you'll need to add your own Google Maps API key in app.module.ts) https://stackblitz.com/edit/ionic-qgapmk

Any help would be appreciated, like I said it's all pretty new to me so happy to learn!

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;
    }
}
CatK
  • 33
  • 7

1 Answers1

1

This is how I did it in the end; made the map 100% height and added a minus top margin to the ion-slides:

    agm-map {
        height: 100%;
    }
    ion-slides {
        height: 175px;
        margin-top: -175px;
    }
CatK
  • 33
  • 7