Google Mapsを使ってみよう2
今回は前回に引き続きGoogle Maps APIの使い方を説明します。
前回では単に指定した場所の地図を表示するだけでしたが、今回は指定した位置にマークを入れたり、指定した2つの場所の間に線を引いたりしてみます。
基本的な記述方法は以前と同じ物を使用します。宣言文等に関しては前回の「Google Mapsを使ってみよう1」のページをご覧下さい。
まずは、Google Mapsの中にマークを挿入してます。
書き方は簡単です。以下の2行を追加するだけです。
var marker = new GMarker(new GPoint(経度, 緯度));
map.addOverlay(marker);
Gmarkerクラスは、Google Mapsの1つのポイントにアイコンを表示させる為に使用するクラスです。
上記の例では、new GMarker(地図の位置) コンストラクタを呼び出してmarker変数に格納しています。
GMarker(point, icon)
point：GPointオブジェクト
icon：Iconオブジェクト（指定なし：デフォルトGoogle Maps Icon）
Markerの位置が決まったら、GMapクラスのaddOverlayメソッドを使って、GMarkerをGoogle Mapsに挿入します。
addOverlayメソッドは、Google Mapsにマークや線などを追加することが出来ます。
addOverlay(overlay)
overlay：GMarkerオブジェクトやGPolylineオブジェクト等
GMarkerクラスのの説明で、Iconとありましたがマークに自作のIconを使用することが出来ます。
自作のアイコンを使用したい場合は、下記のようにGIconオブジェクトを作成します。
var icon = new GIcon();
icon.image = "http://www.s-memo.net/sample/google_map/icon.gif";
icon.iconSize = new GSize(12, 38);
icon.iconAnchor = new GPoint(0, 38);
GMarkerの第2引数にGIconオブジェクトを指定します。
var marker = new GMarker(new GPoint(経度, 緯度), icon);
GIconクラスの各メソッドの説明は以下の通りです。
尚、サイズは全てピクセル指定です。
icon.image = "使用する画像のURL";
icon.iconSize = new GSize(画像の横幅, 画像の縦幅);
icon.iconAnchor = new GPoint(画像を表示する横位置, 画像を表示する縦位置);
iconAnchorは、画像の表示位置から何ピクセルずらすかを指定します。緯度や経度ではないので注意して下さい。
自作画像でマークを設置する場合、最低でも上記の3つを指定しないとエラーが発生しますので注意して下さい。
今までのソースをまとめると以下の通りです。
<!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>
<div id="message"></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);
var polyline = new GPolyline([new GPoint(139.7028136253357,35.68785351531429),new GPoint(139.70330715179443, 35.69170502716)],"#ff0000", 8, 1);
map.addOverlay(polyline);</script>
</body>
</html>
自作のマークをGoogle Mapsの中に挿入するサンプルはこちらから。
次に、Google Maps上に線を引いてみます。
書き方はこちらも簡単です。以下の2行を追加するだけで線を引けます。
var polyline = new GPolyline([new GPoint(経度, 緯度),new GPoint(経度, 緯度)],"#ff0000", 8, 1);
map.addOverlay(polyline);
GPolylineクラスを変数に格納した後に、GMapクラスのaddOverlayメソッドを使ってGoogle Mapsに配置しています。
GPolylineクラスはその名の通り、Google Maps上に線を引く際に使用するクラスです。
各引数の説明は以下の通りです。
GPolyline(points, color, weight, opacity)
points：GPointオブジェクト（[]で囲むことで複数指定可）
color：線の色・RGBカラー（指定なし：青色）
weight：線の太さ・ピクセル指定（指定なし：3ぐらい？）
opacity：透明度・0から1の間で指定（指定なし：0.5）
位置の指定は[]で囲ってカンマ区切りにすることで複数の場所を指定出来ます。
透明度については、0に近いほど薄くなり、1に近い程濃くなっていきます。
今までのソースをまとめると以下の通りです。
<!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>
<div id="message"></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);
var polyline = new GPolyline([new GPoint(139.7028136253357,35.68785351531429),new GPoint(139.70330715179443, 35.69170502716)],"#ff0000", 8, 1);
map.addOverlay(polyline);</script>
</body>
</html>
Google Mapsに線を引くサンプルはこちらから。
今回は、Google Mapsにマークを挿入する方法とアイコンを設置する方法、更にGoogle Mapsの中に線を引く方法をご紹介しました。
これをプログラムと連携することで色々なことが出来そうです。