読者です 読者をやめる 読者になる 読者になる

Netablog

デザインしたりとWebマーケティングしたりするときにネタになることまとめているネタブログです。

アメブロにGoogleマップを貼る方法(ホームページに貼る場合もほぼ同じです)

f:id:nekonkeo:20150517014208j:plain

誰でもGoogleMapはれます!



アメブロの記事の中にGoogleMapをはっつけたいときありませんか?
ひと昔前は、ホームページにGoogleMap貼るのに、GoogleMapのapi読み込んで位置座標をしらべて、なんたらかんたら・・・なんたらかんたら・・・
と一苦労だったような気がしますが、いまや楽になったもんです。
誰にでも簡単にできちゃいます。




GoogleMapをホームページ貼る一番簡単な方法


「金沢21世紀美術館」周辺地図を、GoogleMapでホームページに貼ってみます。

ちなみにこの記事は2015年5月17日のものです。Google先生は、お知らせなしに仕様を変更する場合があるので、その点だけご承知くださいませ。




まず、Google公式のホームページにGoogleMapを貼る方法を見てみますと

f:id:nekonkeo:20150517015124j:plain

  1. Googleマップを開きます。
  2. 埋め込みたい地図やストリートビュー画像を地図上に表示します。
  3. 左上のメインメニュー(三本線)をクリックします。
  4. [地図を共有 / 埋め込む] をクリックします。


とあります。

素直にGoogle先生のいう通りやってみましょう。 


しかし...  


3番目ですでに、つまづきます。



f:id:nekonkeo:20150517115602j:plain



左上にメインメニューなどございません。。。

 

 
いったん、素直にやるのはやめにします...





1.まずGoogleMapで検索します。


GoogleMapを開いて、「金沢21世紀美術館」を検索して、表示します。

f:id:nekonkeo:20150517115602j:plain

 


 

右下に、設定マークがありまして、クリックするとメニューが表示されるので、「地図を共有または埋め込む」を選択。

f:id:nekonkeo:20150517115905j:plain

 



すると共有と埋め込み画面が表示されます。「地図を埋め込む」を選びます。

f:id:nekonkeo:20150517120056j:plain

 


今回は、アメブロのデフォルトのテンプレートに貼ることにしますので、Mapのサイズを調整します。
ちょっとわかりにくいですが、コードが書かれているテキストボックス横に「中」のボタンがあるので、そこをクリックします。すると「大」「中」「小」「カスタムサイズ」とサイズが選べるようになっていますが、細かく設定したいので「カスタムサイズ」を選択します。

f:id:nekonkeo:20150517121021j:plain

 



「横」×「縦」になってます。最初のボックスに横幅410を入力します。縦幅はお好きなサイズでOK。入力した瞬間に、<iframe...からはじまるコードの中身が変更されますので、サイズを決定できたら、<iframe..からはじまるコードを全部コピーしましょう。

f:id:nekonkeo:20150517121352j:plain







2. アメブロにはっつける



アメブロの記事編集画面にいきましょう。

こんな画面ですね。アメブロの記事編集画面に入ったら「パワーアップした新エディタを使う」にしておきましょう。「HTML表示」ってのが選べるので、HTML表示にしておきます。

f:id:nekonkeo:20150517121950j:plain





さきほどコピーしたコードを貼り付けます。

f:id:nekonkeo:20150517122230j:plain


あとは通常表示にして、記事を書いて公開するだけ!!




f:id:nekonkeo:20150517122443j:plain

サイズが小っさすぎて、目的地が隠れちゃいました(^ ^;
サイズはGoogleMapにもどって「カスタムサイズ」を変更したあとコピー&ペーストしなおしても大丈夫ですが、直接コードをいじっても変更可能です。



アメブロに貼り付けたコードを見てみます。

f:id:nekonkeo:20150517122750j:plain

 

widthが横、heightが縦です。この数字を変更すればOK。全角数字でうたないように注意しましょう。




思い切って縦を800にしてみました。

f:id:nekonkeo:20150517122939j:plain

 

 

最初にお伝えしましたが、Google先生は機能向上のためにアップデートを知らないうちにやってることがあるので、やり方が変更になる場合があるのでご注意を。



アメブロにMapはれると、ちょっとプロ感でてうれしいですね(^ ^ )/