Google Map関連

2021 08 30 (令和3年8月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

2021 08 31 (令和3年8月31日 火)

上に続き、infowindow marker click対応改修(複数marker)。おk。
markerを配列とすること 及び 配列の事前宣言。
あとは、marker typeを含んだ改修となる。

google maps plat home

整理:

  • 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にて表示まで。。。

googlemap–my url

Ajaxに既に作られたgoogleMapを挿入したい

その後
検索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

2021 09 01 (令和3年9月1日 水)

本日の課題
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?

2021 09 02 (令和3年9月2日 木)

ページでjavascriptapiを複数回include不具合!!。。。前日の検索結果↑↑↑↑を試しておk。(Remove google map scripts)

2021 09 03 (令和3年9月3日 金)

本日の神サイト。。。
load google map without using callback method
load google map without using callback method

googlemaps読み込み!!

  1. CALLBACK
  2. window.onload = function addGoogleMapScript()
  3. function addGoogleMapScript()

あとは、initmapによる初期化で、同一ページに複数MAPを描画 おk。。
google.maps.event.addDomListener(window, ‘load’, initMap);

2021 09 04 (令和3年9月4日 土)

json形式取得、後 googlemaps埋め込み おk。
マップドラッグの際に遅延する不具合。原因は、themeのstylesheet内にあり、「transition:all 0.5s ease」部分を削除し、解決!!

2021 09 05 (令和3年9月5日 日)

本日わかったこと

  • googlemaps表示処理(initmap等)は、ajaxファイル内に書くこと
  • JSONでやりとりするときは、dataType: ‘json’,を忘れずに。(判明までほぼ半日費やす)
  • JSONデータの数について、以下サイト及びCODEでおk

get size of JSON object
var count = Object.keys(data).length;
console.log(count);

2021 09 06 (令和3年9月6日 月)

googlemapsについて、ほぼ基本技術はおk。ajaxにてjsonデータを取得し、marker配列を作成のちプロット。
エリア別marker iconについても実装おk。
次は、前エリアマップへ。

Googleマップ用地図アイコン
Googleマップ用地図アイコン

2021 09 07 (令和3年9月7日 火)

目から鱗
地図へマーカーを配置/削除
更に(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

2021 09 08 (令和3年9月8日 水)
infoWindow逐次クローズ版 実装完了!!
markerクローズ任意指定地点(setVisible版)おk。

marker表示・非表示について
最終的にfunc外で宣言した変数(mapmapなんでも良い)に代入して問題解決
又、中心移動についても、これで解決!!

2021 09 09 (令和3年9月9日 木)

今後の課題:

  • ajax部分は、シンプルにjaso取得のみにすること(現在 取得とgooglemapsを切り離す googlemapsはhtml内記述)
  • グループ(今回はpart 温泉郷)による一括marker表示・非表示
  • loopをforeachに変更すること(済)

2021 09 10 (令和3年9月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本で操作します”の回避策

2021 09 11 (令和3年9月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

2021 09 12 (令和3年9月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

2021 09 13 (令和3年9月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取得か

2021 09 14 (令和3年9月14日 火)

本日のお宝サイト:
how to use json file in html code
how to use json file in html code

詳細ページ用データajax取得完了!!
modal-boxに詳細ページを表示するも、スマホだとオーバー!!
エトセトラ試行するも、表ページならば地図、地図表示ならば文字情報でok!!
以上をもとに進める。

2021 09 14 (令和3年9月14日 火)

googlemaps //を消すこと!!

2021 09 15 (令和3年9月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についても検討要!!