忍者ブログ
尾張旭にある小さなマンツーマンパソコン教室のブログです。ネット上の気になることを集めてご紹介したり、教室の様子をご紹介したりしています。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

google(グーグル)のサービスを使って
ブログの記事内に地図を載せる!
お店の案内などに最適ですね♪
リクエストが多いのでブログでもご紹介します。

1.googleマップにアクセス。

2.検索窓に該当する住所を入力。

3.「地図を検索」をクリック。
0e3eb3ed.jpeg ←画像クリックで拡大表示して確認してみてください。

4.表示された地図の右上「リンク」をクリック。

5.表示されたオレンジ色のウィンドウから
「埋め込み地図のカスタマイズとプレビュー」をクリック。

a78e4fad.jpeg ←画像クリックで拡大表示して確認してみてください。

6.表示された画面より、サイトに載せたい地図のサイズを選ぶ

7.「サイトに地図を埋め込む場合はこのHTML をコピーして貼り付けます。」
より HTML をすべてコピー
6575aa56.jpeg ←画像クリックで拡大表示して確認してみてください。
↑この画面は念のためブログを書き終えるまで閉じないほうが良いです。
操作間違いやうまくいかない場合、もう一度HTMLをコピーしたいとき便利です。

8.HTMLが取得できましたので、
続いてお使いのブログ管理ページを表示させます。

9.新しい記事を書く画面を表示させます。


忍者ブログの方
新しい記事を書く 画面
53963bc2.jpeg ←画像クリックで拡大表示して確認してみてください。

FC2ブログの方
新しい記事を書く 画面
a58ac5ba.jpeg ←画像クリックで拡大表示して確認してみてください。

10.取得した地図のHTMLをソース表示にして貼り付けます。

忍者ブログの方
「ソース」をクリックします
22cd15b8.jpeg ←画像クリックで拡大表示して確認してみてください。

1dbed854.jpeg ←画像クリックで拡大表示して確認してみてください。
本文入力欄内で右クリック、「貼り付け」します。

FC2ブログの方
「タイトル」「カテゴリ」「ジャンル」...の下にある アイコンが並んでいるバーから
W(高機能エディタ)のアイコンをクリックします。
dd28b2ff.jpeg ←画像クリックで拡大表示して確認してみてください。

「ソース」をクリックします。
86c1ad68.jpeg ←画像クリックで拡大表示して確認してみてください。

本文入力欄内で右クリックし、「貼り付け」します。
80d975c2.jpeg ←画像クリックで拡大表示して確認してみてください。

※FC2ブログの方で
右クリックして「貼り付け」を選んでもうまくいかないことがあるようです。
うまくいかない場合は、もう一度 操作7.のHTMLをコピーを取る操作を行い
再度貼り付けてみてください。
1回目うまくいかなくても2回目でできることがありました。

11.記事を保存します

12.ブログ記事を確認します


忍者ブログの方
6f588802.jpeg ←画像クリックで拡大表示して確認してみてください。
FC2ブログの方
65b9d6e7.jpeg ←画像クリックで拡大表示して確認してみてください。

確認できましたら、完成です♪


↓ブログ記事内にこんな風に貼りつきます



<sample>パソコン教室 一條学院

拡大地図を表示


google
ウェブサイトやブログに地図を埋め込む方法
ヘルプはこちらから



ここからは応用編!!

●地図の尺度を変えたい!
●ストリートビューを貼り付けたい!

そんな人にオススメです。



●地図の尺度を変えたい!
「埋め込み地図のカスタマイズとプレビュー」の画面で
表示される地図の、倍率や位置をあらかじめ調節してから
HTMLを取得します

 e548e9b7.jpeg ←画像クリックで拡大表示して確認してみてください。
「サイトに地図を埋め込む場合はこのHTML をコピーして貼り付けます。」
より HTML をすべてコピーでコピーを取り、
先ほど貼り付けた要領で貼り付けるとこうなります↓倍率が変わっています。



大きな地図で見る


●ストリートビューを貼り付けたい!

左上のオレンジ色の人形を目的の場所にドラッグします
a023b043.jpeg ←画像クリックで拡大表示して確認してみてください。
ストリートビューが対応している道は
ブルーの色が付きます。
4446e5fd.jpeg ←画像クリックで拡大表示して確認してみてください。
名古屋市内ですとほとんどの道が対応しています。
愛知県外では、まだ大通りだけという感じです。

    googleストリートビュー対応エリア コチラから確認できます

地図がストリートビューで表示されます
15.JPG ←画像クリックで拡大表示して確認してみてください。
右上の「リンク」から、先ほど地図のHTMLを取得した要領で
HTMLを取得します
16.JPG ←画像クリックで拡大表示して確認してみてください。
続きの操作も地図の場合と同じです。
↓こうなります


大きな地図で見る
PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
パソコン教室のご案内
パソコン教室一條学院

★やりたいこと中心、マンツーマンのフリースタイル
★MOT資格所有の講師による指導です。
★経済的な回数制です。
★ビデオ講習はありません。
★仕事の持ち込みもOK


https://itijyopc2.jimdo.com/
☆見学・入会随時受付☆
見学はお電話にてご予約を!
℡0561-76-6825
お子様連れもご相談ください

〒488-0844
尾張旭市東名西町
2-22-2
TEL&FAX(0561)76-6825
itijyopc@hotmail.co.jp

一條学院ホームページ

1209347112.jpg




このサイトについて
このサイトは、2013年秋に名東区高針より移転してまいりました尾張旭市にある「パソコン教室一條学院」によるブログです。

尾張旭にある小さなマンツーマンパソコン教室のブログです。ネット上の気になることを集めてご紹介したり、教室の様子をご紹介したりしています。

このブログはリンクフリーです
どなたでも、どのページでも
ご自由にリンクして下さい

バナーお使いいただく方は
↓保存してお使い下さい♪
1205120670.gif



ブログ内検索
下のブログ内検索を ご利用いただきますと 目的の記事を探すのに 便利です。
最新記事
yahoo!検索

Yahoo!検索

バーコード

Copyright © [ 尾張旭|パソコン教室一條学院ブログ ] All rights reserved.
Special Template : シンプルなブログテンプレートなら - Design up blog
Special Thanks : 忍者ブログ
Commercial message : [PR]