スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. --/--/-- (--)|
  2. スポンサー広告

Google MapsをFC2ブログに設置する

Google MapsをFC2ブログで利用する方法を説明しています。

STEP1:Google Maps API keyの取得

Google Mapsの利用には下記サイトからGoogle Maps API key(以下マップキー)を取得します(無料)。マップキーの取得に必要な情報は設置ブログのURLです※1
»http://www.google.com/apis/maps/>Sign up for a Google Maps API key

※1:Google Maps API keyの取得にはGoogleアカウントが必要です。

STEP2:Google Mapのjavascriptコードを保存

マップキー取得の際にjavascriptコードのサンプルが表示されます。

STEP3:緯度·経度の調べる

地図を表示したい場所の緯度·経度を調べます。下記サイトでは住所から緯度·経度を簡単に調べることができます(日本の緯度は大まかに35あたり,経度は136~137あたり)。
»geocoding

STEP4:Javascriptコードの変更

マップキーを取得した際に表示されるサンプルコードをカスタマイズします。目的の地図を表示するだけの場合に必要な変更箇所はマップキーの値と緯度·経度情報です。具体的にJavascriptコードを変更する箇所は赤字の①~④です。

①:取得したマップキーの値を入力。マップキー取得時の サンプルを利用する場合は既に、値が埋め込まれているので変更の必要はありません。

②:表示したい場所の緯度(日本の場合35~36;)を入力する。

③:表示したい場所の経度(日本の場合136~137)を入力する。

④:表示する場所の拡大度を0~17で指定する。17が一番拡大して表示

IE対策としてcharset="utf-8"を追加する

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=①"
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(②, ③), ④);
}
}

//]]>
</script>

STEP5:JavascriptコードをHTMLに挿入する

FC2のテンプレートの編集画面からJavascriptコードをHTMLコードに挿入します。HTMLに挿入する箇所は大きく2箇所あります。
(1)head要素の最後に挿入するコード
(2)body要素の地図を表示する部分に挿入するコード

(1)のhead要素に挿入するコートはSTEP4で変更したコードです。

(2)のbody要素の地図を表示したい部分に挿入するコードは下記のコードを挿入します
<div id="map" style="width: 500px; height: 300px">div>

参考記事
»Ajax Google Mapsを自サイトに設置する

関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-

スポンサーサイト

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ・ブログ制作
  2. ジャンル:コンピュータ
  1. 2007/07/20 (金)|
  2. [Javascript]Google Maps
  3. | トラックバック:0
  4. | コメント:0

«外部ファイル -Google Maps- | ホーム | 携帯HP制作のための用語集»

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://cubelabo.blog110.fc2.com/tb.php/103-57e2ea38
この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。