ionic display multiple google maps in a page using ngFor

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

andrea06590 · Answer 1 · 2018-01-28T20:02:36.873

0

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 ;)

edited Jan 28 '18 at 20:02

answered Jan 28 '18 at 14:00

andrea06590

1,259
3
10
22

actually, I don't get it – Codeblooded Saiyan Jan 28 '18 at 14:10
What should be your html looks like, if that's the case? how can we display maps? – Codeblooded Saiyan Jan 28 '18 at 14:12
The classic way it never changes : https://www.w3schools.com/html/html_googlemaps.asp – andrea06590 Jan 28 '18 at 14:15
Your code HTML is good just apply my fix, so that you just make sure you have init all the map – andrea06590 Jan 28 '18 at 14:15
where does `mapIndex = { [key:number]:any}` came from? it's an error – Codeblooded Saiyan Jan 28 '18 at 14:19
Map index is just a way to show you how to store your inited maps. You can simply init the map without keeping it in a variable. Are you writing in full JavaScript ? If yes you can use Object Map instead of my typescript shortcut – andrea06590 Jan 28 '18 at 14:23
actually, I still don't get it, what's going on with your codes – Codeblooded Saiyan Jan 28 '18 at 14:25
what I mean is that `mapIndex` is unused variable – Codeblooded Saiyan Jan 28 '18 at 14:28
also with `this.map[i]` where does `i` came from? – Codeblooded Saiyan Jan 28 '18 at 14:30
I don't write code to copy and paste, I explain things with example, here it's a simple way to index all your map div and init them. I did not add options, you can not use my index, what don't you get now ? – andrea06590 Jan 28 '18 at 14:33
@JSmith it is mapIndex actually I wrote my code on a mobile I told you sorry – andrea06590 Jan 28 '18 at 14:35
are you using typescript? `mapIndex = { [key:number]:any}` got an error on initiation – Codeblooded Saiyan Jan 28 '18 at 14:39
mapIndex = { [key:number]:any} = {} seems obvious I forgot some part of the code but the logic here works https://stackoverflow.com/a/30019750/8675131 – andrea06590 Jan 28 '18 at 14:47
you got it wrong, it should be `mapIndex: { [key:number]:any} = {}` – Codeblooded Saiyan Jan 28 '18 at 15:02
If you are just here to correct my writing mistakes you will never correct your pb – andrea06590 Jan 28 '18 at 15:09
also, I got an error `this.mapTable.foreach is not a function` – Codeblooded Saiyan Jan 28 '18 at 15:13
What contains mapTable after you get elements ? Console.log your values – andrea06590 Jan 28 '18 at 15:14
It's an `HTMLCollection []` containing my divs – Codeblooded Saiyan Jan 28 '18 at 15:19
Ok use for(let i=0; i< mapTable.length; i++) so that you also got the Index i forgot in forEach – andrea06590 Jan 28 '18 at 15:24
I'll make a plunker if I arrived on time at my home ;) once you have all your divs just init each of your map – andrea06590 Jan 28 '18 at 15:32
yah' its better, please make a plunker. thank you very much – Codeblooded Saiyan Jan 28 '18 at 15:37
it's working huh!! but doesn't work on ionic 2 with typescript `let maps = document.getElementsByClassName("locations");` `for (var i=0; i – Codeblooded Saiyan Jan 30 '18 at 09:27
Are you using ionic-map ? If yes try to add this code on init, and try to add the tag on the generated div (maybe you'll have to fork the package and edit the source) – andrea06590 Jan 30 '18 at 10:12

ionic display multiple google maps in a page using ngFor

1 Answers1