LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

<<   作成日時 : 2012/06/20 18:30   >>

驚いた ブログ気持玉 1 / トラックバック 0 / コメント 2

前回までは"大阪駅"を中心とする地図を表示し、そこに対して立てたマーカーをオリジナルの画像にするところまで実装している。
->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
驚いた

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
I visited various web pages except the audio feature for audio songs existing at this web page
is genuinely wonderful.
Penney
URL
2017/07/24 17:39
That is very fascinating, You are an overly professional blogger.
I've joined your rss feed and look ahead to
in quest of more of your great post. Also, I have shared your web site in my social networks
Tiffiny
URL
2017/07/25 14:49

コメントする help

ニックネーム
URL(任意)
本 文
Google Maps v3の利用 -(4)地図を移動させて地図の中心座標を取得する- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる