marker is not visible on leaflet map

Posted January 19, 2021 606 views

As i followed the same step by step to create leaflet map now map is visible but marker is not visible on map.
below is the code snippet:-
please let me know how to resolve the below issue:-

ERROR TypeError: Cannot read property 'addLayer' of undefined
    at NewClass.addTo (vendor.js:156997)
    at main.js:15357
    at Array.forEach (<anonymous>)
    at SafeSubscriber._next (main.js:15353)
    at SafeSubscriber.__tryOrUnsub (vendor.js:209959)
    at (vendor.js:209898)
    at Subscriber._next (vendor.js:209848)
    at (vendor.js:209825)
    at CatchSubscriber._next (vendor.js:209848)
    at (vendor.js:209825)


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

import * as L from 'leaflet';
import { icon, Marker } from 'leaflet';
import { MarkerService } from 'src/app/core/e-commerce/_services/marker.service';

  selector: 'kt-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss']
export class GoogleMapComponent implements OnInit, AfterViewInit {
  public map: any;
  public lonlat: any;
  public showMap: boolean = false;
    private markerService: MarkerService,
  ) {

  ngOnInit(): void {

  ngAfterViewInit(): void {
    this.showMap = this.markerService.showMap;
    if(this.showMap == true){

  private initMap(): void { ='map', {
      center: [39.8282, -98.5795],
      zoom: 3
    const iconRetinaUrl = 'assets/marker-icon-2x.png';
    const iconUrl = 'assets/marker-icon.png';
    const shadowUrl = 'assets/marker-shadow.png';
    const iconDefault = L.icon({
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      tooltipAnchor: [16, -28],
      shadowSize: [41, 41]
    L.Marker.prototype.options.icon = iconDefault;

    const tiles = L.tileLayer('https://{s}{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="">OpenStreetMap</a>'



<div class="map-container">
    <div class="map-frame">
        <div id="map" *ngIf="showMap"></div>


// Angular
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { AuthService } from '../../auth/_services/auth.service';
const BASE_URL = '';

  providedIn: 'root'

export class MarkerService {
  // capitals: string = './assets/data/usa-capitals.geojson';
  capitals: string = '../../../../assets/data/usa-capitals.geojson';
  public showMap: boolean = false;

  constructor(private http: HttpClient,
    private marker: AuthService
  ) {

  makeCapitalMarkers(map: void {
      .subscribe((res) => {
        const mapMarker = res;
        mapMarker.forEach(s1 => {
          const coordinates = s1.location.split(',');
          const lat = coordinates[0];
          const lon = coordinates[1];
          const marker = L.marker([lon, lat]).addTo(map);
        this.showMap = true;

// getAllRoutesLocation method form api service
public getAllRoutesLocation() {
    return barData = this.http.get(`${API_URL}/route/allLocation`);   
edited by MattIPv4

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Submit an Answer
1 answer

Hi there,

I’ve seen a similar thread here, this usually happens when the map instance is created before the DOM could be fully loaded, so basically, the div with ID map does not exist yet. Have you tried to move the script tags which include the JavaScript from the head of the page to the end of the body tag?