title: Removing a certain marker in angular2+
body: <p>I am trying to remove a certain marker(when I click on it, it will pop-up an info-window and there I will have a delete button which will remove that marker from the map)</p>
  
  <p>I also want that these markers to be kept in a localstorage to remain in the same position even if I refresh the page.</p>
  
  <p>The problem is when I use slice method to delete the marker; this method will shift all my markers with one position so if I will add 3 markers named : Marker1, Marker2 and Marker3, and I want to delete Marker 2, the Marker3 will come instead of Marker2 position (replacing him) and I don't want that thing to happen. I want that all markers to remain in the same position.</p>
  
  <p>I also tried not to remove the marker but to give it the null value but for that option the following error occurs:</p>
  
  <blockquote>
    <p>lat has no property of null</p>
  </blockquote>
  
  <p>That is because when I loop with <strong>*ngFor</strong> through my markers, some markers will be null.</p>
  
  <p>This is my component.html:</p>
  
  <pre><code>&lt;agm-map [latitude]="lat"
        [longitude]="lng"
         [zoom]='zoom'
         (mapClick)="onMapClicked($event)"&gt;
  
    &lt;agm-marker  *ngFor="let m of markers; let i = index" 
             [visible]='m.visible'
            (markerClick)="onClick(m)"
            [latitude]="m.lat"
            [longitude]="m.lng"
            [markerDraggable]="m.draggable"
            (dragEnd)="markerDragEnd(m, $event)"&gt;
  
     &lt;agm-info-window&gt;
  
    &lt;div class="eventText"&gt;
      &lt;strong&gt;{{m.name}}&lt;/strong&gt;
    &lt;/div&gt;
  
    &lt;button class="btn btn-success btn-sm" 
     (click)="onDelete(m)"&gt;Delete&lt;/button&gt;
     &lt;/agm-info-window&gt;
  
    &lt;/agm-marker&gt;
  
   &lt;/agm-map&gt;
  </code></pre>
  
  <p>This is my markerData.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { marker} from "./park.component";
  
  @Injectable()
  export class MarkerdataService {
  markers: marker[] = [];
  
   constructor() { }
   getAllMarkers() {
   if (localStorage.getItem('markers') === null || 
     localStorage.getItem('markers') === undefined) {
     localStorage.setItem('markers', JSON.stringify(this.markers));
     return this.markers;
   }
   else {
     var markers = JSON.parse(localStorage.getItem('markers'));
     return markers;
   }
  
  }
  
  addMarker(newmarker: marker) {
  
   var markers = JSON.parse(localStorage.getItem('markers'));
   markers.push(newmarker);
   localStorage.setItem('markers', JSON.stringify(markers));
  
  }
  
  
  removeMarker(mark: marker) {
  
    var markers = JSON.parse(localStorage.getItem('markers'));
    markers.splice(markers.indexOf(mark),1);
    localStorage.setItem('markers', JSON.stringify(markers));
   }
  
  
  }
  </code></pre>
  
  <p>This is my component.ts:</p>
  
  <pre><code>export class ParkComponent {
  
   zoom: number = 10;
   lat: number = 44.458418;
   lng: number = 26.129007;
   private index:number = 0;
   private id:number = 0;
   markers: marker[] = [];
  
   constructor(private data: MarkerdataService){
     this.markers = this.data.getAllMarkers();
     console.log(this.markers);
     }
  
   ngOnInit(){}
  
   onClick(m: any) {
      console.log(m);
     }
   onMapClicked($event) {
  
     this.id++;
     this.index++;
     var newMarker:marker={
        id:this.id,
        name:'event: '+this.index,
        lat:$event.coords.lat,
        lng:$event.coords.lng,
        draggable:true
     }
     this.markers.push(newMarker);
     this.data.addMarker(newMarker);
    }
   onDelete(m:marker)
    {
     this.markers.splice(this.markers.indexOf(m),1);
     this.data.removeMarker(m);
    }
  
   }
  export interface marker {
     id:number;
     name?:string;
     lat: number;
     lng: number;
     label?: string;
     draggable: boolean;
     visible?:boolean;
  }
  </code></pre>
  
  <p>I have searched everywhere and I couldn't find a solution for that issue.</p>
  
  <p>Thanks.</p>