GoogleMapを貼る

温泉地とか御朱印について書くときに、どうしても必要なのが画像と地図かもしれない。まあ、自分自身の文章力の無さが原因なのだろうが。画像は「Wordpress.com」を利用する事で、Googleフォトを自由に使えるので、先ずはこれは解決できた。GoogleMapも簡単に使えるが、スマホで見ると右側が切れてしまった。GoogleMapをレスポンシブデザインで使えないか、挑戦してみた。

GoogleMapをWordpressで使うには

基本的には、先ず表示したいGoogleMapで場所を表示させ、ピンをクリックする、知らせたい住所をクリックすると、左に「詳細」のウインドウが開きます。

【共有】をクリック、【地図を埋め込む】をクリック、【HTMLをコピー】で貼り付けるだけ。サイズは左の、大・中・小・カスタマイズで変更する。

この【HTMLをコピー】でコピーしたものを編集画面の「テキスト」に貼り付けるだけ。

でも、Wordpressって意外と自由な使い方が出来るので、サイズを固定する事は良いのかなあ～、と悩む。実際に貼ってみたら、意外に困った事も起きた。スマホで見ると右が切れて見えない。

プラグインも多いので、利用も良いかもしれないが、Wordpressは常にバージョンアップを繰り返してるので、考えてしまう。確か10年以上前のGoogleMapやGoogleフォトは、今とはかなり違っていたと思う。･･･当然な事だが、10年以上も離れていると記憶も定かでは無いが、プラグインも使えなくなったり画像も消えていたりしていた。

詳しくは･･･70歳近い老人だから、考えるよりも、簡単に使える事を考えよう。

フッターなどに貼るには

参考になります。

「WordPressにGoogle Mapを埋め込む方法」は、「WordPressテーマ「New Standard」にGoogle Mapを埋め込む方法」として書かれかているが、STALKでも応用できるようだ。フッターなどに埋め込むには大事かも。

GoogleMapをレスポンシブデザインに

板東三十三ヵ所観音霊場「杉本寺」を書いた。中にGoogleMapの【地図を埋め込む】でカスタマイズしたサイズの、けっこう良いサイズにして「地図を埋め込み」したが、スマホで見ると切れてしまった。

いわゆるレスポンシブにしたいのだが、どうも分からない。で、ググったら「【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法」を見つけた。

これはプラグインでは無いので、利用させてもらった。

STALKのCSS編集で以下のタグを書いて

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

「テキスト」表示で

<div class=”ggmap”>iframeのコピーしたコード</div>
に書いた。

できた。ありがとうございます。

ついでに「AddQuicktag」でショートコードを書いた。

開始タグ【<div class=”ggmap”>】、終了タグ【</div>】。これは使える。

「Googleマップを使ってみよう！【APIキー取得からサンプルコードまで】」などや、「simple map」というプラグインも良いのかもしれないが、視力の衰えた独居老人ではいささか難しく感じた。

GoogleMapに複数のピンを立てたMap表示もググってみたが、目が疲れた。これもプラグインを利用した方が良いのかも、なあ。