ウェブサイトに Google Maps を使って地図を表示する

WS000718.png
このエントリーをはてなブックマークに追加
PR

場所の案内や、何処かへ旅行にいってそのことをブログの記事にした
そんなときに地図もあれば、見た人はどこにいったのか分かりやすい
特に Googleマップ には航空写真もあって表現力が豊か

 

ウェブサイトに Google Map を使って地図を載せる方法

まずは Google Maps で表示したい場所を探したり、ズームインします

Google Map

 

画面に写っている地図をダブルクリックやマウスホイールを使ってズームインしていくことが出来ます
また検索で場所を探し出すことも出来ます

WS000718

 

 

 

今回は東京タワーを探してみました
写真モードだと、近づくとこんなふうに見ることが出来ます


大きな地図で見る

 

 

地図モードだとこの様になります


大きな地図で見る

 

 

検索で場所を特定した場合
ピンが表示されます、邪魔な場合は画面の右上にあるところから
チェックを外せば消すことが出来ます

WS000719

 

 

載せたい地図の画面ができたらコードを取得します
左メニューにあるリンクのマークからコードを取得します

WS000720

 

クリックするとコードが表示されます

WS000721

表示する地図の大きさ等を変更した場合は
埋め込み地図のカスタマイズとプレビューをクリックします

 

WS000722

大きさを決めたら、コードをWebサイトに貼り付けます
ブログならHTMLが使えるモードに切り替えて貼り付ければOKです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)