GoogleMapsAPIで投稿データの表示がリロードしなければ正しく表示されない。

前提・実現したいこと

GoogleMapsAPIのMaps JavaScriptとGeocoding APIを使っているのですが、
ハマっている箇所があるので質問させてください。
新規投稿(new)、編集(edit)、詳細(show)でマップ表示をしています。
仕様としては、
投稿のデータテーブルにlatitude, longitudeのカラムが存在しており、
showやeditではそのデータを元にマップの表示、マーカーの表示を行っています。

こちら以下の問題が発生しているのですが、正しく表示させたいです。

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

投稿Aの新規、編集、詳細のいずれかを開いた後に、
投稿Bのいずれかを開くと、マップデータが投稿Aのものが表示されてしまいます。
その状態でリロードすると、投稿Bのデータによるマップが正しく表示されます。

該当のソースコード

ERB
1## new.html.erb
2
3<div id="map"></div>
4
5<script>
6
7delete mapInstance;
8
9let mapInstance = {};
10let marker;
11let geocoder;
12const tokyoStationLat = 35.6809591;
13const tokyoStationLng = 139.7673068;
14
15function initMap() {
16  geocoder = new google.maps.Geocoder();
17  // 初期マップ
18  mapInstance = new google.maps.Map(document.getElementById('map'), {
19    center: {lat: tokyoStationLat, lng: tokyoStationLng},
20    zoom:12,
21    mapTypeControl: false
22  });
23
24  // クリックしたときに関数を実行
25  mapInstance.addListener('click', function(e) {
26    getClickLatLng(e.latLng, mapInstance);
27    });
28  }
29
30
31// 住所、座標を取得してマーカー設置
32function getClickLatLng(latlng, mapInstance) {
33  document.getElementById('road_latitude').value = latlng.lat();
34  document.getElementById('road_longitude').value = latlng.lng();
35
36  // 既存のマーカーの削除
37  deleteMarker();
38
39  // マーカー設置
40  marker = new google.maps.Marker({
41    position: latlng,
42    map: mapInstance
43  });
44
45  mapInstance.panTo(latlng);
46}
47
48// 既にあるマーカーの削除
49function deleteMarker() {
50  if(marker != null){
51    marker.setMap(null);
52  }
53  marker = null;
54}
55
56function searchArea() {
57  // 検索フォームの入力内容を取得
58  let inputAddress = document.getElementById('address').value;
59
60  geocoder.geocode( { 'address': inputAddress }, function(results, status) {
61    // 該当する検索結果がヒットした時に、地図の中心を検索結果の緯度経度に更新
62    if (status == 'OK') {
63      mapInstance.setCenter(results[0].geometry.location);
64    } else {
65      // 検索結果がなかった場合に表示
66      alert('該当する結果がありませんでした:' + status);
67    }
68  }); 
69}
70</script>

ERB
1
2## edit.html.erb
3
4<script>
5
6delete mapInstance;
7
8let mapInstance
9let geocoder
10let marker
11
12const savedLat = <%= @post.latitude %>
13const savedLng = <%= @post.longitude %>
14
15function initMap() {
16  geocoder = new google.maps.Geocoder();
17  // 保存された座標データが中心に来るように設定
18  mapInstance = new google.maps.Map(document.getElementById('map'), {
19    center: {lat: savedLat, lng: savedLng},
20    zoom:13,
21    mapTypeControl: false
22  });
23
24  // 保存された座標を使ってピンをさす
25  pos = new google.maps.LatLng(
26    savedLat,
27    savedLng
28  );
29  default_marker = new google.maps.Marker({
30    map: mapInstance,
31    position: pos,
32    icon: {
33      url: ' https://maps.google.com/mapfiles/ms/icons/green-dot.png',
34      scaledSize: new google.maps.Size(40, 40)
35    }
36  });
37
38    // クリックしたときに関数を実行
39  mapInstance.addListener('click', function(e) {
40    deleteMarker();
41    getClickLatLng(e.latLng, mapInstance);
42    });
43  }
44
45
46// 住所、座標を取得
47function getClickLatLng(latlng, mapInstance) {
48  document.getElementById('road_latitude').value = latlng.lat();
49  document.getElementById('road_longitude').value = latlng.lng();
50
51  marker = new google.maps.Marker({
52    position: latlng,
53    map: mapInstance
54  });
55
56  mapInstance.panTo(latlng);
57}
58
59// 既にあるマーカーの削除
60function deleteMarker() {
61  if(marker != null){
62    marker.setMap(null);
63  }
64  marker = null;
65}
66
67
68function searchArea() {
69  // 検索フォームの入力内容を取得
70  let inputAddress = document.getElementById('address').value;
71
72  geocoder.geocode( { 'address': inputAddress }, function(results, status) {
73    // 該当する検索結果がヒットした時に、地図の中心を検索結果の緯度経度に更新
74    if (status == 'OK') {
75      mapInstance.setCenter(results[0].geometry.location);
76    } else {
77      // 検索結果がなかった場合に表示
78      alert('該当する結果がありませんでした:' + status);
79    }
80  }); 
81}
82
83</script>

ERB
1
2## show.html.erb
3
4<script>
5
6delete mapInstance;
7
8let mapInstance
9let geocoder
10let marker
11
12const savedLat = <%= @post.latitude %>
13const savedLng = <%= @post.longitude %>
14
15function initMap() {
16  // 保存された座標データが中心に来るように設定
17  mapInstance = new google.maps.Map(document.getElementById('map'), {
18    center: {lat: savedLat, lng: savedLng},
19    zoom:13,
20    mapTypeControl: false
21  });
22
23  // 保存された座標を使ってピンをさす
24  pos = new google.maps.LatLng(
25    savedLat,
26    savedLng
27  );
28  default_marker = new google.maps.Marker({
29    map: mapInstance,
30    position: pos,
31    icon: {
32      url: ' https://maps.google.com/mapfiles/ms/icons/green-dot.png',
33      scaledSize: new google.maps.Size(40, 40)
34    }
35  });
36}
37
38
39function codeAddress() {
40  let inputAddress = document.getElementById('address').value;
41
42  geocoder.geocode({
43    'address': inputAddress
44  }, function (results, status) {
45    if (status == 'OK') {
46      mapInstance.setCenter(results[0].geometry.location);
47
48      if(marker != null){
49        marker.setMap(null);
50      }
51      marker = null;
52
53      marker = new google.maps.Marker({
54        map: mapInstance,
55        position: results[0].geometry.location
56      });
57
58      let title = document.getElementById('map_title');
59      title.setAttribute("value", inputAddress);
60    } else {
61      alert('Geocode was not successful for the following reason: ' + status)
62    }
63  });
64}
65</script>
66