Google Mapsを使ってみよう1
今回は、Google Maps APIを使って地図を作ってみます。
作ってみた感想ですが、基本的にHTMLとJavaScriptの知識があれば簡単に作れるので結構便利です。
ただ、結構精密に出来てて、ちょっと位置を間違えただけでブラウザが固まったりします。
また、表示にも結構時間かかります＾＾；
多少の問題はありそうですが、その分を差し引いてもこれだけの機能を無料で使えるので凄いです。
Google ローカルを自分のサイトで使う為には、「Google アカウント」の作成と「Google Maps」からGoogle Maps API keyを取得する必要があります。
最初にGoogle アカウントを作成します。メールアドレスとパスワードを指定するだけで登録出来ます。
次に、Google Maps API keyを取得します。ここでは、Google Mapsを使用したいサイトのURLを入力するとGoogle アカウントのMyPageにGoogle Maps API Keyが表示されるので、そのkeyをどこかに記録しておきます。
これでGoogle Mapsを使う準備が出来ました。これからHTMLを作って行きます。
HTMLの文字コードを「UTF-8」にして、ヘッダー部分を以下のように記述します。
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=キーを指定" type="text/javascript"></script>
</head>
<script src="http://maps.google.com/maps?file=api&v=1&key=キーを指定" type="text/javascript"></script>の部分で、Google Maps API keyを指定しています。
スタイルシート等の他の部分は、Google Mapsを使う際のおまじないみたいに思っていて下さい。
ここをちゃんと記入しないと全く動かなくなったりします＾＾；
次にMapを配置する場所を決めて、<div>を指定します。
<div id="map" style="width: 600px; height: 400px"></div>
widthとheightはMapの横の長さと縦の長さを指定します。
idは「map」と記述してありますが、これは別の名前でも構いません。idについてはこの後、説明します。
</div>の下に、JavaScriptを記述します。
まず、はじめにGMapオブジェクトを呼び出します。
var map = new GMap(document.getElementById("map"));
document.getElementByIdの引数には、<div>のid属性と同じ名前を記述します。
GMapオブジェクトの説明は以下の通りです。
GMap(container, mapTypes, width, height);
container：Google Mapsを表示する場所を指定
mapTypes：マップのTypeを指定（MAP_TYPE、SATELLITE_TYPEなどがあります）
width：Google Mapsの横幅
height：Google Mapsの縦幅
第1引数以外は、指定しなくても大丈夫です。
横幅と縦幅も<div>に依存されます。
次にaddControlメソッドを使って、Google Mapsをセットアップします。
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
addControlメソッドを使うとGoogle Mapsに色々な機能を追加することが出来ます。
addControl(control);
control：Google Mapsの機能を追加する
controlの種類には、以下のようなものがあります。
new GLargeMapControl()は、Google Mapsの左側にズーム機能を実装します。
new GMapTypeControl()は、Google Mapsの右上に「マップ」「サテライト」「デュアル」の3つのボタンが追加されます。
次は、centerAndZoomメソッドを使って表示するGoogle Mapsの場所を指定します。
map.centerAndZoom(new GPoint(139.7028136253357,35.68785351531429), 3);
centerAndZoomメソッドの説明は以下の通りです。
centerAndZoom(latLng, zoomLevel);
latLng：Google Mapsの位置を指定します
zoomLevel：ズームレベル（0～17：数字が低いほどアップします）
Google Mapsの位置を指定する場合は、GPointオブジェクトを使います。
GPoint(x, y);
x:経度
y:緯度
GPointオブジェクトは、与えられた座標値で新しいポイントを作成します。
ここまで作るととりあえずGoogle Mapsが見れるようになります。
今までのソースは以下の通りです。
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=キーを指定" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(139.7028136253357,35.68785351531429), 3);</script>
</body>
</html>
Google Maps制作例は以下の通りです。
Google Mapsの制作例を見てみる
Google Mapsには、指定の位置にマークを入れたりGoogle Maps上に線を引いたりすることが出来ます。
これらの機能は「Google Mapsを使ってみよう2」で紹介します。