How to display multi map in angular?

Question

In my ionic app, I want to display several maps in the same page. My code is given as below, but, when I run the script, I get an error as:

Uncaught TypeError: Cannot read property 'nativeElement' of undefined
   at HomePage.webpackJsonp.982.HomePage.initMap

Can you tell me where is wrong in my code?

home.ts

maps: google.maps.Map[];
...
@ViewChild('map') mapElement;
...
initMap(i){
    let latLng = new google.maps.LatLng(100, 100);
    let mapOptions = {
      center: latLng,
      zoom:0,
      scrollwheel: true,
      zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    this.maps[i]  =  new google.maps.Map(this.mapElement.nativeElement, 
      mapOptions);
 }

ionViewDidLoad() {
   setTimeout(()=>{
       for(var j=0;j<5;j++){
          initMap(j);
       }
   }, 5000)
}

home.html

<ion-card  class="transparent-card" *ngFor="let number of [0,1,2,3,4]" >
  <div #map id="maps[number]" style="height:250px;"></div>
</ion-card>

DBnR · Accepted Answer · 2019-08-28 07:16:56Z

1

You now have five elements with the identifier #map.

Is there some reason you cannot create a MapComponent and init the map on the component's ngOnInit:

MapComponent:

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
    selector: 'app-map',
    templateUrl: './app-map.html',
    styleUrls: ['./app-map.scss']
})
export class MapComponent implements OnInit {
    constructor(private readonly elem: ElementRef) {}

    map: google.maps.Map;

    ngOnInit(): void {
        let latLng = new google.maps.LatLng(100, 100);
        let mapOptions = {
            center: latLng,
            zoom: 0,
            scrollwheel: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(
            this.elem.nativeElement,
            mapOptions
        );
    }
}

home.html

<ion-card *ngFor="let number of [0,1,2,3,4]">
  <app-map></app-map>
</ion-card>

edited Aug 28, 2019 at 7:16

answered Aug 28, 2019 at 6:05

DBnR

1858 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lei lei Over a year ago

Thanks, I need to separately mark the maps[i] lately according to number i. That is why I maps[] in my code.

lei lei Over a year ago

In the real application, the number of maps is varies. it is not fix to 5.

lei lei Over a year ago

How can I mark specific one of these 5 maps? any id or reference?

DBnR Over a year ago

Without knowing more about what you are trying to achieve I cannot really help. You could interact with the MapComponents using Inputs and Outputs or by using a Service.

Collectives™ on Stack Overflow

How to display multi map in angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related