• 小
  • 中
  • 大

地図座標位置の取得

クリックで地理座標、住所、ズームレベルを取得するサンプル。

サンプルコード


サンプル.js


function initialize() {
var Marker;
var map;
var latlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map
(document.getElementById("map_canvas"),opts);

//地図クリックイベントの登録
google.maps.event.addListener(map, 'click',
function(event) {
if (Marker){Marker.setMap(null)};
Marker = new google.maps.Marker({
position: event.latLng,
draggable: true,
map: map
});
infotable(Marker.getPosition().lat(),
Marker.getPosition().lng(),map.getZoom());
geocode();
//マーカードラッグイベントの登録
google.maps.event.addListener(Marker,'dragend',
function(event) {
infotable(Marker.getPosition().lat(),
Marker.getPosition().lng(),map.getZoom());
geocode();
})
//地図ズームチェンジイベントの登録
google.maps.event.addListener(map, 'zoom_changed',
function(event) {
infotable(Marker.getPosition().lat(),
Marker.getPosition().lng(),map.getZoom());
})
})
//ジオコーディング
function geocode(){ var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'location': Marker.getPosition()},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results[0]){
document.getElementById('id_address').innerHTML =
results[0].formatted_address.replace(/^日本, /, '');
}else{
document.getElementById('id_address').innerHTML =
"Geocode 取得に失敗しました";
alert("Geocode 取得に失敗しました reason: "
+ status);
}
});
}

//HTMLtagを更新
function infotable(ido,keido,level){
document.getElementById('id_ido').innerHTML = ido;
document.getElementById('id_keido').innerHTML = keido;
document.getElementById('id_level').innerHTML = level;
};
};

サンプル.html
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>

</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル 地図座標位置の取得</p>
地図上でクリックで座標・住所の取得
<table style="width:600px;border:0;" >
<tr style="background-color:#dddddd;">
<th style="width:120px">項目</th>
<th>情報</th></tr>
<tr><td>緯度</td><td id="id_ido"></td></tr>
<tr><td>経度</td><td id="id_keido"></td></tr>
<tr><td>ズームレベル</td><td id="id_level"></td></tr>
<tr><td>住所</td><td id="id_address"></td></tr>
</table>
<div id="map_canvas" style="width:600px; height:300px"></div>
</body>
</html>


表示例 地図上でクリックで座標・住所の取得


Google Maps サンプル > 地図座標位置の取得