グーグルマップをホームページに簡単に表示する方法

WordPress専門で集客HP制作

ホームページを活用するためのノウハウを提供します
問い合わせが無い、検索結果で上位に表示したい(SEO対策)など、
役に立つホームページでお悩みの方はご相談ください。

商テン見聞録

グーグルマップをホームページに簡単に表示する方法

2008年3月4日(火)

 ビジネスホームページでも、グーグルマップを利用しているのをよく見るようになりました。
 今回は、グーグルマップの静止画を簡単に表示できるサービスをご紹介します。

 英語のホームページですが、検索は日本語でも利用できるので、簡単に設定することが可能です。

 Static Map Wizard

 ためしに、札幌の「時計台」の地図を表示してみます。

 「時計台」で検索すると、地図が表示されるので、左のボタンで位置や倍率を設定します。

Static Map Wizardホームページ

 表示サイズは、2項目で調整できます。

Static Map Wizardホームページ

 3項目でMaps APIのKEYを取得しなければならないため、「I agree to abide by the Maps API」にチェックし、表示するホームページのアドレスを入力すると、一番下に、地図画像のリンク先を表示されるので、imgタグで記述すると表示できます。


<img src="http://maps.google.com/staticmap?center=43.062526,141.353326&markers=43.062526,141.353326,red&zoom=13&size=500x300&key=ABQIAAAAnU6UbbsgXcXGuH9UtMqERBSLhHllL82gTNm47pTb6LoE-441_xS3vww41B2-gFKXkLMdMVkpWTv6sQ" alt="札幌時計台の場所" />

 実際にソースに記述すると、次のように地図が表示されます。

札幌時計台の場所

 地図のリンクアドレスを見ると、設定項目が「&」で区切られて含まれていることがわかります。

  • center ・・・ 中心の座標
  • markers ・・・ 緯度経度,マーカーの色
  • zoom ・・・ 倍率(0~19)
  • size ・・・ 画面サイズ(横×縦)
  • key ・・・ Maps API Key

 倍率や画面サイズを変更したいときは数字を変更してください。
 座標、緯度経度は、最初からやり直したほうが良いと思います。

 zoom(倍率)を、13から16に、マークを青に変更すると、下記のようにアップになります。

札幌時計台の場所

 このように簡単に設定できますので、ビジネスに役立ててください。

 アドレスに含まれる「&」ですが、HTML特殊文字のため、W3Cでは、「&amp;」と記述することをすすめられています。
 きちんと表示されますが、気になる方は変更してください。

外部リンクのSEO対策
コメント

コメントはございません。

コメントを投稿する


 ※公開されません



HOME » 商テン見聞録 » ホームページ作成Point » グーグルマップをホームページに簡単に表示する方法
このページのトップへ

1ランク上を目指すメルマガ

Yahoo!ブックマークに登録
無料!今すぐ登録!

SEO対策、招客ホームページの作り方などのノウハウを、ネット初心者の方にもわかりやすく月1~2回、お伝えしています。
ツイてるノウハウ集付き

メールアドレス

ご氏名(全角)

サテライト型ホームページ戦略
Google Analytics設定代行サービス
WordPressとは?
無料コンサルティング診断