Google Mapsの基礎

Google Mapsの設置

Google Maps のAPIキーの申し込み

まず、Google Maps APIのサイトから、サインアップページを開きます。

サインアップページで利用条件に同意し、サイトのURLを入力すればAPIキーが取得できます。キーの取得にはGoogleアカウント（無料）が必要です。

[I have read and agree with the API terms and conditions]のチェックボックスをチェックし、[My Web Site URL:]のテキストボックスにGoogle Mapsを利用するサイトのドメインを入力します。次に[Generate API Key]をクリックすると、APIキーとHTMLサンプルが表示されます。
もし、このときGoogleアカウントをまだ持っていなければ、自動的に申し込み画面に進むので、アカウント取得の手続きを済ませてください。

サンプルHTMLには取得したAPIキーが埋め込まれているので、このサンプルHTMLはそのままでも使えます。ためしに、サンプルHTMLを新しいファイルにコピー＆ペーストしてサーバに設置してみるとよいでしょう。

サンプルHTMLをsmartにアップした例

※Google Mapsはページが設置されたドメインをチェックするので、ローカルでは表示されません。

サンプルHTMLをHACKする

Google Mapsから取得したサンプルHTMLは下記のようなものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://maps.google.com/maps?file=api&v=1&key=****" 
type="text/javascript"></script>


</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>

<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
//]]>
</script>

</body>
</html>

"key=****" の部分に、Google Mapsで取得したAPIキーが埋め込まれています。ここはGoogleのAPIを読み込むだけですので、変更の必要ありません。

"<div id="map" style="width: 500px; height: 400px"></div>" に、Google Mapsの地図が出力されます。id名の[map]はJavaScriptでも使うので、覚えておきましょう。

残りの太字が地図をコントロールするJavaScriptのソースです。

Google Mapsの推奨

Google Mapsは、標準準拠（standards compliant mode）のレンダリングモードを採用したXHTML文書への埋め込みが推奨されています。あくまで推奨なので、HTML4.01でも問題なく動作します。

文字のエンコードはUTF-8です。埋め込み先のファイルが他のエンコードを採用している場合は、Google Maps用にUTF-8ベースのファイルを作成し、インラインフレーム（iframe要素）で呼び出すとよいでしょう。

※インラインフレームを採用する際は、呼び出し元ファイルの文書型はStrictではなくTransitional以下になります。

Gmapクラス

地図を表示するだけであれば、スクリプトは以下の2行で十分です。

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

Google Maps APIに用意されているGmapクラスは、地図インスタンスを作成するためのもので、このクラスは地図の数だけ作成します。
Gmapに渡す引数には、getElementByIdメソッドなどを使って地図を表示する領域を指定します。

地図の大きさを指定する

"<div id="map" style="width: 500px; height: 400px"></div>"のスタイル指定を見ると、 縦（height）・横（width）のサイズ指定があります。ここの数値を変更すれば、地図のサイズを変更することが出来ます。

地図のサイズを横100px、縦300pxに変更
<div id="map" style="width:100px; height:300px"></div>

座標を指定する

centerAndZoomメソッドを使って、地図の中心点の経度と緯度を指定することができます。

var map = new GMap( document.getElementById("map") );

// 座標の指定
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906),
4);

centerAndZoomメソッドの1番目の引数は中心座標で、Gpointメソッドの引数に左から順番に経度、緯度を指定します。2番目の引数は倍率を指定するためのもので、値が小さいほど詳細な地図になります。

経度と緯度を調べるためのツールを用意したので、ご利用ください。

『東京タワー』『中目黒3-22-4』から経度、緯度を調べてくれるGeocodingというサイトも便利です。

移動/縮尺ボタンの表示

addControlメソッドを使って、地図上に移動/縮尺ボタンを表示することが出来ます。

var map = new GMap( document.getElementById("map") );

// 移動/縮尺ボタンの表示
map.addControl( new GSmallMapControl() );
// 座標の指定
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906),
4);

addControlメソッドの引数として、GSmallMapControlメソッド、もしくはGLargeMapControlメソッドを指定します。GSmallMapControlメソッドは縮尺ボタンにスライドバーが表示されないタイプで、GLargeMapControlメソッドはスライドバーが表示されます。

GSmallMapControlメソッドとGLargeMapControlメソッドのサンプル

マップ/サテライト切り替えボタンの表示

addControlメソッドを使って、地図上にマップ/サテライト切り替えボタンを表示することが出来ます。

var map = new GMap( document.getElementById("map") );

// 移動/縮尺ボタンの表示
map.addControl( new GSmallMapControl() );

// マップ/サテライト切り替えボタンの表示
map.addControl( new GMapTypeControl() );

// 座標の指定
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906),4);

マップ/サテライト切り替えボタンはscript要素のsrc属性のURLが maps.google.com の場合、切り替えボタンはマップとサテライトとハイブリッドの3つのボタンが表示されますが、maps.google.co.jp の場合、ハイブリッドに対応していないため、マップとサテライトの2つのボタンが表示されます。

マーカーの表示

GPointメソッドで経度と緯度を持つオブジェクトを生成し、そのオブジェクトをGMarkerメソッドの引数にしてさらにオブジェクトを生成、addOverlayメソッドにそのオブジェクトを引数にして、マーカーを表示させます。GPointメソッドに渡す経度と緯度の情報は、中心点となる座標とは別の値でもかまいません。


var map = new GMap( document.getElementById("map") );

// 移動/縮尺ボタンの表示
map.addControl( new GSmallMapControl() );
// マップ/サテライト切り替えボタンの表示
map.addControl( new GMapTypeControl() );
// 座標の指定
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906),
4);

// マーカーの表示
var point = new GPoint(139.70184803009033, 35.65855154020906);
var marker = new GMarker(point);
map.addOverlay(marker);

マーカーの表示サンプル

インフォウィンドウの表示

openInfoWindowメソッドを使って、地図に情報窓（インフォウィンドウ）を表示させます。 


var map = new GMap( document.getElementById("map") );

// 移動/縮尺ボタンの表示
map.addControl( new GSmallMapControl() );
// マップ/サテライト切り替えボタンの表示
map.addControl( new GMapTypeControl() );
// 座標の指定
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906),4);
// マーカーの表示
var point = new GPoint(139.70184803009033, 35.65855154020906);
var marker = new GMarker(point);
map.addOverlay(marker);

// インフォウィンドウの表示
var offset = new GSize(10, -20);
map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("渋谷駅"),offset);

openInfoWindowメソッドの第1引数にインフォウィンドウを表示させる経度と緯度を指定し、第2引数に表示させる文字列、第3引数に表示位置のオフセット情報を指定します。

第3引数にしていするオフセット情報は、GSizeメソッドで作成することができます。例では、第1引数で指定した表示位置を、x軸を10ピクセル、y軸を-20ピクセル移動しています。

openInfoWindowメソッドは通常の文字列しか扱えませんが、openInfoWindowHtmlメソッドを使うと、HTMLタグを使えます。

openInfoWindowHtmlメソッドを使った場合
//--ここから    ------------------------------

var map = new GMap( document.getElementById("map") );

map.addControl( new GSmallMapControl() );
map.addControl( new GMapTypeControl() );
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906),4);
var point = new GPoint(139.70184803009033, 35.65855154020906);
var marker = new GMarker(point);
map.addOverlay(marker);
//--ここまではopenInfoWindowメソッドと同じ    ------

// インフォウィンドウの表示
var textnode = '<b>リズムファクトリー事務所</b><br />東京都目黒区中目黒3-22-4鈴木ビル101号室</font>';
marker.openInfoWindowHtml(textnode);

地図の移動

表示した地図を自動的に移動させることが出来ます。

次のスクリプトは一度表示した地図を、3秒後に違う場所に移動させます。

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906), 3);

// 地図の移動

window.setTimeout(function(){
    map.recenterOrPanToLatLng(
        new GPoint(139.698741,35.639005)
    
);
}, 3000);

地図の中心座標を変更するメソッドはrecenterOrPanToLatLngです。このメソッドに、centerAndZoomメソッドと同じ要領で中心座標をセットします。

map.recenterOrPanToLatLng(
    new GPoint(139.698741,35.639005)
);

3秒後に地図を移動、というアクションは、JavaScriptのタイマーメソッドのsetTimeoutを利用します。setTimeoutの書式は下記のとおりです。

setTimeout(実行したい関数, 時間);

第2引数の時間は、1/1000秒単位で指定します。3秒の場合でしたら、3000となります。

イベント処理

GEvent.addListenerメソッドかGEvent.bindメソッドを使用することで 、地図へのクリックやドラッグといったイベント発生時に指定したコードを実行させることが出来ます。

例えば、ユーザが地図をクリックした際に、JavaScriptのアラートを表示するには下記のようなコードになります。

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(139.70184803009033, 35.65855154020906), 4);

GEvent.addListener(map, 'click', function() {

 alert("地図がクリックされました");
});

サンプルを表示

 

PAGE TOP

新着記事

タグクラウド

Smartからのお知らせ

関連サイト