Subscribe
Google maps apiを最近触ってみたんですが、やり始めがＶ2でＡＰＩキーが必要とかで色々めんどくさかったんです。
一年前からgoogle maps api v3の登場をちらほらと聞いてはいたのでこれを機にとおもって使ってみた。
とはいったもののあまり参考になるサイトで日本語のものがないんですね。
困ったなぁとおもいながら英語のドキュメント読もうかとおもったら非公認の日本語ドキュメント発見
Google Maps API Version3 日本語ドキュメント(非公式)
らっきー！ っておもってたら各オブジェクトの関数説明のところがちらほら「不明」とある。
翻訳がまだ完璧じゃないのかなっておもったら公式の英語ドキュメントですら空欄になってた。
未実装なんだろうか・・
とりあえずgoogle maps api v3の日本語ドキュメントを読みながらがんばってみた。
つくったものはこれです。
作ったシステムの仕様は以下のとおり。
—動作概要—
ページに地図を表示し、地図内の任意の場所にクリックでマーカーを設置することができ、そのマーカーが位置座標を返してくれるってもの。
マーカーはドラッグで位置変更可能。
ダブルクリックでも移動してくれる。
——————-
あまり必要性はなかったかもしれないけど今回もjQuery使ってます。
なのでこのソースそのまま使いたい場合はjQueryダウンロードしてgoogle_map_v3.jsより手前でインクルードしといてください。
gmap_v3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="google_map_v3.js"></script> <title>Google Maps V3</title> </head> <body> <h1>地図上の座標取得ぷろぐらむ</h1> 任意の場所をクリックするとマーカーがあらわれます。 マーカーが位置とってくれます。<br/> <div id="maps" style="width:500px; height:500px; border:1px solid #333;"></div> <div id="flag">true</div> <p> <h3>マーカーの座標（単位：緯度経度）</h3><br/> x座標 : <span id="x">地図上でクリックしてください。</span><br/> y座標 : <span id="y">地図上でクリックしてください。</span> </p> </body> </html>
google_map_v3.js
$(function(){
var marker;
var mapdiv = document.getElementById('maps');
var myOptions = {
zoom: 5,//縮尺
center: new google.maps.LatLng(38.680816,138.767537),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom : true,
scaleControl: true,
scrollwheel: true
};
var map = new google.maps.Map(mapdiv, myOptions);
google.maps.event.addListener(map,'click',function(event){
if($("#flag").text()=="true"){
var x = event.latLng.lat();
var y = event.latLng.lng();
marker = createMarker(map,x,y);
$("#flag").text("false");
echoPoint(event.latLng);
}
});
});
function createMarker(map,x,y){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(x,y),
map: map,
title: "マーカーのタイトル",
draggable: true //なんかV3での動作が超遅いきがする
});
google.maps.event.addListener(marker,'mouseup',function(){
echoPoint(marker.position);
});
google.maps.event.addListener(map,'dblclick',function(event){
marker.setPosition(event.latLng);
echoPoint(marker.position);
});
return marker;
}
function echoPoint(point){
var y = point.lat();
var x = point.lng();
$("#x").text(x);
$("#y").text(y);
}
[解説]
gmap_v3.html
05行目
Google maps api v3のインクルードです。
06行目
jQueryをインクルードしてます。
07行目
今回作ったjsファイルをインクルードしてます。
14行目
このDiv要素に地図を流し込みます。 idでmapsを割り振ってます。 どうもサイズ指定したげないとGoogleさんが怒って変な表示にするみたいなんでスタイルシートいれて指定してます。
15行目
後述しますが、マーカーの表示処理の分岐に使います。
19/20行目
ここに緯度経度が表示されます。
google_map_v3.js
01～31行目
$(function(){
//処理
});
jQueryの書き方なんですが要するにgmap_v3.htmの読み込みが終わったらここに書かれた処理をするよってことです。
14行目
var map = new google.maps.Map(mapdiv, myOptions);
これでマップがでます。
MAPクラスのインスタンス化にmapdiv,myOptionsの二つの引数つけてますが、mapdivってのがgmap_v3.htmlの14行目に指定した地図を流し込むdiv要素になります。 型はHTMLコンテナでブロック要素なら多分なんでもおｋです。
05行目のvar mapdiv = document.getElementById(‘maps’);でHTMLコンテナを取得してます。
mapOptionsが地図に付加されるオプションです。
ここでは
—
zoom: 5,
center: new google.maps.LatLng(38.680816,138.767537),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom : true,
scaleControl: true,
scrollwheel: true
—
としてます。
上から３つまでが必須項目です。
zoomは地図の初期ズーム値です。 指定する数字が若いと縮尺がでかくなります。その逆もしかり。
centerは地図の中心座標です。 指定の型はLatLngっていうGoogleさんの提供してくれてるオブジェクトでこのオブジェクトを作るときの引数が緯度経度になります。 今はとりあえず日本がみれるような座標にしてます。
mapTypeIdはどんな地図にするかってもので今回はロードマップを使いたかったのでgoogle.maps.MapTypeId.ROADMAPと指定しています。
disableDoubleClickZoom : true,
ダブルクリックでのズームはオフにしてます。 うざいよねこれ。
scaleControl: true,
地図のコントロールバーを表示してます。
scrollwheel: true
マウスのスクロールホイールで縮尺を変更できるようにしてます。
16行目
イベントリスナの登録です。
google maps上でのイベントの登録はaddListenerで行います。
引数は
1.イベントが発生するオブジェクト
2.イベントの種類
3.処理（関数）
これは地図上をクリックした時の処理について記述しているので第一引数にMapオブジェクトのはいってるmap、第二引数にclickを指定しています。
第三引数は処理関数です。
clickイベントのときはマウスイベントオブジェクトが関数の引数として指定できます。
マウスイベントオブジェクトは以下の二つのプロパティを持ってます。
latLng ….前述のとおり緯度経度を含むオブジェクトです。
pixel ….これまたGoogleさんの作ったオブジェクトでPointオブジェクトというものです。 これはイベントが発生した位置のカーソルのピクセル値を返します。
18行目if
手前のaddListnerが地図をクリックしたときにマーカーを表示するっていう目的のものなんだけど、クリックするたびにマーカーがどんどんでてきたらマーカーだらけになるので初めてのクリックだけにマーカーを出すというための条件分岐です。
gmap_v3.htmlの15行目のdivの中身がtrueだったら～という分岐です。
ちなみにマーカーが入ったと同時に25行目の$(“#flag”).text(“false”);という処理でdivの中身がfalseにかわるのでこの分岐は一度しか適応されません。
20/21行目
マウスイベントオブジェクトのプロパティであるlatLngオブジェクトのメソッドlat()で緯度をlng()で経度を取得してそれぞれを変数x,yにいれてます。
23行目
createMarker(map,x,y);でマーカーを作ってます。
このcreateMarkerは僕の定義した関数で33行目のところの関数です。
google.maps.Marker({});でマーカーをインスタンス化してます。
地図同様にオプションが指定できます。
positionがマーカーを設置する緯度、経度でLatLngオブジェクトで指定します。
mapはマーカーを設置するマップオブジェクトを指定します。
titleはマーカーのタイトル
draggableはマーカーがドラッグで移動できるかどうかをbool値で指定できます。
41/45行目
前述のaddListenerを使ってマーカーのmouseupイベント、マップにdblclickイベント時に座標を出力するようにイベント処理を登録してます。
mouseupイベントはマーカーをドラッグしてるとき、ドラッグをやめた瞬間に発生するイベントです。
dblclickはダブルクリック時に発生します。
これは第三引数の関数に対してまた、マウスイベントオブジェクトを与えることができます。
mouseupのときとdblclickの時の両方で行ってるのがechoPoint関数でこれは引数にlatLngオブジェクトを与えることでその座標をgmap_v3.htmlの19/20行目のspan要素に流し込む関数で54行目で定義してます。
ちなみにdblclickイベントでは地図上でダブルクリックが生じたところにマーカーを移動させるというシステムの仕様のためにsetPositionメソッドを使ってマーカーの位置をイベント発生した場所に移動させてます。
これもまた引数はLatLngオブジェクトです。
マウスイベントオブジェクトのプロパティから取得しています。
なんとなく作ってみたものの感想としてはV2のがさくさく動いたって印象。
通信速度がある程度速いPCでだったらほとんどかわらず動くけどゴミスペックのPCだったら結構しんどいかもです。
誰かぼくにモンスターPCをかってください＞m＜
ps
今度ジオコードの使い方に関する記事もかきます～
