２０２１ 08 30 （令和３年８月３０日 月）
コピペでは動作不可！！
Customizing a Google Map: Custom Markersのサンプル実行について
コンソール エラー内容
Unhandled Promise Rejection: InvalidValueError: initMap is not a function
以下サイトにより、問題解決（async defer追加）！！
Uncaught InvalidValueError: initMap is not a function
２０２１ 08 31 （令和３年８月３１日 火）
上に続き、infowindow marker click対応改修（複数marker）。おk。
markerを配列とすること 及び 配列の事前宣言。
あとは、marker typeを含んだ改修となる。
整理：
- type 温泉郷を新たに追加するよう改修（get…….）
- eaturesは使用せずに、loop本体内にiconを追加
別府関連 以下ファイル
HTML表示
BP_ONSEN_GET2_BEPPU_HTML3
CSV(JSON)出力
BP_ONSEN_GET2_BEPPU_XXX.php</span
ajaxでappendするも、そのままソースが表示されるのみ、ブラウザが解釈しないと判断。
ググって、iframeなるもの発見。あとはクリックで表示を制御すればおk か。
それまでの過程として、googlemap表示htmlを作成。iframeにて表示まで。。。
その後
検索key word -> ajax load googlemaps
Loading Google Maps API with Ajax using Javascript/JQuery, Callback not setup correctly
本日の神サイト…
Parsing returned HTML from jQuery AJAX request
２０２１ 09 01 （令和３年９月１日 水）
本日の課題
you have included the google maps javascript api multiple times on this page. this may cause unexpected errors.
you have included the Google Maps API multiple times on this page. This may cause unexpected errors
Remove google map scripts
How to display google maps on click of a button in javascript?
How to display google maps on click of a button in javascript?
２０２１ 09 02 （令和３年９月２日 木）
ページでjavascriptapiを複数回include不具合！！。。。前日の検索結果↑↑↑↑を試しておk。（Remove google map scripts）
２０２１ 09 03 （令和３年９月３日 金）
本日の神サイト。。。
load google map without using callback method
load google map without using callback method
googlemaps読み込み！！
- CALLBACK
- window.onload = function addGoogleMapScript()
- function addGoogleMapScript()
あとは、initmapによる初期化で、同一ページに複数MAPを描画 おk。。
google.maps.event.addDomListener(window, ‘load’, initMap);
２０２１ 09 04 （令和３年９月４日 土）
json形式取得、後 googlemaps埋め込み おk。
マップドラッグの際に遅延する不具合。原因は、themeのstylesheet内にあり、「transition:all 0.5s ease」部分を削除し、解決！！
２０２１ 09 05 （令和３年９月５日 日）
本日わかったこと
- googlemaps表示処理（initmap等）は、ajaxファイル内に書くこと
- JSONでやりとりするときは、dataType: ‘json’,を忘れずに。（判明までほぼ半日費やす）
- JSONデータの数について、以下サイト及びCODEでおk
get size of JSON object
var count = Object.keys(data).length;
console.log(count);
２０２１ 09 06 （令和３年９月６日 月）
googlemapsについて、ほぼ基本技術はおk。ajaxにてjsonデータを取得し、marker配列を作成のちプロット。
エリア別marker iconについても実装おk。
次は、前エリアマップへ。
Googleマップ用地図アイコン
Googleマップ用地図アイコン
２０２１ 09 07 （令和３年９月７日 火）
目から鱗
地図へマーカーを配置/削除
更に（change the centre of a google maps）
How to dynamically change the centre of a google maps without erasing markers?
更に（Google Maps JavaScript API V3 Reference）
Google Maps JavaScript API V3 Reference
更に（infoWindow逐次クローズ版）
Marker Accessibility
２０２１ 09 08 （令和３年９月８日 水）
infoWindow逐次クローズ版 実装完了！！
markerクローズ任意指定地点（setVisible版）おk。
marker表示・非表示について
最終的にfunc外で宣言した変数(mapmapなんでも良い)に代入して問題解決
又、中心移動についても、これで解決！！
２０２１ 09 09 （令和３年９月９日 木）
今後の課題：
- ajax部分は、シンプルにjaso取得のみにすること（現在 取得とgooglemapsを切り離す googlemapsはhtml内記述）
- グループ（今回はpart 温泉郷）による一括marker表示・非表示
- loopをforeachに変更すること（済）
２０２１ 09 10 （令和３年９月１０日 金）
iPhone googlemapsの左右の余白が不要。
- genericsのstyle sheet削除でおk。stylesheetのどこが原因か
- 裸のhtmlでは余白は生じない
解明中！！
key word –>> mobile safari right left margin
entry-contentでは無い。もっと上位での設定か。
googlemaps 一本指
How to disable two fingers zoom option in Maps in mobile devices using JavaScript API?
スマホ表示の時だけ画面幅いっぱいの画像にしたい
スマホ表示の時だけ画面幅いっぱいの画像にしたい
原因判明： stylesheepの下部 以下の記述部分にpadding:10%設定あり。
@media(max-width:480px)
本日の収穫： getstureHandling 一本指操作おk。
図を移動させるには指2本で操作します”の回避策
２０２１ 09 11 （令和３年９月１１日 土）
- map切り替え表示の際のdispLoading処理 完了！！
- メインボタン表示 ①MAP ②表 ③温泉郷切り替え（トグル）
- ③の温泉郷切り替えは、郷の配列を作成し、loopで回し、on offする。
- 表の詳細表示は、折り畳み表示が可能か検討
- CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン（過去 一度 掲載済み）
気象予報士用語集にあり。
本日 完了したこと。 ajaxにより温泉郷取得（my-get-part-ajax.js）
function my_enqueue()の複数登録について、onloadで対処。
以下、参考サイトもあったが、今回はオンロード版。
WordPress: Loading multiple scripts with enqueue
２０２１ 09 12 （令和３年９月１２日 日）
boolean配列（for marker on off）
How to initialize a boolean array in javascript
part毎のon off関数完了。
個々のmarkerで無く、part単位でのon offであること。
残る課題として：詳細データ：jsonによる取得
本日の収穫！！Modal Box
How To Create a Modal Box
２０２１ 09 13 （令和３年９月１３日 月）
位置取得関連：
Get GPS location from the web browser
HTML Geolocation API
InfoWindow をカスタマイズ
InfoWindow をカスタマイズする
Modal Box化スタート！！
トグルボタン装飾
How do you create a toggle button?
How do you create a toggle button?
GooglemapsのMarkerクリック infowindow表示内のボタン押下にてModal Box表示 ok!!
次は、詳細ページ用データ ajax取得か
２０２１ 09 14 （令和３年９月１４日 火）
本日のお宝サイト：
how to use json file in html code
how to use json file in html code
詳細ページ用データajax取得完了！！
modal-boxに詳細ページを表示するも、スマホだとオーバー！！
エトセトラ試行するも、表ページならば地図、地図表示ならば文字情報でok!!
以上をもとに進める。
２０２１ 09 14 （令和３年９月１４日 火）
googlemaps //を消すこと！！
２０２１ 09 15 （令和３年９月１５日 水）
//の原因：不可
script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false&language=ja'”></script>
詳細ページ（テーブル版）の実装 ほぼOK!!
関連して・・・
セル（td）の中央寄せについて
【CSS】nth-childを使って行の色を交互に設定する！
【CSS】nth-childを使って行の色を交互に設定する！
次は、詳細ページ（マップ版）の実装 get_details_map.php
他のModal Boxについても検討要！！