ここから

未来のビジョン

グーグルマップをブログなどに読み込む

昨日会社のホームページにグーグルマップを読み込みました。

簡単にできたのでやり方を書いてみます。

 

グーグルマップで最初に表示したい地域を検索する。

f:id:youji82:20150926085806p:plain

②メニューをクリック。

f:id:youji82:20150926091019p:plain

③地図を共有または埋め込むを選択

f:id:youji82:20150926091309p:plain

④地図を埋め込むを選択。

f:id:youji82:20150926091842p:plain

⑤下に出てくるコードをコピー(Ctrl +C)。

f:id:youji82:20150926092017p:plain

⑥出てきたものをHTML編集で張り付ける(Ctrl +V)。 

はてなブログはHTML編集。Amebaブログだとタグ編集など。

 

記述の中のwidth="600"が横幅、height="450"が縦幅になる。

このサイズを変更すると表示するサイズを調整できる。

 

↓これは見たまま編集で張り付けたもの。

 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5572.333224483495!2d132.35991811264392!3d33.85540698926139!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354542230ddc2bad%3A0xf077a6b857a4d5cc!2z5bGx5Y-j55yM5aSn5bO26YOh5ZGo6Ziy5aSn5bO255S6!5e0!3m2!1sja!2sjp!4v1443226417382" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

 

↓HTML編集で張り付けると、指定した場所のグーグルマップが貼り付けできる。