指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<title>設置サンプル - GMAPv3 - ジオコーディング</title>
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var geocoder, map;
/* 地図上に追加されたオーバーレイを格納する配列 */
var overlays = [];
$(function(){
initialize();
$("#btn").bind("click",function(){
codeAddress();
}).trigger("click");
});
/* 地図の初期化 */
function codeAddress() {
var address=$("#address").val();
geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) {
if(status==google.maps.GeocoderStatus.OK){
/* オーバーレイ消去 */
if(overlays.length>0){
for(i in overlays){
overlays[i].setMap(null);
}
overlays.length=0;
}
/* 地図の中心点を変更 */
map.setCenter(results[0].geometry.location);
/* 指定された境界に合うように地図を表示 */
if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds);
if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport);
/* マーカー */
var marker = new google.maps.Marker({
map:map,
position: results[0].geometry.location
});
var contentString="";
contentString+="◆住所<br> "+address+"<br>";
contentString+="◆緯度・経度<br> "+results[0].geometry.location.toUrlValue()+"<br>";
contentString+="◆位置タイプ<br> "+results[0].geometry.location_type+"<br>";
contentString+="◆正確な境界<br> "+results[0].geometry.bounds+"<br>";
contentString+="◆推奨されるviewportの境界<br> "+results[0].geometry.viewport+"<br>";
contentString+="◆結果のジオコード要素タイプ<br>";
for(var i in results[0].types){
contentString+=" "+results[0].types[i]+"<br>";
}
/* 情報ウィンドウ */
infowindow=new google.maps.InfoWindow({
content: contentString,
maxWidth: 250
});
infowindow.open(map, marker);
overlays=[marker, infowindow]
}else{
alert("ジオコードの取得に失敗しました\n"+status);
}
});
return false;
}
function initialize(){
/* ジオコードオブジェクト */
geocoder = new google.maps.Geocoder();
/* 緯度・経度：日本 */
var myLatlng=new google.maps.LatLng(36.204824,138.252924);
/* 地図のオプション設定 */
var myOptions={
/*初期のズーム レベル */
zoom: 2,
/* 地図の中心点 */
center: myLatlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/* 地図オブジェクト */
map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1>設置サンプル - GMAPv3 - ジオコーディング</h1>
<p> 指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。</p>
<form onsubmit="return false;">
<input type="text" id="address" value="東京タワー" />
<input type="button" id="btn" value="住所から緯度・経度を取得" />
</form>
<!-- 地図の埋め込み表示 -->
<div id="map_canvas"></div>
</body>
</html>