トップページ > 記事閲覧
【雑談】グーグルマップのレスポンシブ表示
投稿日 : 2019/07/19(Fri) 20:52
投稿者 カンガルーおやじ
参照先 https://www.ehime-ra.com
今さらな話題かもしれませんが、グーグルマップの「地図を埋め込む」で取得したコードでレスポンシブに表示させる方法は、地図を張りたいところに以下のコードを貼り付けます。

#html{{
<style type="text/css">
<!--
.gmap{
position: relative;
padding-bottom: 75.0%; // この%が縦横比
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>

<div class="gmap">
グーグルマップの「地図を埋め込む」で取得したコード
</div>
}}
Re: グーグルマップのレスポンシブ表示
投稿日 : 2019/07/24(Wed) 06:46
投稿者 うみほし
参照先
私がプラグインの修正の方を選んだのは,過去の記事の地図を正しく表示させたかったからです。
これからHAIKを使う人はhtmlを貼り付けるでもいいでしょう。
HAIK-Teamもプラグインのエラーは放置して,「タグを書け」ですから。
しかし,過去の記事のエラーはどうなるのでしょう?
全部タグを取得しなおして書き換えですか?
何年分ものブログ記事を全部チェックして書き直しですか?
プラグインの修正をしないというHAIK-Teamのスタンスは,このようなユーザーがやらなければならない作業量のことをまったく考えてくれてないに等しいのです。
Re: グーグルマップのレスポンシブ表示
投稿日 : 2019/07/24(Wed) 06:17
投稿者 うみほし
参照先
以下の部分は,「その他のタグ」に書けばサイト全体に適用されるので,いちいち地図を入れる記事に書かなくても良いような気もします。
 もし,それでよければ記事にはマップのhtmlタグだけ書けばいいので,利便性が増すでしょうね。

 私はHIAKのプラグイン自体をグーグルマップに適応させましたが,本来のHAIKの操作(マニュアルやメニュー等にある通りの操作)でやれるのがメリットです。ツールから選ぶだけですから。
 しかし,プラグインの改造は一般ユーザーに勧められないので,本来はこういうプラグインの仕様を修正するのはHAIK-Teamの仕事です。
運営会社が何年も放置してやってくれないので,仕方なく自己解決しているだけです。マニュアルやツールにある操作でマップエラーが出るのは,製品として失格ですね。こういうところを放置し続ける管理会社だから,「亀田は金だけ取って仕事をしない」といわれても仕方が無いでしょう。



<style type="text/css">
<!--
.gmap{
position: relative;
padding-bottom: 75.0%; // この%が縦横比
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>
Re: グーグルマップのレスポンシブ表示
投稿日 : 2019/07/23(Tue) 20:34
投稿者 カンガルーおやじ
参照先 https://www.ehime-ra.com
うみほしさん

そうゆう方法があったのですね。すっきりして良いですね。

今回の方法のメリットは、1ページに複数の地図を表示できます。
HAIKの#gmapでは、1ページに一つの地図しか表示できません。

二つ目以降の地図は、以下のコードでOKです。

#html{{
<div class="gmap">
グーグルマップの「地図を埋め込む」で取得したコード
</div>
}}

よかったら、試してください。
Re: グーグルマップのレスポンシブ表示
投稿日 : 2019/07/22(Mon) 06:16
投稿者 うみほし
参照先
私は,
https://github.com/open-qhm/qhm/issues/125
に書いた方法で解決しています。
本来のHAIKの操作で地図が表示できるので楽です。
ただ最近は過去に住所で指定したものはのきなみ変な場所になります。
緯度経度で指定しないとダメなようにグーグルマップの仕様変更があったのでしょう。

- WEB PATIO -