Map Cards problem

Hey everyone! I’ve been trying to create a list of cards in which every card has its own map like in example

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


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) => {


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

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