How to show marker on Google maps in Angular 2?

Question

Am displaying maps in a popup with the help of latitude and longitude dynamically. However maps is setting to the right place in popup. Am unable to display marker on the maps. May I know how to achieve this?

Here is the HTML code.

<div class="mapIcon" (click)="open($event)"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>

<modal [animation]="animationsEnabled" (onClose)="onClose($event)" #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">Components</h4>
    </modal-header>
    <modal-body class="slider-bar">
    <div>
       <ngui-map zoom="{{zoom}}" center="{{lat}}, {{lng}}"
         (mapReady$)="onMapReady($event)" (mapClick)="onMapClick($event)"
         (idle)="onIdle($event)">
         <marker  [geoFallbackPosition]="[lat, lng]"
            (initialized$)="onMarkerInit($event)"></marker>
       </ngui-map>
   </div>
   </modal-body>
   <modal-footer>     
   </modal-footer>
</modal>

Here is my .ts file

export class Maps{
 lat: any;
 lng: any;

    onMapReady(map) {
       console.log('map', map);
       console.log('markers', map.markers);  
    }
    onIdle(event) {
       console.log('map', event.target);
    }
    onMarkerInit(marker) {
       console.log('marker', marker);
    }
    onMapClick(event) {
       this.positions.push(event.latLng);
       event.target.panTo(event.latLng);
    }
open(e) {

    this.lat = "17.419279";
    this.lng = "78.337095";
    this.modal.open('lg');
}
}

I want to display marker on the location. Any help with my code?

Answer 1

Try to set [position] attribute on marker.