グーグルマップをトップへ埋め込み
その後右側へ文言（アクセス等）を入れたいのですが
なにか簡単な方法はありますでしょうか
ご教示ください
テーマはdawn使用しております
Topic summary
ユーザーがGoogleマップをトップページに埋め込み、その右側にアクセス情報などのテキストを配置する方法を質問しています。
提供された解決策:
- Googleマップから埋め込みコードを取得する手順が詳しく説明されました
- 具体的な手順:
- Googleマップで目的地を表示し縮尺を調整
- 「地図を共有または埋め込む」から埋め込みコードを取得
- サイズをカスタマイズしてHTMLコードをコピー
- カスタムテーマのLiquidファイルにコードを貼り付け、右側にアクセス情報を追加する方法が提示されました
現在の状況:
- 質問者は提案された方法で埋め込みに成功
- 新たな課題として、スマホで見た際にマップが大きすぎる問題が発生
- PC・スマホで別々の設定が可能かどうかについて追加質問中
ディスカッションは継続中で、レスポンシブデザインに関する解決策待ちの状態です。
初めまして。下記手順にて作成できましたので共有いたします。
Googleマップのコードの作成
Googleマップの縮尺や座標を指定した状態のコードの作成を下記手順で行います：
- Googleマップで目的の場所を表示:
- まず、通常のGoogleマップで目的の場所を表示し、希望の縮尺に調整します。
- 埋め込みコードの取得:
- 左上の三本線メニューをクリックし、「地図を共有または埋め込む」を選択します。
- 「地図を埋め込む」タブを選択します。
- 埋め込みオプションのカスタマイズ:
- 「小」「中」「大」からサイズを選択するか、カスタムサイズを入力します。
- 「htmlをコピー」をクリックして、コードをコピーしてください
ストアに埋め込むコードの作成
下記コードの 以下の iframeタグを、先ほどコピーしたコードと置き換えてください
<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
## アクセス情報
ここにアクセス情報や他の文言を追加してください。
ストアにコードを埋め込む
テーマカスタマイズ画面より、「カスタムliquid」を選択
上記で作成したコードを貼り付け
これでマップが掲載できるかと思います。
ご参考になれば幸いです。
とてもわかりやすく有難うございます
コードの方まで掲載いただき非常に助かります
上記の手順で試してみたいと思います
こちら試してみたところできました
また併せての質問で恐縮なのですが
スマホで見るとマップが大きすぎるので
別々の設定をしたいのですが可能でしょうか
よろしくお願いいたします
こちら試してみたところできました
また併せての質問で恐縮なのですが
スマホで見るとマップが大きすぎるので
パソコン、スマホ別々の設定をしたいのですが可能でしょうか
よろしくお願いいたします