昨日の記事でGoogleMapsを導入したのでやり方のメモなど。。
1:Googleアカウント作成(私は持ってましたが、、(゚∀゚))
2:GoogleMapsApiKey取得
Blog内のどこでも参照できるように、ここで指定するURLはドメインで指定したほうがよいです。(私の場合はhttp://arnie-ism.livedoor.biz/)
3:ApiKeyを取得したら↓の記述を全ページのヘッダに埋め込む。
使用する際は以下2点に注意してください。
4:実際に地図を表示するためのスクリプトを記事中に書く
記事中の表示させたい場所に<div>を縦・横の幅を指定して入れます。
このとき、ページ内で他の記事にも地図を挿入できるようにするために
id属性は一意になるようにしておいてください。(私は日付入れてます)
で、実際にMapを表示させるスクリプトを記入
これで表示されるはずです↓
5:その他(地図の緯度経度を探したり。。)
地図が表示できたのはいいですが、表示する位置や縮尺を指定するのって
結構難しいです。。。http://maps.google.co.jp/で探していたのですが
大きさが変えられないので微妙にずれたりして結構あわせるの大変なんです。。
そこで!
自分が貼りたい大きさで
緯度経度とか縮尺とか地図の形式とかを
簡単に調べられるページ
を作っちゃいました。
これは次のエントリーで!v( ̄∇ ̄)v
1:Googleアカウント作成(私は持ってましたが、、(゚∀゚))
2:GoogleMapsApiKey取得
Blog内のどこでも参照できるように、ここで指定するURLはドメインで指定したほうがよいです。(私の場合はhttp://arnie-ism.livedoor.biz/)
3:ApiKeyを取得したら↓の記述を全ページのヘッダに埋め込む。
<scriptちなみにApiKeyを発行したページにもサンプルが載っていますが、
src="http://maps.google.com/maps?file=api&v=2&key=[先程取得したAPIキー]"
type="text/javascript" charset="utf-8"></script>
使用する際は以下2点に注意してください。
&sensor=true_or_falseの部分はそのまま使うとエラーになります。
trueかfalse指定しないと駄目です。GPS連動するならtrueらしいですが・・・
普通に使うならこの部分の記述は取ってしまってもいいです。
(ここでちょっとはまりました(TДT)。。)
livedoorBlogは文字コードEUC-JPのようなので、charset="utf-8"を
<script> 内に書いておいたほうがいいです。
4:実際に地図を表示するためのスクリプトを記事中に書く
記事中の表示させたい場所に<div>を縦・横の幅を指定して入れます。
このとき、ページ内で他の記事にも地図を挿入できるようにするために
id属性は一意になるようにしておいてください。(私は日付入れてます)
<div id="map20090314" style="width:500px;height:400px;" ></div>
で、実際にMapを表示させるスクリプトを記入
<script type="text/javascript"> //<![CDATA[ (function(){ //↓GoogleMapsに対応しているブラウザかどうか if(GBrowserIsCompatible()){ //document.getElementByIdの引数には、先程指定したidを入れる var map = new GMap2(document.getElementById('map20090314')); //地図の左に出る縮尺のバーを表示 map.addControl(new GLargeMapControl()); //地図の右上に表示される地図タイプのボタンを表示 map.addControl(new GMapTypeControl()); //↓初期位置を決める(緯度経度, 縮尺 , 地図タイプ) //G_NORMAL_MAP → 普通の地図 //G_SATELLITE_MAP → 航空写真 //G_HYBRID_MAP → 地図+航空写真 map.setCenter(new GLatLng(35.65859076776963,139.74549025297165) , 19 , G_SATELLITE_MAP); } })(); //]]> </script>
これで表示されるはずです↓
5:その他(地図の緯度経度を探したり。。)
地図が表示できたのはいいですが、表示する位置や縮尺を指定するのって
結構難しいです。。。http://maps.google.co.jp/で探していたのですが
大きさが変えられないので微妙にずれたりして結構あわせるの大変なんです。。
そこで!
自分が貼りたい大きさで
緯度経度とか縮尺とか地図の形式とかを
簡単に調べられるページ
を作っちゃいました。
これは次のエントリーで!v( ̄∇ ̄)v