![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
こんにちは!つきくです。
普段iPadやiphoneを愛用している私ですが、旅ブログを執筆する時に苦戦したことがあります。
それはGoogleマップをサイト記事に貼り付ける(埋め込む)こと。
同じような経験をした方、いらっしゃいませんか?
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
それって、よく見かけるこういうページだよね↓
![](https://tsukikunaviblog.com/wp-content/uploads/FE993C36-DF9B-431A-AA9A-D51460EF8552-e1665814839595.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/FE993C36-DF9B-431A-AA9A-D51460EF8552-e1665814839595.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
マップを貼り付けるだけでしょ?
そこまで難しいようには見えないなあ。
![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
ですよね。
でも、簡単なようで意外と難しかったんです!(泣)
結論をいうと、iPhoneやiPadを使って、ブログやWEBページ上にGoogleマップを貼る(埋め込む)ことは
できます!
この記事では、iPhoneやiPadでWEBページ上にGoogleマップを貼り付ける(埋め込む)ことが何故難しいのか、そしてどんな方法を使ったら貼り付ける(埋め込む)ことができるのかを解説します。
Googleマップを貼り付ける(埋め込む)とは?
先ほどからしつこく『貼り付ける(埋め込む)』と表記しているのですが、正確にはこの2つは意味が異なります。
貼り付けるとは
文字通り、マップの画像を切り取って貼り付けること。(マップを拡大したりはできない。)
埋め込むとは
目的のマップのリンクをWEBページ上に貼り、記事内に埋め込むこと。(見る人が自分でマップを拡大したりスクロールしたりする事ができる。)
一見すると同じように見えるのですが、『埋め込む』方法のほうが、検索する人にとっては便利ですよね。
この記事では、『埋め込む』方法を解説します。(以降、『埋め込む』という表記に統一します。)
iPhoneでGoogleマップを埋め込むのがなぜ難しいのか
Googleマップをただ単に『貼り付ける』だけならば、(iPhoneの場合)
①Safariを開く。
②目的地を入力する。
③目的地のGoogleマップが表示されたらその画像をスクショする。
④スクショした画像をちょうどいい大きさにトリミング(切り取り)する。
⑤WEBページ上に「画像」として貼り付ける。
上記の手順で簡単にできます。
しかし、『埋め込む』となると…iPhoneだけでは簡単にはできません。
Googleマップを『埋め込む』ための一般的な手順は以下の通りです。
①検索エンジンで目的地を入力しGoogleマップを開く。
②[共有する]というマークをクリックする。
![](https://tsukikunaviblog.com/wp-content/uploads/44AF8713-7417-470C-84C3-349F2C6AA8DB-1280x833.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/44AF8713-7417-470C-84C3-349F2C6AA8DB-1280x833.jpeg)
③[共有]というタブが開いたら、[地図を埋め込む]をクリックする。
④表示されたHTMLをコピーして、埋め込みたい場所にペーストする。
比較的簡単な手順ですが、これはあくまでパソコンで操作した場合。
iPhoneやiPadで同じように操作しても、③の[共有]→[地図を埋め込む]というタブは出てきません。
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/424F06D0-FDAB-44C4-9BF3-CA7BBFB47D8C.jpeg)
なんでー?
どうやら、iPhoneやiPadでは違う手順で操作をする必要がありそうです。
iPhoneでGoogleマップを埋め込む方法
では実際に、iPhoneやiPadを使ってGoogleマップをWEBページに埋め込む方法を解説していきます。
使用するアプリはSafariとChromeです。
![](https://tsukikunaviblog.com/wp-content/uploads/F3D01FF3-B59F-4975-AFB9-3910CE117577.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/F3D01FF3-B59F-4975-AFB9-3910CE117577.jpeg)
①【Safari】で目的地を検索し、[共有]を押す
![](https://tsukikunaviblog.com/wp-content/uploads/ACBAE780-2549-46A9-9092-3AC87ED54DF7.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/ACBAE780-2549-46A9-9092-3AC87ED54DF7.jpeg)
②共有タブの中から【Chrome】を選択し、開く
![](https://tsukikunaviblog.com/wp-content/uploads/2273019B-E17E-4127-8A41-F521A90F2E33.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/2273019B-E17E-4127-8A41-F521A90F2E33.jpeg)
③右下の[…]を押し、[PC版サイトを見る]を選択する
![](https://tsukikunaviblog.com/wp-content/uploads/9765F759-3735-4CA7-86F0-80434FE6DBC5.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/9765F759-3735-4CA7-86F0-80434FE6DBC5.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/F0BFB623-6DA0-4A71-94F7-20419DDFDA73.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/F0BFB623-6DA0-4A71-94F7-20419DDFDA73.jpeg)
④目的地のマップ部分を長押しし、[新しいタブで開く]を選択する
![](https://tsukikunaviblog.com/wp-content/uploads/6AC701FC-2E15-4F84-9BE3-ED42A1497B13.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/6AC701FC-2E15-4F84-9BE3-ED42A1497B13.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/5E111F99-10CC-413F-9960-AEAC43049D87.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/5E111F99-10CC-413F-9960-AEAC43049D87.jpeg)
⑤新しく開いたタブに移動し、もう一度[…]→[PC版サイトを見る]を選択する
![](https://tsukikunaviblog.com/wp-content/uploads/E6046F23-A13D-447A-B5BF-863BB6234247.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/E6046F23-A13D-447A-B5BF-863BB6234247.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/50E53BB2-A55E-4A88-80F9-266AF0D5431C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/50E53BB2-A55E-4A88-80F9-266AF0D5431C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/F0BFB623-6DA0-4A71-94F7-20419DDFDA73.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/F0BFB623-6DA0-4A71-94F7-20419DDFDA73.jpeg)
⑥[共有]を押し、[地図を埋め込む]を選択→HTMLをコピーする
![](https://tsukikunaviblog.com/wp-content/uploads/4F042259-2763-44FC-BDAB-6825358AF0DA.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/4F042259-2763-44FC-BDAB-6825358AF0DA.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/585347DE-BFCD-4CD2-9864-85BA738EC219-1280x1869.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/585347DE-BFCD-4CD2-9864-85BA738EC219-1280x1869.jpeg)
⑦WEBページの貼りたい場所にコピーしたHTMLをペーストする
※ここでは私が使っているWordPressブログ(テーマ:SWELL)の記事での埋め込み方法を例に挙げます。
![](https://tsukikunaviblog.com/wp-content/uploads/DD974F3A-C4FE-48FC-9493-DDCB2A01007C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/DD974F3A-C4FE-48FC-9493-DDCB2A01007C.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/902B27F1-CBFC-438C-8740-10ADF51DF7BC-1280x908.jpeg)
![](https://tsukikunaviblog.com/wp-content/uploads/902B27F1-CBFC-438C-8740-10ADF51DF7BC-1280x908.jpeg)
無事、WEBページ内にGoogleマップを埋め込むことができました。
まとめ
いかがでしたか。
iPhoneやiPadでGoogleマップを埋め込むのはパソコンと比べて一手間かかりますが、可能でした。
- Safari→Chromeを使用して目的地を検索する。
- [PC版でサイトを見る]を選択する。
- 新しいタブで開き直してから、再度[PC版でサイトを見る]を選択する。
検索でマップを表示するときはGoogleマップのアプリではなく「ブラウザのPC版で開く」ということを念頭に置いて操作するといいと思います。
![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
![](https://tsukikunaviblog.com/wp-content/uploads/A28683C0-7DAA-4A90-B1BC-FA063B5801EB.png)
パソコンを使用せずにGoogleマップをブログなどのWEBページに埋め込みたい方はぜひやってみてください。