脱線三国志

横山三国志のあらすじに沿いつつ、脱線しまくりながら三国志を解説します。

ムラゴンでgoogleマップを載せる方法

こんにちは。
陳羅です。


今回は、三国志をちょっと離れて、ムラゴンにgoogleマップを載せる方法をご紹介します。
え?突然どうしたって?
先ほどガキンチョさんから、質問をもらったからですよ。


まずは地図を作ります。
googleマップにアクセスして目的の地図を表示します。

すると画面右下に変なマークが表示されます。

これをクリックすると・・・

こんなのが出てくるので、この
「地図を共有または埋め込む」
をクリックします。


すると、画面がこうなるので、

「地図を埋め込む」を選んでください。


画面がこのように変化すると思いますので、

「<iframe・・・」から始まるテキストをコピーしてきてください。


このような内容になっていると思います。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3198.9859028215437!2d138.31273295!3d36.69887665!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d896768342fe3%3A0xe1c04b0a1189d970!2z44CSMzgxLTAyMDEg6ZW36YeO55yM5LiK6auY5LqV6YOh5bCP5biD5pa955S65bCP5biD5pa977yR77yU77yZ77yX4oiS77ySIOWwj-W4g-aWvemnhQ!5e0!3m2!1sja!2sjp!4v1434809483893" width="600" height="450" frameborder="0"></iframe>

これをムラゴンに貼り付ければよいのですが、このままだと、横幅が突き抜けてしまいます。
そこで、赤文字にしたところのwidth(横幅)とheight(高さ)を調節する必要があるのですが、ムラゴンではPCで見たときとスマートフォンで見たときで、記事部分の横幅が全然違いますので、どちらでもうまく見えるようにwidthは100%にすることをお勧めします。(100ではなく、100%ですよ!)
高さはそのままでも構いません。


修正した地図用のテキストはこんな感じです。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3198.9859028215437!2d138.31273295!3d36.69887665!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601d896768342fe3%3A0xe1c04b0a1189d970!2z44CSMzgxLTAyMDEg6ZW36YeO55yM5LiK6auY5LqV6YOh5bCP5biD5pa955S65bCP5biD5pa977yR77yU77yZ77yX4oiS77ySIOWwj-W4g-aWvemnhQ!5e0!3m2!1sja!2sjp!4v1434809483893" width="100%" height="450" frameborder="0"></iframe>


最後にこれを記事に張り付けるのですが、スマートフォンから投稿する場合には、画面の下の方にある「PC版はこちら」のボタンを押して、PC版の画面に切り替えます。
そして、記事を書くページを表示すると右上に「<HTML>」というボタンがあると思います。

これを押すと、入力欄が全部HTMLのソースコードの状態になると思いますので、先ほど修正した地図用のテキストを目的の箇所に貼り付けて保存すればOKです。


それでは試しにやってみましょう。


いかがでしたでしょうか?
旅行記のブログなどつけている方は、ぜひお試しください。


×

非ログインユーザーとして返信する

あと 2000文字

※は必須項目です。