hampom.wordpress.com のソースコードです。コメントを追加させていただきました。
//jqueryのreadyメッソード
//HTMLが読み込まれたあとに実行されるメッソード(ready)
$(document).ready(function() {
//住所の項目を取得
var mapdiv = document.getElementById('map_canvas');
//google mapの必要なライブラリー:geocoder
var geocoder = new google.maps.Geocoder();
//jqueryでの座標項目を取得(lat + long)
var org_lat = $('#lat').val();
var org_lng = $('#lng').val();
//mapの中心(35.6585873,139.7454247)
var point = new google.maps.LatLng(org_lat, org_lng);
//マップインスタンスのoptions
var myOptions = {
zoom: 16,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
//マップの初期化
var map = new google.maps.Map(mapdiv, myOptions);
//マーカーを追加
//座標はマップの中心と同じ
var marker = new google.maps.Marker({
position: point,
map: map,
draggable: true
});
//上記に追加したマーカーのイベント追加(drag/drop)
//動かせると、座標項目を更新
google.maps.event.addListener(marker, 'dragend', function() {
var p = marker.position;
$('#lat').val(p.lat());
$('#lng').val(p.lng());
});
//【住所】項目がクリックされると・・・
$('#getad').click(function() {
//入力された住所を取得
var sad = $('#address').val();
//geocoderを初期化
//実はこの一行が重複してて、要らないですw
var geocoder = new google.maps.Geocoder();
//geocodeメッソードを呼んで、情報を取得
//パラメータとしては ⇒ 入力された住所 (sad)
//二つ目のパラメータはcallback
geocoder.geocode({ 'address': sad}, function(results, status) {
/*callbackの中で二つのパラメータが入ってます:
1:結果(json情報)
2:ステータス(情報を取得できたかどうか)
*/
//問題がなければ・・
if (status == google.maps.GeocoderStatus.OK) {
//マップの中心を更新
map.setCenter(results[0].geometry.location);
//マーカーの中心を更新
marker.setPosition(results[0].geometry.location);
//lat + long項目を更新
var p = marker.position;
$('#lat').val(p.lat());
$('#lng').val(p.lng());
} else {
alert('住所から場所を特定できませんでした。最初にビル名などを省略し、番地までの検索などでお試しください。');
}
});
return false;
});
});