誰でもGoogleMapはれます！
アメブロの記事の中にGoogleMapをはっつけたいときありませんか？
ひと昔前は、ホームページにGoogleMap貼るのに、GoogleMapのapi読み込んで位置座標をしらべて、なんたらかんたら・・・なんたらかんたら・・・
と一苦労だったような気がしますが、いまや楽になったもんです。
誰にでも簡単にできちゃいます。
GoogleMapをホームページ貼る一番簡単な方法
「金沢21世紀美術館」周辺地図を、GoogleMapでホームページに貼ってみます。
ちなみにこの記事は2015年5月17日のものです。Google先生は、お知らせなしに仕様を変更する場合があるので、その点だけご承知くださいませ。
まず、Google公式のホームページにGoogleMapを貼る方法を見てみますと
- Googleマップを開きます。
- 埋め込みたい地図やストリートビュー画像を地図上に表示します。
- 左上のメインメニュー（三本線）をクリックします。
- [地図を共有 / 埋め込む] をクリックします。
とあります。
素直にGoogle先生のいう通りやってみましょう。
しかし…
3番目ですでに、つまづきます。
左上にメインメニューなどございません。。。
いったん、素直にやるのはやめにします…
1.まずGoogleMapで検索します。
GoogleMapを開いて、「金沢21世紀美術館」を検索して、表示します。
右下に、設定マークがありまして、クリックするとメニューが表示されるので、「地図を共有または埋め込む」を選択。
すると共有と埋め込み画面が表示されます。「地図を埋め込む」を選びます。
今回は、アメブロのデフォルトのテンプレートに貼ることにしますので、Mapのサイズを調整します。
ちょっとわかりにくいですが、コードが書かれているテキストボックス横に「中」のボタンがあるので、そこをクリックします。すると「大」「中」「小」「カスタムサイズ」とサイズが選べるようになっていますが、細かく設定したいので「カスタムサイズ」を選択します。
「横」×「縦」になってます。最初のボックスに横幅410を入力します。縦幅はお好きなサイズでOK。入力した瞬間に、<iframe…からはじまるコードの中身が変更されますので、サイズを決定できたら、<iframe..からはじまるコードを全部コピーしましょう。
2. アメブロにはっつける
アメブロの記事編集画面にいきましょう。
こんな画面ですね。アメブロの記事編集画面に入ったら「パワーアップした新エディタを使う」にしておきましょう。「HTML表示」ってのが選べるので、HTML表示にしておきます。
さきほどコピーしたコードを貼り付けます。
あとは通常表示にして、記事を書いて公開するだけ！！
サイズが小っさすぎて、目的地が隠れちゃいました(^ ^;
サイズはGoogleMapにもどって「カスタムサイズ」を変更したあとコピー&ペーストしなおしても大丈夫ですが、直接コードをいじっても変更可能です。
アメブロに貼り付けたコードを見てみます。
widthが横、heightが縦です。この数字を変更すればOK。全角数字でうたないように注意しましょう。
思い切って縦を800にしてみました。
最初にお伝えしましたが、Google先生は機能向上のためにアップデートを知らないうちにやってることがあるので、やり方が変更になる場合があるのでご注意を。
アメブロにMapはれると、ちょっとプロ感でてうれしいですね(^ ^ )/