指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。
<!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>