BingMaps：住所から緯度経度を取得（GeoCode）

#BingMaps：住所から緯度経度を取得（GeoCode）


##【GeoCode】
ここでのGeoCodeの解説はBingMapsのコードを解説するための文章です。
Geocodeingとは住所から緯度経度を取得する方法です。
ReverseGeocodeingは逆の緯度経度から住所を割り出す方法です。
今回はGeocodeingのサンプルコードを紹介します。


##【今回のサンプルの動作】
テキストボックス**「住所」検索**できるようにしています。
結果、h1要素にJSONで表示するようにしています。
<img width="755" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3130343533302f62333264643839392d616465322d623534302d336266642d6230616562323065393630352e706e67.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/0828a83e-cb06-f7b0-1eb2-0f8417896aa3.png">


##【HTMLとJavascript２つに分割して紹介】
####HTML
```html:geocode.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>BingMaps GO! : Geocode Example</title>
    <style>html,body,#main{height:100%;}body{padding:0;margin:0;background:#333;}h1{padding:0;margin:0;font-size:100%;color:white;}p{margin:0}</style>
</head>
<body>

<!-- MAP[START] -->
<header>
    <h1 id="h1">BingMaps GO! (住所検索 → 緯度経度取得）</h1>
    <p><input type="text" id="from" value="Seattle"> <button id="get">検索</button></p>
</header>
<div id="main">
    <div id="myMap" style='width:100%;height:90%;'></div>
</div>
<!-- MAP[END] -->

```


####JavaScript
・BingMapsControllerを読み込んでいる、最初の外部ファイル読み込みの 
[*** Your Map Key　***]の箇所を、自身が取得したBingMapsKeyと変えてください。


```javascript:geocode.html
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[*** Your Map Key　***]' async defer></script>

<script>
    /**
     * BingMapsControllerを読み込んだらGetMap()を実行
     * @constructor
     */
    let map;             //MapObject用
    let searchManager;   //SearchObject用
    function GetMap() {
        //Map生成
        map = new Microsoft.Maps.Map('#myMap', {
            zoom: 15,
            mapTypeId: Microsoft.Maps.MapTypeId.aerial
        });
        //検索モジュール指定
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
            //searchManagerインスタンス化（Geocode,ReverseGeocodeが使用可能になる）
            searchManager = new Microsoft.Maps.Search.SearchManager(map);
            //Geocode：住所から検索
            geocodeQuery(document.getElementById("from").value);
        });
    }

    /**
     * 検索ボタン[Click:Event]
     */
    document.getElementById("get").onclick = function(){
        //4.Geocode:住所から検索
        geocodeQuery(document.getElementById("from").value);
    };

    /**
     * 住所から緯度経度を取得
     * @param query [住所文字列]
     */
    function geocodeQuery(query) {
        if(searchManager) {
            //住所から緯度経度を検索
            searchManager.geocode({
                where: query,       //検索文字列
                callback: function (r) { //検索結果を"( r )" の変数で取得
                    //最初の検索取得結果をMAPに表示
                    if (r && r.results && r.results.length > 0) {
                        //Pushpinを立てる
                        const pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                        map.entities.push(pin);
                        //map表示位置を再設定
                        map.setView({ bounds: r.results[0].bestView});
                        //取得た緯度経度をh1要素にJSON文字列にして表示
                        console.log(r.results[0].location);
                        document.getElementById("h1").innerText = JSON.stringify(r.results[0].location);
                    }
                },
                errorCallback: function (e) {
                    alert("見つかりません");
                }
            });
        }
    }

</script>
</body>
</html>

```

##【緯度経度の取得方法】
・ **「//取得た緯度経度をh1要素にJSON文字列にして表示」**コメント箇所の以下2行がGeoCodeでの結果である『緯度経度』を取得＆表示している箇所です。
・**「 r.results[0].location 」**をconsole.logで確認することでデータ取得の内容を確認しています。

##【サンプルコード】
**[『 BingMaps Go!　( https://mapapi.org ) 』](https://mapapi.org)**
のGeocodeカテゴリの『 Geocode（ 住所 → 緯度経度 ） 』をご確認ください！
実際の動作を確認することができます。※コードもまるっとあります。
こちらを見てもらうと早いかも。
<img width="823" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/104530/eecb5e56-e3a2-f9b8-cca4-3c5150d998bc.png">
あれば良いサンプルは随時追加していきます。
※海外からのアクセスと日本では表示しているものが違います。

##今後
今後は上記のようなサンプルコードを増やしていきます。
**[BingMaps GO!](https://mapapi.org)** を宜しくお願いいたします。(^^)