« 下の子がボーイスカウトのキャンプから戻る | トップページ | ダイエットが遅々として進まない »

2007年8月27日 (月)

Google Maps API を使ってブログに地図を表示する

今日も朝からいいお天気で、それなりに気温も上がりましたが、猛暑日というほどではありませんでした。

このところ、 Google Maps API を勉強して、ブログに地図を貼り付けたりしています。最初は、我が家の近くのこどもの城の地図を、レンタルしているブログに付属していたのを使っていたんですが、最近では、海水浴に行った先とか、遊びに行ったとしまえんの地図を貼り付けています。いままで使った地図は以下の通りです。

  • こどもの城

  • 内房の海水浴場

  • としまえん

基本的には、 Java Script のプログラミングですから、難しいと言えば難しいし、やさしいと言えばやさしいものです。私のようなシロート以上でプロ未満のアマチュア・プログラマーにはちょうどいいレベルのような気がします。そこで、今夜のエントリーはGoogle Maps API の簡単な使い方と作り方について、自分なりのメモを残しておこうと思います。先月の html 4.0 のメモみたいなもんです。関係ない人には関係ないと思います。

まず、手順です。

  1. Google Maps API のkey を取得する。
    Google Maps API のページから取得できます。地図を貼る URI ごとに異なる key が付与されるようですが、ローカルで見る範囲では必要ないみたいです。

  2. サンプル・プログラムを入手する。
    key を取得すると、同時にサンプル・プログラムがもらえます。ただし、日本語だけの注意点なんですが、charset、すなわち、文字コードを日本語のデフォルトである s-jis ではなく、 utf-8 にする必要があります。サンプル・プログラムの html のメタ部分や Java Script のヘッダで、そのように指定してありますので、実際の html ファイルを utf-8 で保存できるテキストエディタが必要です。何のことだか分からない人は、このあたりで脱落します。

  3. 操作ボタンを配置する。
    ズーム、スクロール、概要マップ、標準地図と衛星写真の切替え、なんかのボタンを趣味に応じて配置します。また、マーカーも表示したりします。詳しくは後述します。

Google がくれるサンプル・プログラムそのままではそっけない地図になりますから、上のリストにも書きましたが、操作ボタンなんかを配置します。でも、その前に、地図の中央とズーム比を決めるところから始まります。それから、私が好きなボタンなどを以下に取り上げます。

  1. 地図の中央とズーム比率を決める。
    緯度と経度で指定します。緯度については北緯がプラス、南緯がマイナス、経度については東経がプラス、西経がマイナスです。ズーム比は数字が小さいほど広域地図になります。
    こどもの城の例は以下の通り、北緯35.66239度、東経139.70749度、ズーム比は15です。
    var point = new GLatLng(35.66239, 139.70749);
    map.setCenter(point, 15);
  2. 中央にマーカーを配置する。
    var mp = new GLatLng(point.lat() , point.lng() );
    var marker = new GMarker(mp);
    map.addOverlay(marker);
  3. ズームとスクロールのボタンを左上に配置する。
    map.addControl(new GLargeMapControl());
  4. 地図・衛星写真・ハイブリッドの切替えボタンを右上に配置する。
    map.addControl(new GMapTypeControl());
  5. 右下に概要地図を表示する。
    私はこれは好きではないので、通常は使いません。
    map.addControl(new GOverviewMapControl());
  6. 地図の初期タイプを決める。
    地図・衛星写真・ハイブリッドの初期表示を決めます。当然、3種類あります。
    map.setMapType(G_NORMAL_MAP);
    map.setMapType(G_SATELLITE_MAP);
    map.setMapType(G_HYBRID_MAP);

もちろん、サンプル・プログラムを見れば、大きさを width と height で設定したり、表示位置を margin や padding を使ってピクセル単位で指定することも出来ます。上の写真は list タグで整理してから、400*400 で表示してあります。しかし、インパクトのある素材ではあるんですが、ブログを開くのが重くなってしまうのは欠点です。頻繁に使うべきではないのかもしれません。
何となく、ネタ切れの今夜は、Google Maps APIに関するトリビアな日記です。

|

« 下の子がボーイスカウトのキャンプから戻る | トップページ | ダイエットが遅々として進まない »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/20840/8603092

この記事へのトラックバック一覧です: Google Maps API を使ってブログに地図を表示する:

« 下の子がボーイスカウトのキャンプから戻る | トップページ | ダイエットが遅々として進まない »