Google Maps v3の利用 -(4)地図を移動させて地図の中心座標を取得する-

前回までは"大阪駅"を中心とする地図を表示し、そこに対して立てたマーカーをオリジナルの画像にするところまで実装している。
->Google Maps v3の利用 -(3)マーカーを画像に変更する-

今回はマーカーを立てたい時などに役に立つ、座標の取得を行う。
前回用意したソースへ新たに下記の10行程度のソースコードを追加する。

// ▽マーカー
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.702306, 135.495824),
map: map,
title: "大阪駅"
});
// △マーカー







// ▽マーカー
var marker = new google.maps.Marker({
position: new google.maps.LatLng(34.702306, 135.495824),
map: map,
title: "大阪駅",
icon: new google.maps.MarkerImage(
'icon.png', // 画像パス
new google.maps.Size(18, 28), // 画像サイズ
new google.maps.Point(0, 0), // 画像の起点座標
new google.maps.Point(9, 28) // 画像から見たマーカーの位置
)
});
// △マーカー

// ▽マップ移動のイベント処理
var event = new google.maps.event.addListener(map, "drag", function() {
var mappoint = map.getCenter();
var lat = mappoint.lat();
var lng = mappoint.lng();
document.getElementById("point").innerHTML = mappoint + " 個別 " + "緯度:"+lat+"、経度:"+lng;
;
});
// △マップ移動のイベント処理



これをブラウザで確認すると次のようになる。

 地図を移動させて地図の中心座標を取得する


実際に任意の座標を取得するシーンとなると、このままでは中心があいまいなので中心点を示す画像を用意するか、今回のソースを流用してクリックした地点の座標を取得するようにするのが実用性があると考えられる。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

驚いた

この記事へのコメント

この記事へのトラックバック