PCが壊れたことをきっかけにiPadでブログ記事作成を開始しましたが、その際に困ったことを覚え書きしていきます。
同じ悩みを持った方に情報共有しますので、解決できれば幸いです。
iPadだとGoogleマップを埋め込むためのHTMLコードが出てこない!
Googleマップを埋め込むとは?
カフェやレジャー施設の紹介をする際、紹介場所を分かりやすく提示するため
のようにGoogleマップを記事に埋め込みする方法があります。(皆さんもよく見た事があるし、活用した事があるかと思います。)Googleマップが埋め込まれた状態
PC(Windows・Mac)ではGoogleマップを開いて共有ボタンをクリックし、「地図を埋め込む」のタブを選択すると埋め込むためのコード(HTML)が表示され、コピーしてブログ記事に貼り付けることで簡単にマップの埋め込みが可能です。
しかし、iPadで同様の操作をすると、HTMLコードにたどり着くことができませんでした。
iPad:HTMLコードが出現しない事象
Google Mapsアプリ
- Google Mapsアプリで目的地検索し、共有ボタンをクリックしてもHTMLコードは表示されない。(スマホのようにAirDrop、ライン共有などは可。)
Safari
- Safari(設定の検索エンジンを確認、Googleが選択されている状態)で目的地検索し、共有ボタンをクリックしてもHTMLコードは表示されない。(スマホのようにAirDrop、ライン共有などは可。)
iPad:HTMLコードを出現させる方法(Google Chromeを使う)
- Google Chromeアプリをダウンロードする。
- Google Chromeでシークレットタブを開く。
- Googleマップを「PC版サイト」で表示。
- 目的地を検索し、共有ボタンからHTMLコードを出現させる。
詳細解説していきます
①Google Chromeアプリをダウンロードする。
Google Chromeを使用するため、ダウンロードしていない場合は、Apple Storeからダウンロードしてください。
②Google Chromeでシークレットタブを開く。
Google Chromeを開いて、右上にある「・・・」をクリック。
「新しいシークレットタブ」をクリック。
黒い背景の「シークレットタブ」を開くことができました。
③ Googleマップを「PC版サイト」で表示。
開いた「シークレットタブ」で「Googleマップ」と検索。「Googleマップ」を開きます。
※Googleマップには「google.com」「google.co.jp」のアドレスが存在しますが、「google.com」のアドレスのマップを開いてください。
マップを開いたら、右上にある「・・・」をクリック。
「PC版サイトを見る」をクリック。
※この作業を行うことでPCと同じような操作が可能になります。
④目的地を検索し、共有ボタンからHTMLコードを出現させる。
Googleマップで目的地検索し、目的地を表示。
目的地の「共有ボタン」をクリック。
PC同様、「地図を埋め込む」が表示されるのでクリック。
PC同様、「HTMLコード」の表示に成功。
ブログにGoogleマップを埋め込む(WordPressブログ/SWELL)
ブログにGoogleマップを埋め込む方法は、運営するブログ(WordPressブログ、はてなブログ、アメーバブログなど)やブログ作成に使用しているテーマによって異なります。
この記事を読んでいる方は、HTMLコードをブログに挿入する方法については知っている方がほとんどと想定しておりますので、詳細は割愛。
私が使用しているWordPressでの挿入方法についてのみ軽くご説明いたします。
WordPressブログ(テーマはSWELLを使用)の場合
- WordPressの新規投稿画面にて左上の「+」をクリックし、「カスタムHTML」を選択。
- 「HTMLを入力」という枠に、コピーしたHTMLコードを貼り付け。
- プレビューで確認すると、 マップが挿入されています。
さいごに
iPadでブログの記事作成をしていて「困った事の1つ」を覚え書きしました。
iPadでGoogleマップを埋め込むための「HTMLコード」の表示方法は他にもあるかもしれませんが、現状私はこの方法でしかGoogleマップを埋め込みできていません。
他にも方法が見つかったら追記していきたいと思います。