住所を使って緯度経度を取得する
Google Maps JavaScript APIには住所情報から緯度と経度を取得するGeocoderがあります。 ここでは、Geocoderの簡単な使い方を説明したいと思います。
住所を入力して移動する
強調してある部分がGeocoder関連箇所です。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geo;
// 初期化。bodyのonloadでinit()を指定することで呼び出してます
function init() {
// Google Mapで利用する初期設定用の変数
var latlng = new google.maps.LatLng(39, 138);
var opts = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
// getElementById("map")の"map"は、body内の<div id="map">より
map = new google.maps.Map(document.getElementById("map"), opts);
// ジオコードリクエストを送信するGeocoderの作成
geo = new google.maps.Geocoder();
// GeocoderRequest
var req = {
address: "新宿三丁目駅",
};
geo.geocode(req, geoResultCallback);
}
function geoResultCallback(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert(status);
return;
}
var latlng = result[0].geometry.location;
map.setCenter(latlng);
new google.maps.Marker({position:latlng, map:map});
}
//]]>
</script>
</head>
<body onload="init()">
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>
Geocoderにはgeocode()というメソッドがあります。 そのメソッドに住所文字列を入れると、指定したfunctionに緯度経度情報が入ります。
上記サンプルでは、緯度経度情報を使ってマーカを地図に追加しています。
表示例
表示例です。
