山中一揆史跡を地図で辿る～GoogleMap
山中一揆経過Googleマップ
衛星写真で世界めぐり グーグルマップ
浄土宗総本山・本山・特別寺院Googlemap
など、サイト内でGoogleMapを利用していろいろな地図を作ってきていたが、この1,2ヶ月の間にGoogleMapの仕様について、APIキーの設定が少し変わったようで、先日、サイト内のGoogleMapを見ようとしたら、エラーの表示が出ていた。
調べてみると、今まで使用していたAPIキーよりも短いキーで設定するようになっていた。
確認できた、サイト内の11の地図のAPIキーを編集して、以前のように表示できるようにする。
変更した地図については、本サイトのトップページ内にある「更新記録」で確認することができます。
http://www.can-chan.com/map/xhr-requests.html
に、地図の中心を示す十字マーク「 ＋ 」を配置しました。
当初、どうすればよいのかわからず、ネットを検索して、中央に表示するターゲットスコープの画像設定のページに出会い、記入してみた。ただスクリプトの中で、mapの設定の定義が異なっていたので、修正したり、更には十字のマークの背景を透明化してあるはずのgif画像が、うまく透明化の表示ができなくて、png形式に設定し直して、無事十字だけの表示にすることができた。
今まで中心店の経度や緯度を取得して表示するようにはなっていたものの、中心の場所を示す「中心点の表示」ボタンを押さないと中心位置がはっきりせず、使いにくかったのが、改善できた。
表示するGoogleMapに中心位置を示す＋マーカーを配置
山中一揆史跡を地図で辿る～GoogleMap（http://www.can-chan.com/sanchuikki/santyuikki-shiseki-gmap.html）だとか浄土宗総本山・本山・特別寺院Googlemap（http://www.can-chan.com/tizu/g-mapjodo-honzan.html）などのGoogleMapを、スマートフォンでも簡単に表示できるように、今までのTableで区切られていた表示を取り払い、パソコンではできるだけ広く、スマートフォンでも画面に応じで見ることができるように、改造してみる。もともとはQPONさんからのスクリプトを利用させていただいていたが、スマートフォンでは画面からはみ出すようになっていたので、思い切って変えてみる。レスポンシブルな表示を目指してみました。
パソコンでは次のような見え方です。
スマートフォンで表示させたときは
スマートフォンの狭い画面で見たときもその画面に応じて表示できる。
ここでは、画像としては同じようなサイズで表示されているが、画面として表示できている部分は、パソコンの画面（上の画像）のうち赤線で囲んだ範囲となります。史跡一覧も地図下のボタンや検索窓もすべてスマートフォンで見えるようになりました。