JSで配列の取り出し方がわからない

Question

GoogleのGeocoding APIを使用して、日本語で入力をした住所情報からmap上に場所をプロットするような作業を行いました。
マップについては、特に問題なく表示ができたのですが、別件で座標情報だけを抜き取りたいと考えております。

尚、下記のコマンドで全体の情報を確認ができますが、座標(lat 35.0627047)だけを取り出したい場合の取り出し方がわかりません。

console.log(point);

試したコマンド

console.log(point.lat.Scopes[0].d);

このような場合、どのようにオブジェクト名を指定すればいいでしょうか。

JSのコード

/*
 * 地図表示のサンプルプログラム
 * Copyright (c) 2013 Cybozu
 *
 * Licensed under the MIT License
 */

(function() {

    "use strict";
    // API キー
    var api_key = '自分のAPIキー';

    // ヘッダに要素を追加します
    function load(src) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        head.appendChild(script);
    }


    // レコード表示時イベントで住所フィールドの値を利用して地図を表示する
    kintone.events.on('app.record.detail.show', function(event) {

        var timeout = 10 * 1000; // ms
        var interval = 100; // ms

        var check = document.getElementsByName('map_latlng');

        // 住所情報を元に、地図を「住所」フィールドの下に表示します
        function setLocation_address() {

            var locationEl_address = kintone.app.record.getFieldElement('物件所在地');
            if (locationEl_address.length === 0) { return; }

            var check_address = document.getElementsByName('map_address');

            //「map_address」という要素が存在しないことを確認
            if (check_address.length !== 0) { return; }

            // 地図を表示する div 要素を作成します
            var mapEl_address = document.createElement('div');
            mapEl_address.setAttribute('id', 'map_address');
            mapEl_address.setAttribute('name', 'map_address');


            // 「住所」フィールドの要素の下に mapEl_address で設定した要素を追加します
            var elMap = kintone.app.record.getSpaceElement('Map');
            elMap.appendChild(mapEl_address);

            var lat1 = kintone.app.record.getSpaceElement('lat');
            lat1.innerHTML = '<b>ボタンを押しました</b>';


            // Google Geocoder を定義します
            var gc = new google.maps.Geocoder();

            // 「住所」フィールドから値を取得します
            var rec = kintone.app.record.get();
            var addressValue = rec.record.物件所在地.value;

            // Geocoding API を実行します
            gc.geocode({
                address: addressValue,
                language: 'ja',
                country: 'JP'
            }, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {

                    // 地図要素のサイズを指定します
                    mapEl_address.setAttribute('style', 'width: 300px; height: 250px');

                    var point = results[0].geometry.location;
                    var address = results[0].formatted_address;

                    console.log(point);  // ★こちらの出力結果が添付のログ


                    // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
                    var opts = {
                        zoom: 15,
                        center: point,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        scaleControl: true
                    };

                    var map_address = new google.maps.Map(document.getElementById('map_address'), opts);

                    console.log(map_address);

                    // マーカーを設定します
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map_address,
                        title: '太郎'
                    });

                }
            });

        }

      
        // Google Map がロードされるまで待ちます
        function waitLoaded() {
            setTimeout(function() {
                timeout -= interval;
                if ((typeof google !== 'undefined') &&
                    (typeof google.maps !== 'undefined') &&
                    (typeof google.maps.version !== 'undefined')) {
                    setLocation_address(); // 住所をもとに地図を表示
                } else if (timeout > 0) {
                    waitLoaded();
                } else {
                    // abort
                }
            }, interval);
        }
        if (check.length === 0) {

            // enable google maps to call document.write after onload event.
            var nativeWrite = document.write;
            document.write = function(html) {
                var m = html.match(/script.+src="([^"]+)"/);
                if (m) {
                    load(m[1]);
                } else {
                    nativeWrite(html);
                }
            };

            // Google Map の API ライブラリをロードします
            load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);

            waitLoaded();

        }
    });

})();

Comments

[m.ts10806]

「試したこと」では何が取れたのでしょう。
１段ずつ試した上ですか？

[tomato01]

ご連絡ありがとうございます。

console.log(point.lat); までは取得できたのですが、それ以降でconsole.log(point.lat.Scopes[0].d);をした場合、下記のエラーが出ました。

Uncaught TypeError: Cannot read property '0' of undefined
at download.do?app=29&contentId=3461&jsType=DESKTOP&hash=b5736caa481dff9f9a7d3d3e5d131212e4420296:80
at geocoder.js:5
at geocoder.js:2
at mba (geocoder.js:2)
at Ct.d [as o] (geocoder.js:2)
at Object.c [as _2j14gm] (common.js:96)
at GeocodeService.Search?4s滋賀県大津市坂本2&7sUS&9sja&callback=_xdc_._2j14gm&key=AIzaSyByzgxnowhKHE9Rjiv68EPj0nM1zBSMZp0&token=64966:1

[m.ts10806]

f()
はメソッドというのを覚えといたら良いですね

[tomato01]

ご回答ありがとうございます。メソッドの場合ですと、cosole.logでは取り出せない感じでしょうか。

[m.ts10806]

いえ、違います。
メソッドの返却値から辿れます

[tomato01]

ご回答誠にありがとうございます。
申し訳ございません、私の知識不足でf()が入ってくる場合でのconsole.logの取得方法がわかりません。その場合は、下記の書き方がどのようにかわりますでしょうか。
console.log(point.lat.Scopes[0].d);

Answer 1

            var location = results[0].geometry.location;
            var lat = location.lat();
            var lng = location.lng();
            var latlng = {lat: lat, lng: lng};
            map.setCenter(latlng);

【GoogleMapAPIv3でよく使うやつメモ。 - Qiita】
https://qiita.com/niiyz/items/3f1ad1e0b04889db1a91

Comments

[tomato01]

ご回答ありがとうございます。
教えていただいた方法でlatが取得できました。
どうもありがとうございました。