javascript 直近のクリックイベントの内容のみ反映したい

Question

前提・実現したいこと

ruby on railsのアプリにおいて、Google Maps APIを使用しています。
マップをクリックすると、クリックしたポイントの緯度・経度情報を取得した上で
・緯度経度情報を入力フォームの該当欄へ出力
・マップ上にマーカーが表示される
仕様を目指しています。

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

マップ上にマーカーを表示することはできたのですが、クリックする毎にマーカーが生成され、複数のマーカーが表示される状態となってしまいます。
マップ上には、直近のクリックによるマーカー１つのみが表示されるようにしたいです。

該当のソースコード

new.html.slim

.page-title 被害の新規登録

= form_with model: @damage, local: true do |f|
  = render 'layouts/error_messages', model: f.object
  .form-group
  = f.label :title, '題名'
  = f.text_field :title, class: 'form-control'
  .form-group
  = f.label :place, '場所'
  = f.text_field :place, class: 'form-control'
  .form-group
  = f.label :latitude, '緯度'
  = f.text_field :latitude, class: 'form-control', id: 'latitude'
  .form-group
  = f.label :longitude, '経度'
  = f.text_field :longitude, class: 'form-control', id: 'longitude'
  button.mt-2.mr-3 onclick="geoFindMe()" type="button"  緯度・経度情報を取得
  = link_to 'Google Mapで探す', 'https://www.google.co.jp/maps', target: '_blank', class: 'googlemap'
  .form-group
  = f.label :description, '内容'
  = f.text_area :description, rows: 10, class: 'form-control'
  .form-group
  = f.label :amount, '被害額（円）'
  = f.text_field :amount, class: 'form-control'
  .form-group
  = f.label :image, '写真'
  = f.file_field :image, class: 'form-control'
  = f.submit class: 'btn btn-primary mt-3'


#map.mb-5.mt-5
javascript:
  // APIライブラリの読み込みが終わったら実行する関数を指定
  function initMap() {
  // idがmapのdiv要素オブジェクトを取得
    var target = document.getElementById('map');
    // 中央に表示する座標（羽黒町役場）
    var center = {lat: 38.719072,lng: 139.901329}

    // マップを描画
    map = new google.maps.Map(
      // 描画する領域のオブジェクトを指定
      target, {
      // 描画に関するオプション
      center: center,
      zoom: 13
      }
    );

    // クリックイベント
    map.addListener('click', function(e){
      getClickLatLng(e.latLng);
    });

    // イベントの内容
    function getClickLatLng(lat_lng){
      // 緯度・経度情報を取得
      var lat = lat_lng.lat();
      var lng = lat_lng.lng();

      // 緯度・経度情報を、views/damages/new.html.slimの緯度・経度欄へ入力
      document.getElementById( "latitude" ).value = lat ;
      document.getElementById( "longitude" ).value = lng ;

      // マーカーの設置
      marker = new google.maps.Marker({
        // 表示オプション
        position: new google.maps.LatLng(lat, lng),
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"
      });
    }
  }


script async="" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDD8_DF2AUAtXfZVcQYFUi3T3AslQKAXaw&callback=initMap"

試したこと・参考にした情報

http://seto-abe.hatenablog.com/entry/2017/01/07/015535
このサイトと同様のコードとしたつもりなのですが、挙動がサイトに掲載のものと異なっております。
この要因と、解決方法をご教示いただけますと助かります。

他に参考にした情報
http://www.webdesignleaves.com/pr/plugins/googlemap_01.html

Answer 1

#map.mb-5.mt-5
javascript:
  // APIライブラリの読み込みが終わったら実行する関数を指定
  function initMap() {
  // idがmapのdiv要素オブジェクトを取得
    var target = document.getElementById('map');
    // 中央に表示する座標
    var center = {lat: 38.719072,lng: 139.901329}

    // マップを描画
    map = new google.maps.Map(
      // 描画する領域のオブジェクトを指定
      target, {
      // 描画に関するオプション
      center: center,
      zoom: 13
      }
    );

    // マーカーの定義
    var marker = new google.maps.Marker({
      // 表示オプション（positionの中身は空）
      position: new google.maps.LatLng(),
      map: map,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"
    });

    // クリックイベント
    map.addListener('click', function(e){
      getClickLatLng(e.latLng);
    });

    // イベントの内容
    function getClickLatLng(lat_lng){
      // 緯度・経度情報を取得
      var lat = lat_lng.lat();
      var lng = lat_lng.lng();

      // 緯度・経度情報を、views/damages/new.html.slimの緯度・経度欄へ入力
      document.getElementById( "latitude" ).value = lat ;
      document.getElementById( "longitude" ).value = lng ;

      // マーカーの表示の削除
      marker.setMap(null);

      // マーカーの位置情報を更新
      marker.position = new google.maps.LatLng(lat, lng);

      // マーカーの表示
      marker.setMap(map);

    }
  }

Answer 2

marker変数をグローバルな場所に取っておいて、
次のマーカーを追加する前に削除すれば良いのではないでしょうか？
https://www.javadrive.jp/google-maps-javascript/gmarker/index4.html

Comments

[t.togashi]

ご教示くださりありがとうございます。
ご紹介いただいたページを拝見し、以下のコードに修正したのですが、クリックしてもマーカーが表示されなくなりました。

```
.page-title 被害の新規登録

= form_with model: @damage, local: true do |f|
= render 'layouts/error_messages', model: f.object
.form-group
= f.label :title, '題名'
= f.text_field :title, class: 'form-control'
.form-group
= f.label :place, '場所'
= f.text_field :place, class: 'form-control'
.form-group
= f.label :latitude, '緯度'
= f.text_field :latitude, class: 'form-control', id: 'latitude'
.form-group
= f.label :longitude, '経度'
= f.text_field :longitude, class: 'form-control', id: 'longitude'
button.mt-2.mr-3 onclick="geoFindMe()" type="button" 緯度・経度情報を取得
= link_to 'Google Mapで探す', 'https://www.google.co.jp/maps', target: '_blank', class: 'googlemap'
.form-group
= f.label :description, '内容'
= f.text_area :description, rows: 10, class: 'form-control'
.form-group
= f.label :amount, '被害額（円）'
= f.text_field :amount, class: 'form-control'
.form-group
= f.label :image, '写真'
= f.file_field :image, class: 'form-control'
= f.submit class: 'btn btn-primary mt-3'

#map.mb-5.mt-5
javascript:
var marker;
// APIライブラリの読み込みが終わったら実行する関数を指定
function initMap() {
// idがmapのdiv要素オブジェクトを取得
var target = document.getElementById('map');
// 中央に表示する座標（羽黒町役場）
var center = {lat: 38.719072,lng: 139.901329}

// マップを描画
map = new google.maps.Map(
// 描画する領域のオブジェクトを指定
target, {
// 描画に関するオプション
center: center,
zoom: 13
}
);

// クリックイベント
map.addListener('click', function(e){
getClickLatLng(e.latLng);
});

// イベントの内容
function getClickLatLng(lat_lng){
// 緯度・経度情報を取得
var lat = lat_lng.lat();
var lng = lat_lng.lng();

// 緯度・経度情報を、views/damages/new.html.slimの緯度・経度欄へ入力
document.getElementById( "latitude" ).value = lat ;
document.getElementById( "longitude" ).value = lng ;

// マーカーの削除
marker.setMap(null);

// マーカーの作成
var marker = new google.maps.Marker({
// 表示オプション
position: new google.maps.LatLng(lat, lng),
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"
});
marker.setMap(map);
}
}
```

私の認識が誤っており、コードの修正方法が適切で無いのでしょうか。

[salud]

var が要らないのではないでしょうか？

var marker = new google.maps.Marker({
↓
marker = new google.maps.Marker({

[t.togashi]

varを削除したのですが、クリックしてもマーカーが表示されない状態です。