常連

### 前提・実現したいこと
googleのスプレッドシートを用いてgoogleマップにマーカーとメッセージを載せようとしています。
スプレッドシートに場所の名前、座標、メッセージを入力し、それをgoogleマップに反映させます。

地図の表示については、まず現在地を調べ、その周辺で登録されている場所をマーカーで表示します。
また、マップが数種類あり、種類によって表示されるマーカーが異なります。

### 発生している問題・エラーメッセージ

先に求めた現在地の座標を固定したままマップを変更したいのですがやり方が分からず困っています。「絞り込みボタンが押下された時」以降の部分です。以下のプログラムでは再度現在地を調べるようにしていますが毎度毎度調べるのは大変なのでその部分を変更したいです。よろしくお願いいします。


### 該当のソースコード
```ここに言語を入力

    <script>
      let marker = [];
      let infoWindow = [];
      let markerData = [];

      // 地図初期表示
		function initMap() {

        const target = document.getElementById('target');
       
		   
			
			map = new google.maps.Map(target, {
          center: {lat: 35.41222, lng: 139.41301},
          zoom: 18,
        });
			//ジオロケーションを用いた現在地の検索
          infoWindow = new google.maps.InfoWindow();
          const locationButton = document.createElement("button");
          locationButton.textContent = "現在地を探す";
          locationButton.classList.add("custom-map-control-button");
          map.controls[google.maps.ControlPosition.TOP_CENTER].push(
            locationButton
          );
          locationButton.addEventListener("click", () => {
           
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(
                (position) => {
                  const pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                  };
                  infoWindow.setPosition(pos);
                  infoWindow.setContent("現在地");
                  infoWindow.open(map);
                  map.setCenter(pos);
                },
                () => {
                  handleLocationError(true, infoWindow, map.getCenter());
                }
              );
            } else {
              
              handleLocationError(false, infoWindow, map.getCenter());
            }
          });
			
        
  
        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
          infoWindow.setPosition(pos);
          infoWindow.setContent(
            browserHasGeolocation
              ? "Error: 現在地の取得に失敗しました"
              : "Error: このブラウザはジオロケーションに対応していません"
          );
          infoWindow.open(map);
        };
			getMapdata();
		}
	  
     
      
		
      // Function:地図データの取得
      function getMapdata(){

        //APIにてデータを取得して、位置とマーカーをセットするfunctionを呼び出す
        const request = new XMLHttpRequest();
//        
        const bookid = '1u5WUNdNBh6Bz7seBveRa4g625oZmw0n-etC0-8ZzlcE'; // Googleフォームから書き込むスプレッドシートのID
        const sheetname = 'フォームの回答 2'; // Googleフォームで作成されるフォーム名
//        
        const googleapi = 'AIzaSyDexXnvpRB8rLjKLaHTMv5BiJZDukg5RAA';
        const url = 'https://sheets.googleapis.com/v4/spreadsheets/' + bookid + '/values/' + sheetname + '?key=' + googleapi;

        request.open('GET', url, true);
        request.responseType = 'json';

        request.onload = function () {
          const data = this.response;     // 取得できた値を格納
          
          markerData = parseData(data);   // Function:データ変換
         
          setData(markerData);            // Function:位置とマーカーをセット
        };

        request.send();

      }
    
    

    
	  

      // Function:データ変換
      function parseData(data) {
        const keys = data.values[0];
        const parsemarkerData = [];
        data.values.forEach(function(value, i) {
          if (i > 0) {
            const hash = {};
            value.forEach(function(d, j) {
              hash[keys[j]] = d;
            });
            parsemarkerData.push(hash);
          }
        });
        return parsemarkerData;
      }

      // Function:位置とマーカーをセット
      function setData(markerData){

        // 初期化
        let sidebar_html = "";
        marker = [];

        for (let i = 0; i < markerData.length; i++) {

          // マーカー位置のセット
          const markerLatLng = new google.maps.LatLng({
            lat: Number(markerData[i]['lat']),
            lng: Number(markerData[i]['lng'])
          });

          // マーカーのセット
          marker[i] = new google.maps.Marker({
            position: markerLatLng,          // マーカーを立てる位置を指定
            map: map                        // マーカーを立てる地図を指定
            // icon: icon                       // アイコン指定
          });

          // 吹き出しへのデータセット
        
          const tag = markerData[i]['tag'];
          const name = markerData[i]['name'];
          const timestamp = markerData[i]['タイムスタンプ'];
		  const message=markerData[i]['message'];
//         

          let setHtml;
//         
            setHtml = tag + '<br><br>' + name + '<br><br>'+message+'<br><br>';
//          

          // 吹き出しのセット
          infoWindow[i] = new google.maps.InfoWindow({
            content: setHtml
          });

          // サイドバーのデータセット
          
          sidebar_html += '<a href="javascript:myclick(' + i + ')">' + tag + ' : ' + name + '(' + timestamp + ')' + '</a><br>';

          // Function:マーカーにクリックイベントを追加
          markerEvent(i);
        }

        // サイドバーへの書き出し
        document.getElementById("sidebar").innerHTML = 'Googleスプレッドシートデータ<br><br>' + sidebar_html;

      }
		

      // Function:マーカーにクリックイベントを追加
      function markerEvent(i) {
        marker[i].addListener('click', function() {
          myclick(i);     // Function: 吹き出しのオープン・クローズ
        });
      }

      // Function: 吹き出しのオープン・クローズ
      let openWindow;
      function myclick(i) {
        if(openWindow){
          openWindow.close();
        }
        infoWindow[i].open(map, marker[i]);
        openWindow = infoWindow[i];
      }

      // 絞り込みボタンが押下されたとき
      
      const tagBtn = document.getElementById('getTag');
      tagBtn.addEventListener('click', function(){
        const tag = document.getElementById('tag').value;

        const tagmarkerData = [];
        let j = 0;
        for (let i = 0; i < markerData.length; i++) {
          if (tag === markerData[i]['tag'].charAt(0)) {
            tagmarkerData[j] = markerData[i];
            j++;
          }
          if (tag === '0') {
            tagmarkerData[i] = markerData[i];
          }
        }

        // 地図の初期表示
        const target = document.getElementById('target');

		

        map = new google.maps.Map(target, {
          center:{lat: 35.41222, lng: 139.41301},
          zoom: 18,
        });
        
		  
infoWindow = new google.maps.InfoWindow();
          const locationButton = document.createElement("button");
          locationButton.textContent = "現在地を探す";
          locationButton.classList.add("custom-map-control-button");
          map.controls[google.maps.ControlPosition.TOP_CENTER].push(
            locationButton
          );
          locationButton.addEventListener("click", () => {
           
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(
                (position) => {
                  const pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                  };
                  infoWindow.setPosition(pos);
                  infoWindow.setContent("現在地");
                  infoWindow.open(map);
                  map.setCenter(pos);
                },
                () => {
                  handleLocationError(true, infoWindow, map.getCenter());
                }
              );
            } else {
              
              handleLocationError(false, infoWindow, map.getCenter());
            }
          });
			
        
  
        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
          infoWindow.setPosition(pos);
          infoWindow.setContent(
            browserHasGeolocation
              ? "Error: 現在地の取得に失敗しました"
              : "Error: このブラウザはジオロケーションに対応していません"
          );
          infoWindow.open(map);
        };
		   
        // Function:位置とマーカーをセット（タグを絞り込みしたデータ）
        setData(tagmarkerData);

      });
    


    </script>
	 
```

### 試したこと



### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

	@@ -1 +1 @@
1	- すでに出した座標を用いてマップを変えてたい
1	+ すでに求めた座標を用いてマップを変えたい

質問編集履歴