おはようございます！
今日は帰省中！・・・だけど台風が怖い！！... muridonです！
８月６日の日曜日 広島平和記念日ですね！・・・
・・・天気予報をドキドキしながら見ていたのですが、当初より遅くなりそうなので帰省したんです。
でも、ちょっと危なそうなので、今日は早々に自宅に戻ります。
はい！ 本日は
「アメブロ以外にも！記事にGoogleマップの地図を埋め込む方法！(ﾉﾟοﾟ)」
です！
私がブログにGoogleマップを貼りだしたのは4月ぐらいだったと思います。
たとえば、グルメ系の記事を見ていて
「おっ！これは美味しそう！！行ってみたい！！」
って思っても、記事中にお店の名前しか書いてないと探すのが大変なんです。
「お店の名前をコピー」
→ 「ブラウザの検索ウインドウに貼り付けて、ネットで検索」
→ 「お店や食べログのページなどを見つけて開く」
→ 「ページ中の地図を探し出して確認する」
（食べログだと最後尾ですし、スマホだともう１タップ必要だと思います。）
記事中に貼ってあれば、一目で場所を確認できますもんね！！
さらに、これをGoogleマップで開き直せば、経路検索して自宅から車で行く場合の最短コースや予想時間、電車での乗り換えまで調べることができます！
こんな便利な機能、使わない方が損 です！！
・・・・ただ、自分のブログに貼ろうと思うと、多少の知識と手間が必要です。
ちなみに方法をネットでググっても、なぜか表示される画面が実際と違ってうまくいかない場合もあります・・・って、1年程前の私がそうでした！
本日は、現時点でのGoogleマップから埋め込みコードを取得し、自分の記事に埋め込む方法を紹介させていただきます！
仕様変更が激しいGoogleマップですが、現時点ではこの方法で間違いなく可能です！
（来月には変わってる可能性もありますが
）
後述しますが、残念ながらパソコンでしかできないのでそちらで説明させていただきます。
地図の目的地は・・暑いから・・比叡山ホテルのレストランへ行ってみましょう！！
（大昔にしか行った記憶しかありませんが・・・）
★ Googleマップ https://www.google.co.jp/maps
まず、お店の名前や目的地を左上の検索窓に入力し、拡大鏡マークをクリックして検索します。
すると、検索結果が出てくるのですが・・・
名前が「星野リゾートホテル ロテルド比叡」に変わってたんですね！！
重要なのが、ここで表示されている縮尺（地図のサイズではなく、＋－で変化させる縮尺）や表示方法（航空写真など）が埋め込み先にも反映されることです。
この状態だとホテル周辺しか見えてないので、見た人にはなんのこっちゃわかりません。
「＋－」ボタンをクリックして、適度な縮尺に変更します。
いい感じになりました！！
他に、目的地の位置（中心からズラせます）、航空写真表示なども、この時点で設定しておきます。
（この記事の台湾の山の中のエリア
は航空写真表示の方がわかりやすいと感じました。）
次は、埋め込むためのコード表示の方法ですが、目的地情報の中に共有のアイコンがありますのでクリックします。
すると、この表示になりますが、最初に表示されるのは左の「リンクの共有」なので、右の「地図を埋め込む」をクリックして表示を切り替えます。
↓
「この地図は自分専用です」と出てますが、今回の話とは関係ありません。
この時点で、既にコードは青色で選択されていますので、マウスの右クリックから「コピー（C)」を選び、コピーします。
これでコードが、パソコンの一時メモリー内にコピーされました。
試しに貼ってみるとこんな感じです。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d104544.55392769587!2d135.731794748721!3d35.03129684978438!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60010a2c0f3de103%3A0x981aec0c6e24288!2z5pif6YeO44Oq44K-44O844OIIOODreODhuODq-ODieavlOWPoQ!5e0!3m2!1sja!2sjp!4v1501813335139" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
謎の呪文ですね。
ホームページの表示で、文字を大きくしたり、絵を表示したり・・・いろいろ使われるhtmlというプログラムで、この中にマップ情報が書かれていますが私には解読できません。
このままのコードでWordpressなどには貼れるとは思いますが、アメブロはちょっと癖がありますので、次に手順を説明します。
アメブロの最新版エディタで説明させていただきます。
このエディタには「通常表示」と「HTML表示」があり、タブで切り替えられるようになってます。
黄色い方をクリックすると「通常表示」、緑の方なら「HTML表示」です。
普段は「通常表示」なのですが、埋め込みコードを入力するのは「HTML表示」なので、クリックして切り替えます。
謎の呪文だらけなのでビビリますが、それに耐えながら地図を入れたい場所に貼り付けます。
ちなみに、「HTML表示」にすると地図を入れたかった場所が探しにくくなります。
あらかじめ「通常表示」の際に「★★★地図★★★」という文字を入力しておくと、「HTML表示」に切り替え、Googleマップの埋め込みコードをコピーした状態で、ここを範囲選択したまま右クリックで貼り付け(P)ですね。
こんな感じで貼り付けられました！
ここで、ちょこっとだけおまじないが必要です。
ぶ～！！
まず、コードの中にある「allowfullscreen」を削除します。
↓
次に、私の場合、地図の縦を300ドット（好みの数値）に変更するために、heightの値を変更しています。（※ このサイズの変更はGoogleマップでコードを表示する際でも可能です）
これら２つのおまじないが終わったら「通常表示」に切り替えます。
これで、バッチリ地図が表示されました！！
・・・あと、おまけですが、ここから続きの記事を書きたいときに、文字が入力できずに困ることがあります。
その時は、地図の右下のこの辺をマウスでクリックしてやるとカーソル「I」が出てきます。
そこで、パソコンの「Enter」キーを２回叩いてやります。
カーソル位置が地図の2行下に移動しましたので、ここから続きを入力できます。
・・・って、要は地図を入れた後だと地図の右下から入力が始まっちゃうだけの話なんです。
とりあえず、これで地図の埋め込みは無事終了です。
やったことがなかったので、試しにやってみました。
Googleマップを表示させるには、GoogleマップアプリとSafariブラウザと２つの方法があります。
まず、アプリでは場所を検索すると下に結果が出てきますので、上にフリックして広げます。
↓
右上の縦点３つをタップすると・・・
選択肢の中に「共有」も選べるのですが・・・
この画面になるのですが、これはパソコンのブラウザであった「リンクを共有」の方であり「地図を埋め込む」方ではありません。
次に、Safariですが、こちらは共有を選択するメニューそのものが出てきません。
念のためにググってみたら、公式の記述（こちら）が見つかりました。
パソコン版の Google マップでは、地図やストリートビュー画像、運転ルート、検索結果をウェブサイトやブログに埋め込むことができます。パソコン、スマートフォン、タブレットでは、メール、Google+、Facebook、Twitter、テキスト送信を使用して他のユーザーと場所や地図を共有できます。
残念ながら、パソコンでしか埋め込みタグを取得できないので、iPhoneやiPad、Androidではできないことが確定しました。
・・・ということで、最後が残念な結果に終わってしまいましたが、地図の貼り付け作業はパソコンで！・・・・ということでお願いいたします。
本日は、以上です！
※これからの良い記事の為に、応援いただける方は 1日１クリック 
（１タップ 
）お願いいたします！ 
（にほんブログ村へランキング投票され、ページに飛びます ）
（おわり）
まったりとした環境で、安心して格安SIMを使いたい方への超おすすめはこちら
（私のメイン回線です！）
