ネットと副業

副業が本業の収入を大きく超えたので会社やめました

Google アメブロ

アメブロに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はれると、ちょっとプロ感でてうれしいですね(^ ^ )/

-Google, アメブロ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

-祝-基準金額達成!GoogleからAdsense登録の住所確認コードが届いた!

-祝- アドセンスが支払い額に到達しました。 わたくしのAdsenseの状況、大公開。お恥ずかしながら、こんなでございます。 少なっ!!( TДT) GoogleAdsenseって支払い基準ってのがあ …

no image

アメブロでGoogleアナリティクスがテンプレートによって動かない!!

デザインテンプレートによると思われます。 「アメブロにGoogleアナリティクスを設定してほしい」依頼が多いです、はい。 アメブロにGoogleアナリティクスを設定する方法はこちら &amp; …

no image

YouTubeが有料化というのはデマだったようですが、こんな会員サービスならYouTube会員になる!!

YouTubeが有料化というのはデマだったようですが、有料化には進んでいるようです。 YouTubeのユーザー数は10億人を超え、1日あたり数億時間も視聴されていま(Youtube統計情報より) ht …

no image

《iPhone》アメブロをFacebookに投稿すると画像が出ない問題の解決策

意外にこっちの方が楽チンです。 昨今、よくある、『経営者のためのブログ活用セミナー!』とか『集客が3倍増える!ブログマーケティング講座』とか。そんな内容でセミナーにできちゃうんだ〜、へ〜ってちょっと羨 …

no image

〈アメブロ〉記事の最後に毎回同じ文を入れる方法〜初心者も安心〜

  お店のブログ担当をしてると、記事を書いてから、毎回毎回一番下にお店宣伝用のホームページリンクをはったり、メッセージを載せたりすると思います。 でも、毎回同じ内容を入力するのメンドウくさいですよね。 …