Q&A
map を初期化しなければいいように思えるのですが、それだとなにか不都合がありましたか？
前提・実現したいこと
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
mapの初期化なしで行ったのですが、mapの種類が変わらず、登録されたマーカーがすべて表示されるようになりました。
「mapの種類」とはなんですか？
とりあえず、マーカーの消し方がわからない、ということでよろしいでしょうか？
マップがタグで選択出来るようになっており、それによって表示されるマーカーが変わる、といったものを作ろうとしています。
「タグ」とはHTMLタグのことですか？ その「タグ」は「mapの種類」と関係があるのですか？
タグはマップの方に表示されるようになっており、そのタグを選ぶことでマップの種類を変える事ができます。
「マップの種類」とは、「表示されるマーカーの種類」という意味だと理解していいですか？
つまり、マップを初期化せずに表示した場合に「マップの種類が変わらない」とは、既存で表示されていた別の種類のマーカーが消えない、ということでいいでしょうか？
そうです。
であれば、
tagBtn.addEventListener('click', function(){
の中でマップを初期化する代わりに、マーカーを全削除すればいいように思います。
あるいは、マップを初期化するのであれば、geolocationの位置情報を保存しておいて、中心座標をそちらに設定すればいいのではないかと思います。
あなたの回答
tips
プレビュー
