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に関するトリビアな日記です。