メニュー

E-Mail
xml


ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索
緯度経度から住所を取得

入力された緯度、経度から住所を取得します。

要点だけ説明すると、、

○ 住所を取得

　入力された緯度、経度をもとに、google.maps.LatLngを生成します。
　google.maps.Geocoderを生成し
　geocodeメソッドにLatLngを渡します。


//入力された緯度、経度
var lat = document.getElementById("lat").value;
var lng = document.getElementById("lng").value;


//geocodeに緯度、経度を渡して、住所を取得
var myLatlng = new google.maps.LatLng(lat, lng);    

var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': myLatlng}, function(res, state) {

    //取得に成功
    if (state == google.maps.GeocoderStatus.OK) {    

    //取得に失敗
    } else {

    }
}



○ 住所の表示

　複数の結果が返ってくるので、全て表示します。
　formatted_addrで整形された住所を取得できます。


var html_str = "";

for (i=0; i<results.length;i++) {
    html_str += results[i].formatted_address + '<br>';
}


○ 作ったサンプルサイトは、こちらです。

○ コードは、下記。


<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Map API V3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

var map;

function initialize() {

    var myLatlng = new google.maps.LatLng(35.681382, 139.766084);

    var options = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById("map"), options);
}

function getAdd() {

    //入力された緯度、経度
    var lat = document.getElementById("lat").value;
    var lng = document.getElementById("lng").value;


    //geocodeに緯度、経度を渡して、住所を取得
    var myLatlng = new google.maps.LatLng(lat, lng);    
    var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': myLatlng}, function(results, state) {

        //取得に成功した場合
        if (state == google.maps.GeocoderStatus.OK) {

            //入力さらた緯度、経度を中心にマップを表示
            map.setCenter(myLatlng);
            
            var marker = new google.maps.Marker({
                map: map,
                position: myLatlng
            });
            
            //情報窓に住所を表示
            
            var html_str = "";
            
            for (i=0; i<results.length;i++) {
                html_str += results[i].formatted_address + '<br>';
            }
            var infowindow = new google.maps.InfoWindow({
                content: html_str
            });
            
            infowindow.open(map,marker);

        //失敗したらアラート
        } else {
            alert("失敗しました、、、" + status);
        }
    });
}

</script>
</head>
<body onload="initialize()">
<div>
緯度、経度を入力して、検索してください。<br>
緯度：<input id="lat" type="textbox" style="width:120px" value="35.681382">
経度：<input id="lng" type="textbox" style="width:120px" value="139.766084">
<input type="button" value="検索" onclick="getAdd()">
</div>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.