78-interactive-maps.md

1. Define marker

interface Marker {
  lat: number;
  lng: number;
  title: string;
  image: string;
  text: string;
  markerObj?: any;
}

2. Markers

markers: Marker[] = [
    {
      lat: -17.386378,
      lng: -66.1628018,
      title: 'Parque De la Familia',
      image: 'https://lh5.googleusercontent.com/p/AF1QipOCgzq_0DYB9AxD-ItTG01x2csLsSfWsawBCypc=w408-h306-k-no',
      text: 'Animi voluptatem, aliquid impedit ratione placeat necessitatibus quisquam molestiae obcaecati laudantium?'
    },
    {
      lat: -17.4005556,
      lng: -66.1741667,
      title: 'Mariscal Santa Cruz',
      image: 'https://lh5.googleusercontent.com/p/AF1QipMGZeu88O8uZvFOX9PKug7gz-VRhhiXQ78hAFZU=w408-h306-k-no',
      text: 'Animi voluptatem, aliquid impedit ratione placeat necessitatibus quisquam molestiae obcaecati laudantium?'
    },
    {
      lat: -17.3810618,
      lng: -66.1550974,
      title: 'Parque de Educación Vial',
      image: 'https://lh5.googleusercontent.com/p/AF1QipPIXxrXfshAD6eHbkGScPdNqYBwfJ6ol4qriq2n=w408-h306-k-no',
      text: 'Animi voluptatem, aliquid impedit ratione placeat necessitatibus quisquam molestiae obcaecati laudantium?'
    },
    {
      lat: -17.4128145,
      lng: -66.158299,
      title: 'Parque Kanata',
      image: 'https://lh5.googleusercontent.com/p/AF1QipOJOq3vm1Gfpa3d4dPR_ca2C240J_PBv701zRAE=w408-h544-k-no',
      text: 'Animi voluptatem, aliquid impedit ratione placeat necessitatibus quisquam molestiae obcaecati laudantium?'
    }
  ];

3. Load map

async loadMap() {
  const loading = await this.loadingCtrl.create();
  await loading.present();
  const marker = this.markers[0];
  const mapEle: HTMLElement = document.getElementById('map');
  this.mapRef = new google.maps.Map(mapEle, {
    center: {lat: marker.lat, lng: marker.lng},
    zoom: 15
  });
  google.maps.event
  .addListenerOnce(this.mapRef, 'idle', () => {
    loading.dismiss();
  });
}

4. Add marker

private addMaker(itemMarker: Marker) {
  const marker = new google.maps.Marker({
    position: { lat: itemMarker.lat, lng: itemMarker.lng },
    map: this.mapRef,
    title: itemMarker.title
  });
  return marker;
}

5. Load markers

private loadMarkers(){
  this.markers.forEach(marker => {
    const markerObj = this.addMaker(marker);
    marker.markerObj = markerObj;
  });
}

6. Slides

<ion-slides (ionSlideDidChange)="onSlideDidChange()">
    <ion-slide *ngFor="let marker of markers">
      <ion-card>
        <ion-item>
          <ion-thumbnail slot="start">
            <img [src]="marker.image">
          </ion-thumbnail>
          <ion-label class="ion-text-wrap">
            <h2>{{ marker.title }}</h2>
            <p>{{ marker.text }}</p>
          </ion-label>
        </ion-item>
      </ion-card>
    </ion-slide>
  </ion-slides>

ion-slides {
  height: 200px;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

7. PanTo

@ViewChild(IonSlides) slides: IonSlides;

async onSlideDidChange() {
  const currentSlide = await this.slides.getActiveIndex();
  const marker = this.markers[currentSlide];
  this.mapRef.panTo({lat: marker.lat, lng: marker.lng});
}

8. Info Windows

this.infoWindow = new google.maps.InfoWindow();

const markerObj = marker.markerObj;
this.infoWindow.setContent(marker.title);
this.infoWindow.open(this.mapRef, markerObj);

Nico muy buen tutorial, me sirvio mucho. Mil gracias