GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押すと経度緯度が自動で入力された上でGoogleMap上でも該当住所の位置にマーカーを表示させたい。また、経度緯度を入力後にボタンを押すとGoogleMap上でも該当位置にマーカーを設置したい(この場合は住所の自動入力不要)。以下に方法をメモ。

HTML部分

<!-- 住所 -->
<input type="text" name="address" id="address">
<!-- 住所 -->

<!-- 緯度 -->
<input type="text" name="lat" id="lat">
<!-- 緯度 -->

<!-- 経度 -->
<input type="text" name="long" id="long">
<!-- 経度 -->

<a href="javascript:void(0);" onclick="return addressToLatLong()">
    住所から経度緯度取得
</a>
<a href="javascript:void(0);" onclick="return latLongToMap()">
    経度緯度から位置取得
</a>
<div id="map_canvas" style="width: 300px; height: 300px;"></div>

javascript部分

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true&key=xxxxxxxxxxxxxx"></script>
<script>
var map;
var marker;

//GoogleMap初期表示
var init_latlng = {'lat' : '35.681236', 'long' : '139.767125'}; //初期位置は東京駅とする
var latlng = new google.maps.LatLng(init_latlng.lat, init_latlng.long);
var myOptions = {
    zoom: 12, 
    gestureHandling: "greedy" ,
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    "streetViewControl": false, 
    "fullscreenControl": false, 
    "styles": false, 
    "disableDoubleClickZoom": false, 
    "mapTypeControl": false, 
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mapData = { 'x':init_latlng.lat, 'y':init_latlng.long };

//マーカー設置
makeMarker(mapData);

//マーカー作成用関数
function makeMarker( mapData ){
    marker = new google.maps.Marker({
        position : new google.maps.LatLng(mapData.x,mapData.y), 
        map: map, 
    });
}

//住所から経度緯度取得
function addressToLatLong () { 
    var address = $('#address').val();

    if( !address ){
        alert('住所をご入力ください。');
        return false;
    }

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        address: address
    }, function( results, status ){
        if( status == google.maps.GeocoderStatus.OK ){
            $('#lat').val(results[0].geometry.location.lat());
            $('#long').val(results[0].geometry.location.lng());

            marker.setMap(null);
            mapData = { 'x':results[0].geometry.location.lat(), 'y':results[0].geometry.location.lng() };
            makeMarker(mapData);
            map.panTo(new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()));

            return true;
        } else {
            alert('住所が正常に取得できませんでした。');
            return false;
        }
    });
}

//経度緯度からマップ位置取得
function latLongToMap(){
    var lat = $('#lat').val();
    var long = $('#long').val();

    if( !lat || !long ){
        alert('経度及び緯度をご入力ください。');
        return false;
    }

    marker.setMap(null);
    mapData = { 'x':lat, 'y':long };
    makeMarker(mapData);
    map.panTo(new google.maps.LatLng(lat,long));

}
</script>

表示位置の移動

古いマーカーを削除して新しいマーカーを設置するのは過去記事を見てなんとかなったけど、新しいマーカーの表示位置に移動するというのに少し詰まった。

調べたところmap.panToという関数で指定の座標へ移動できた。割と使いどころが多そうな関数なので覚えておきたいところ。