ionic display multiple google maps in a page using ngFor - google-maps

Question

I have a list of array that contains latitudes and longitudes
locations = [
{ id: 1, lat: 1.4046821, lng: 103.8403383, name: location 1 }
{ id: 2, lat: 1.4410763, lng: 103.8059827, name: location 2 }
{ id: 3, lat: 1.3261783, lng: 103.8203441, name: location 3 }
];
Now, I want to display google maps foreach location using ionic ngFor
<div *ngFor="let location of locations">
<ion-card>
<div style="height: 250px; width: 100%" #mapCanvas id="map{{location.id}}"></div>
<ion-item>
<h2>{{location.name}}</h2>
</ion-item>
</ion-card>
</div>
Only the location name will display, but the map doesn't display
here's my .ts file
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController } from 'ionic-angular';
declare var google;
#Component({
selector: 'page-locations',
templateUrl: 'locations.html',
})
export class LocationsPage {
locations = [
{ id: 1, lat: 1.4046821, lng: 103.8403383, name: location 1 }
{ id: 2, lat: 1.4410763, lng: 103.8059827, name: location 2 }
{ id: 3, lat: 1.3261783, lng: 103.8203441, name: location 3 }
];
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(private navCtrl: NavController) {
}
loadMap(lat, lng) {
let latLng = new google.maps.LatLng(lat, lng);
let mapOptions = {
center: latLng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
}
}
But, I don't know how to reference or load a map to its corresponding div in ngFor.
I hope somebody can help me to display maps in ngFor

Answer 1

First : Id is unique by definition, use class instead, ViewChild is not appropriate in this case unless you loop on your HTML elements. What you can do is iterate your map.
To not waste your time : I am on mobile so I have some trouble to write text, hope you'll succeed to fix your problem. You can both use an id but you'll have to change it for each map or my class method so that you use the same class name all the time, if so :
EDIT with the solution that works :
http://weetrax.com/img/2maps.png
(did it here) https://www.w3schools.com/graphics/tryit.asp?filename=trymap_intro
<div class="googleMap" style="width:100%;height:400px;"></div>
<div class="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var maps = document.getElementsByClassName("googleMap");
var options= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
for (var i=0; i<maps.length; i++) {
console.log(maps[i]);
var map=new google.maps.Map(maps[i],options);
};
}
</script>
Here all the maps are inited as you can see on the picture ;)