Angular2でgoogleマップにピンを立てたい

Question

前提・実現したいこと

Angular2でgoogleマップを表示し、クリックした場所にピンを立てる処理を作成しています。
色々と調べた結果、google-maps-apiをインストールし、使用するのが良いということが分かったのですが、実際の使用方法が不明です。
知識が浅い為、質問の仕方に問題がありましたら申し訳ありません。
お手数ですが、ご教示をお願いいたします。

発生している問題・エラーメッセージ

マップの表示はされるのですが、クリックしても無反応です。
試しに作成した、最初からピンを配置しておく処理は正常にできており、
ドラッグもできます。

該当のソースコード

以下の処理で、importすることによりクリックしたときのイベントが発生すると認識しているのですが、間違いないでしょうか？
import { MouseEvent } from '@agm/core';

英語サイトで下記のような使い方をしていました。
同じように使わせて頂いたのですが、エラーも出ずマップをクリックしても無反応です。
export class AppComponent {
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,
draggable: true
markers: marker[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
draggable: true
}]
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

https://angular-maps.com/guides/getting-started/
使い方はここに全て書いてあります。

実際に動作するサンプルもStackBlitzで提供されています
https://stackblitz.com/edit/angular-google-maps-demo

知識が浅い為、質問の仕方に問題がありましたら申し訳ありません

Angularは知識が浅いと、とても扱えないフレームワークです。初期の学習コストはほかのフレームワークに比べて重ためです。1週間程度みっちり勉強しないととてもじゃないと使えません。

また最新版はAngular6ですのでAngular6を使うことをお勧めします。

・JavaScript/TypeScriptの知識は十分ですか？
→JavaScriptの知識が十分でクラスベースのオブジェクト指向を扱えるレベルであれば特に準備は不要です。

・公式のAngularのチュートリアルを全て最後までやりましたか？
→これをやらないと何がわからないか、わからない。の状態になります。

・PlainなJavaScript（Vanilla JavaScript)でGoogle Map APIを扱えますか？
→そもそもこれができないと扱えないと思います。

・そもそもAPIキーは取得していますか？
→取得しないとエラーになると思います。

・NPMの知識がありますか？
→これがないと厳しいです。

・英語はある程度読めますか？
→Angularは少し動きの速いフレームワークですので英語情報を読めたほうが有利です（半年に1度バージョンアップします）。ただし、Google翻訳がかなり精度が良いので右クリックで翻訳した結果を読んでもよいと思います。

遠回りに思えるようですが、実はこれが近道です。
上記をすべて満たせば、何の問題もなく、getting-startedのページの内容を理解し、動くものが作れると思います。

Comments

[mw18]

ご回答頂き有難う御座います。
挙げて頂いた内容を順番に勉強しようと思います。
マップの表示まではできています。
TypeScriptは始めたばかりで、勉強中です。
最後に1つ質問させて頂きたいのですが、「クリックでピンを立てる」操作はGoogle Map APIの機能をTypeScriptで記述して使用するという認識で宜しいでしょうか？

[fa11enprince]

マップの表示は単にJavaScript/TypeScriptでHTMLのDOMをセレクタで指定して書き換えているだけなので苦労せずともできると思います。というか、Angularの場合は、サンプルの場合ですと<app-marker>と書いた時点でそれが内部的に行われています。「ピン(マーカー)」を立てるのはサンプルに書いてある通りTypeScript（というかAngular）のClickイベントでクリックのハンドラを書いてイベント発生時の座標($event)でGoogle Map APIによりピンを立てている。というのが回答となります。さきにここの内容が理解できるようになってから取り組むのが得策です。https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

[mw18]

有難う御座いました！