Google Maps API キーの取得→コントロールの追加

Google Code(URLはhttp://code.google.com/intl/ja/にいろいろと面白そうなものがあるので触って見ようかと思いました。人の書いたコードを読むのは勉強になるし、カスタマイズするのも勉強になる。やがて自分ですごいコードが作れるようになるよね、きっと。

まずは触って面白そうなGoogle Maps API、これは旧サイトで一度触ってちょっと解説みたいなものを書いてあるけどGoogleさんのAPIはよく変わるとのことでGoogle Codeのドキュメントとかみながらやってみます。（もちろん自分のドキュメントも参考にします^^)

キーの取得とサンプルの表示

Google Maps APIを使うにはまず自分のサイトのキーを手に入れる必要があります。キーはサインアップページhttp://code.google.com/intl/ja/apis/maps/signup.htmlから取得することができます。上記リンクをクリックして表示されるページの一番下で同意しますのチェックボックスをチェックして、自分のサイトのURLを入力して[APIキーを生成]ボタンをクリック。

1日50万PVを超えるようなら連絡してくださいとのことです^^;

ちょっと縮めすぎて見えなくなっちゃったけど一番上が生成されたキー、2番目がさっき入力したURL、3番目がサンプルコード。この3番目をコピペして自分のサイトへ置くと地図が表示されます。ちょっと置いてみました→sample.html

ドラッグすると地図を動かせるし、左ダブルクリックで拡大、右ダブルクリックで縮小できます。これで世界中どこの地図でも表示できますね。

マップにコントロールを追加する

寂しいのでマップにコントロールを追加しました。それとちょっとだけマップを大きくしました。

マップ自体の大きさはサンプルコードの下の方の<div id="map" ... >のwidthとheightで変更します。

元のコードにコントロールを追加したコードを以下に記載します。

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	// ★ ドラッグ/ズーム用
        var mapControl1 = new GLargeMapControl();
        map.addControl(mapControl1);
	// ★ 地図/航空写真/地図・写真
	var mapControl2 = new GMapTypeControl();
	map.addControl(mapControl2);
	// ★ スケール 距離
	var mapControl3 = new GScaleControl();
	map.addControl(mapControl3);
	// ★ 全体図
	var mapControl4 = new GOverviewMapControl();
	map.addControl(mapControl4);
      }
    }

追加したサンプルの実行結果がこちら→sample1.html

GLargeMapControl

ドラッグ/ズームコントロール。

デフォルトでは画面左上にあります。

GSmallMapControl

GLargeMapControlを使用していないので今回は使っていません。

GLargeMapControlより場所を取らないコントロールです。

GSmallZoomControl

GLargeMapControlを使用していないので今回は使っていません。

ズームだけに使用するコントロールです。

GScaleControl

地図の縮尺を表します。マイル・フィートとキロメートル・メートルで表示されます。

デフォルトでは画面の左下にあります。

GMapTypeControl

デフォルトで画面の右上にあるボタンです。地図の種類を選択するためのボタンです。地図/航空写真/地図・写真の切り替えができます。

GOverviewMapControl

デフォルトで画面の右下にあります。

全体図とGoogle Codeでは書かれているのですが現在表示されている地図より少し大きめの地図です。ここでドラッグしても地図の表示を移動させることができます。

HOME UP