Map Cards problem

Ionic Framework ionic-v3
1

Hey everyone! I’ve been trying to create a list of cards in which every card has its own map like in example https://ionicframework.com/docs/v2/components/#card-advanced-map

The problem is that maps are blank on every card.
My code is below:
items.html
<ion-content padding> <ion-list> <ion-item *ngFor="let item of items"> <ion-card> <ion-item> <div #map id="map{{item.id}}"></div> </ion-item> <h2>Some text</h2> </ion-card> </ion-item> </ion-list> </ion-content>

items.ts:

loadMap(objects) {

for(let item in items) { 
  Geolocation.getCurrentPosition().then((position) => {
  let latLng = new google.maps.LatLng(43.0741904,-89.3809802);
  let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  let element: HTMLElement = document.getElementById("map"+objects[i].id);
  let map = new google.maps.Map(element, mapOptions);
   
  }, (err) => {
    console.log(err);
  });
}

}

Has anyone managed to create list of cards that include maps and if yes, how you managed to do that? Thanks in advance!

1 Like
2

Hello,
I like to know if you solved the problem, and if you did, you could help me, I thank you