CODEWITHSUNDEEP
google-mapsangulartypescriptgoogle-maps-markersmarker
Laamiri Oussema
Laamiri Oussema

Reputation: 537

Add Marker to google Map when click Angular 2

I'm trying to build an angular 2 application which add a marker when i click on my map. this is my code:

<sebm-google-map (mapClick)="getPosition($event)" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [backgroundColor]="backgroundColor" style="margin-bottom:900px">
  <sebm-google-map-marker *ngFor=" let post of posts" [latitude]="post.lapti" [longitude]="post.longi" ></sebm-google-map-marker>
</sebm-google-map>

Any solution?

Upvotes: 0

Views: 7870

Answers (1)

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

Fortunately, the plunker example that angular-maps provide has that exact functionality implemented already:

plunker: http://plnkr.co/edit/YX7W20?p=preview

here is a static copy just in case that plunker no longer exists:

@Component({
  selector: 'my-app',
  styles: [`
    .sebm-google-map-container {
       height: 300px;
     }
  `],
  template: `
    <sebm-google-map 
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="zoom"
      [disableDefaultUI]="false"
      [zoomControl]="false"
      (mapClick)="mapClicked($event)">

      <sebm-google-map-marker 
          *ngFor="let m of markers; let i = index"
          (markerClick)="clickedMarker(m.label, i)"
          [latitude]="m.lat"
          [longitude]="m.lng"
          [label]="m.label"
          [markerDraggable]="m.draggable"
          (dragEnd)="markerDragEnd(m, $event)">

        <sebm-google-map-info-window>
          <strong>InfoWindow content</strong>
        </sebm-google-map-info-window>

      </sebm-google-map-marker>

      <sebm-google-map-circle [latitude]="lat + 0.3" [longitude]="lng" 
          [radius]="5000"
          [fillColor]="'red'"
          [circleDraggable]="true"
          [editable]="true">
      </sebm-google-map-circle>

    </sebm-google-map>
`})
export class App {
  // google maps zoom level
  zoom: number = 8;

  // initial center position for the map
  lat: number = 51.673858;
  lng: number = 7.815982;

  clickedMarker(label: string, index: number) {
    console.log(`clicked the marker: ${label || index}`)
  }

  mapClicked($event: MouseEvent) {
    this.markers.push({
      lat: $event.coords.lat,
      lng: $event.coords.lng
    });
  }

  markerDragEnd(m: marker, $event: MouseEvent) {
    console.log('dragEnd', m, $event);
  }

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982,
          label: 'A',
          draggable: true
      },
      {
          lat: 51.373858,
          lng: 7.215982,
          label: 'B',
          draggable: false
      },
      {
          lat: 51.723858,
          lng: 7.895982,
          label: 'C',
          draggable: true
      }
  ]
}
// just an interface for type safety.
interface marker {
    lat: number;
    lng: number;
    label?: string;
    draggable: boolean;
}

Upvotes: 6

Related Questions