動く地図を載せる グーグルマップ


ホームページや、アメブロの中に地図を載せたい場合の手順です。
グーグルマップならば、表示されている地図を動かすこともできますので、周辺も把握しやすくなります。

グーグルマップを載せる

1.グーグルマップで住所を入力

グーグルマップを開き、住所を入力します。


載せたい地図の住所を入力し、表示させます

2.リンクボタンをクリック



リンクボタンをクリックします。

3.HTMLをコピーし、サイトに貼り付け



「HTMLを貼り付けてサイトに地図を埋め込みます」のHTMLコードをコピーし、サイトで貼り付ければOKです。
※アメブロで、3カラムにしている場合は、幅が合わないのでサイズ調整を行います。

4.サイズ調整

サイズが合わない場合は、サイズ調整を行います。

「埋め込み地図のカスタマイズとプレビュー」をクリックします。


カスタマイズのウィンドウが出てくるので、カスタムにチェックをいれ大きさを変更します


アメブロの3カラムは、記事幅が410pxなので、400px程度にします。

5.埋め込み用のHTMLをコピー

サイズ調整した、HTMLコードをコピーします

6.貼付け

アメブロの場合は、タグ編集エディタか、新しいエディタのHTML表示で貼り付けます。



※アメブロの場合、 貼り付けるタグで  src=”https://maps.google.co.jp の部分の https: を http: に変える必要があります。(2個所でてきます)

これで、ホームページやアメブロでも表示されるようになります。

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

コメントを残す