新規投稿
フォローする

GoogleMapsAPI 郵便番号でピンを立てる&住所にピンを立てる 片方を実行するともう片方が実行されない

お世話になっております。

 

kintoneのカレンダー形式の一覧画面にGoogleMapを表示しています。

・郵便番号フォームに入力→ボタンクリック→入力した郵便番号にピンを立てる

・日付フォームに日付入力→入力した日付に登録されているレコードの住所にピンを立てる

(参考:https://developer.cybozu.io/hc/ja/articles/202640950-%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)

下記コードですと、どちらかを実行すると、片方が実行されなくなります。

アドバイスをいただければ幸いです。

/*

* 一覧画面に地図を表示するサンプルプログラム

* Copyright (c) 2013 Cybozu

*

* Licensed under the MIT License

*/

(function () {

    "use strict";

    // API キー

    var api_key = 'key';

    // ヘッダに要素を追加します

    function load(src) {

        var head = document.getElementsByTagName('head')[0];

        var script = document.createElement('script');

        script.type = 'text/javascript';

        script.src = src;

        head.appendChild(script);

    }

    // 緯度、経度を空にします

    function emptyLatLng(event) {

        // event よりレコード情報を取得します

        var rec = event['record'];

        // 保存の際に緯度、経度を空にします

        rec['lat']['value'] = '';

        rec['lng']['value'] = '';

        return event;

    }

    // Google Map を Load します

    function loadGMap() {

        // document.write を定義します

        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);

    }

    // 地図を「住所」フィールドの下に表示します

    // 緯度・経度がない場合は、住所をもとに緯度・経度を算出し、

    // フィールドに値を入れた後、レコードを更新します

    function setLocationDetail(event) {

        省略

    }

    // 地図を一覧画面のメニュー下のスペースに表示します

    function setLocationIndex(event) {

        var lat = [];

        var lng = [];

        var recName = [];

        var recTime = [];

        var day = [];

        var rec, i;

        // レコード情報を取得します

        rec = event['records'];

        let recs = Object.keys(rec);

        // 一覧に表示されているすべてのレコードの緯度・経度と名前を配列に格納します

        for (i = 0; i < recs.length; i += 1) {

            let index = recs[i];

            for (let j = 0; j < rec[index].length; j += 1) {

                if (rec[index][j].lat.value !== undefined && rec[index][j].lng.value !== undefined) {

                    if (rec[index][j].lat.value.length > 0 && rec[index][j].lng.value.length > 0) {

                        lat.push(parseFloat(rec[index][j].lat.value)); // 緯度

                        lng.push(parseFloat(rec[index][j].lng.value)); // 経度

                        recName.push(rec[index][j].name.value); // 名前

                        day.push(rec[index][j].day.value); // 宅配日

                        recTime.push(rec[index][j].time.value); // 希望時間帯

                    }

                }

            }

        }

        // 一覧の下部部分にあるスペース部分を定義します

        var elAction = document.getElementsByClassName('contents-bottommenu-gaia')

        elAction = elAction[0];

        // すでに地図要素が存在する場合は、削除します

        // ※ ページ切り替えや一覧のソート順を変更した時などが該当します

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

        if (check.length !== 0) {

            elAction.removeChild(check[0]);

        }

        // 地図を表示する要素を定義し、スペース部分の要素に追加します

        var mapEl = document.createElement('div');

        mapEl.setAttribute('id', 'map');

        mapEl.setAttribute('name', 'map');

        mapEl.setAttribute('style', 'width: auto; height: 700px; margin-right: 30px; border: solid 2px #c4b097');

        elAction.appendChild(mapEl);

        var point = new google.maps.LatLng(lat[0], lng[0]);

        // 表示する地図の設定を行います

        var opts = {

            zoom: 15,

            center: point,

            mapTypeId: google.maps.MapTypeId.ROADMAP,

            scaleControl: true,

            title: 'target'

        };

        // 地図の要素を定義します

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

        var marker = [];

        var circle = [];

        var circle2 = [];

        var m_latlng = [];

        // 日付フォームの値が変更されたら実行

        document.getElementById("mapDate").onchange = function () {

            // daylat,daylng 入力した日付の緯度経度

            var dayLat = [];

            var dayLng = [];

            // 前回打った円を削除

            if (circle.length > 0) {

                for (var i = 0; i < circle.length; i++) {

                    if (circle[i] !== undefined) {

                        circle[i].setMap(null);

                    }

                }

            }

            // 前回打ったポイントを削除

            if (marker.length > 0) {

                for (var i = 0; i < marker.length; i++) {

                    if (marker[i] !== undefined) {

                        marker[i].setMap(null);

                    }

                }

            }

            var date = document.getElementById("mapDate").value;

            // ポインタの周りの円

            var pntCircle = new google.maps.LatLng(lat[0], lng[0]);

            // 緯度・経度をもとに、地図にポインタを打ち込みます

            for (i = 0; i < lat.length; i += 1) {

                if (isNaN(lat[i]) === false && isNaN(lng[i]) === false) {

                    if (date === day[i]) {

                        m_latlng[i] = new google.maps.LatLng(lat[i], lng[i]);

                        pntCircle[i] = new google.maps.LatLng(lat[i], lng[i]);

                        dayLat.push(lat[i]);

                        dayLng.push(lng[i]);

                        // 希望時間帯 AM黄色 PM水色

                        if (recTime[i] == "AM") {

                            // ポインタ

                            marker[i] = new google.maps.Marker({

                                position: m_latlng[i],

                                map: map,

                                // ポインタのアイコンは Google Charts を使用します

                                icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|'

                                    + recName[i] + '|ffff33|000000'

                            });

                            // 円

                            circle[i] = new google.maps.Circle({

                                center: pntCircle[i],       // 中心点(google.maps.LatLng)

                                fillColor: '#ffa500',   // 塗りつぶし色

                                fillOpacity: 0.25,       // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明)

                                map: map,             // 表示させる地図(google.maps.Map)

                                radius: 5000,          // 半径(m) 15分圏内&30km/h想定

                                strokeColor: '#ffa500', // 外周色

                                strokeOpacity: 1,       // 外周透過度(0: 透明 ⇔ 1:不透明)

                                strokeWeight: 1         // 外周太さ(ピクセル)

                            });

                        } else {

                            // ポインタ

                            marker[i] = new google.maps.Marker({

                                position: m_latlng[i],

                                map: map,

                                // ポインタのアイコンは Google Charts を使用します

                                icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=edge_bc|'

                                    + recName[i] + '|33ffff|000000'

                            });

                            // 円

                            circle[i] = new google.maps.Circle({

                                center: pntCircle[i],       // 中心点(google.maps.LatLng)

                                fillColor: '#0000ff',   // 塗りつぶし色

                                fillOpacity: 0.25,       // 塗りつぶし透過度(0: 透明 ⇔ 1:不透明)

                                map: map,             // 表示させる地図(google.maps.Map)

                                radius: 5000,          // 半径(m) 15分圏内&30km/h想定

                                strokeColor: '#0000ff', // 外周色

                                strokeOpacity: 1,       // 外周透過度(0: 透明 ⇔ 1:不透明)

                                strokeWeight: 1         // 外周太さ(ピクセル)

                            });

                        }

                    }

                }

            }

            // マーカーがいい感じに表示できるよう調整

            map.fitBounds(new google.maps.LatLngBounds(

                // sw

                {

                    lat: Math.min(...dayLat),

                    lng: Math.min(...dayLng)

                },

                // ne

                {

                    lat: Math.max(...dayLat),

                    lng: Math.max(...dayLng)

                }

            ));

            // 縮尺が13以下の場合、縮尺を13にする

            var listener = google.maps.event.addListener(map, "idle", function () {

                if (map.getZoom() < 13) map.setZoom(13);

                google.maps.event.removeListener(listener);

            });

        };

    }

    // Google Map がロードされるまで待機します

    function waitLoaded(event, mode, timeout, interval) {

        setTimeout(function () {

            var setTimeout = timeout - interval;

            if ((typeof google !== 'undefined')

                && (typeof google.maps !== 'undefined')

                && (typeof google.maps.version !== 'undefined')) {

                if (mode === 'detail') { // 詳細画面の場合

                    setLocationDetail(event);

                } else if (mode === 'index') { // 一覧画面の場合

                    setLocationIndex(event);

                }

            } else if (setTimeout > 0) { // ロードされるまで繰り返します

                waitLoaded(event, mode, setTimeout, interval);

            }

        }, interval);

    }

    // 詳細画面を開いた時に実行します

    function detailShow(event) {

        loadGMap();

        waitLoaded(event, 'detail', 10000, 100);

    }

    // 一覧画面を開いた時に実行します

    function indexShow(event) {

        loadGMap();

        waitLoaded(event, 'index', 10000, 100);

    }

    // 一覧画面で編集モードになった時に実行されます

    function indexEditShow(event) {

        var record = event.record;

        // 住所フィールドを使用不可にします

        record['住所']['disabled'] = true;

        return event;

    }

    // 登録・更新イベント(新規レコード、編集レコード、一覧上の編集レコード)

    kintone.events.on(['app.record.create.submit',

        'app.record.edit.submit',

        'app.record.index.edit.submit'], emptyLatLng);

    // 詳細画面が開いた時のイベント

    kintone.events.on('app.record.detail.show', detailShow);

    // 一覧画面が開いた時のイベント

    kintone.events.on('app.record.index.show', indexShow);

    // 一覧画面で編集モードにした時のイベント

    kintone.events.on('app.record.index.edit.show', indexEditShow);

})();

// 日付フォーム、ボタン設置

(function () {

    "use strict";

    kintone.events.on('app.record.index.show', function (event) {

        var ele = document.getElementById("memo");

        // 日付入力欄 要素ノードを作る

        var mapDate = document.createElement('input');

        mapDate.type = 'date';

        mapDate.id = 'mapDate';

        // ボタン 要素ノードを作る

        var mapBtn = document.createElement('input');

        mapBtn.type = 'button';

        mapBtn.id = 'mapBtn';

        mapBtn.value = 'ピン表示';

        // 郵便番号入力欄 要素ノードを作る

        var mapPost = document.createElement('input');

        mapPost.type = 'text';

        mapPost.id = 'mapPost';

        var parenteles = document.getElementsByClassName("calendar-menu-gaia");

        var parentele = parenteles[0];

        parentele.insertBefore(mapDate, ele.nextSibling);

        parentele.insertBefore(mapBtn, ele.nextSibling);

        parentele.insertBefore(mapPost, ele.nextSibling);

        //ボタン押すと入力された郵便番号にピンを表示

        document.getElementById('mapBtn').onclick = function () {

            var mapPostcd = document.getElementById("mapPost").value;

            // 緯度経度を取得→ピン表示

            let latlngMp = getLatLngByZipcode(mapPostcd);

        }

    });

})();

// 郵便番号からLatLngを取得

function getLatLngByZipcode(zipcode) {

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

    var address = zipcode;

    geocoder.geocode({ 'address': 'zipcode ' + address }, function (results, status) {

        setTimeout(() => {

            if (status == google.maps.GeocoderStatus.OK) {

                var latitude = results[0].geometry.location.lat();

                var longitude = results[0].geometry.location.lng();

                alert("Latitude: " + latitude + "\nLongitude: " + longitude);

                // ポイントする座標を指定します

                var point = new google.maps.LatLng(latitude, longitude);

                // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します

                var opts = {

                    zoom: 15,

                    center: point,

                    mapTypeId: google.maps.MapTypeId.ROADMAP,

                    scaleControl: true

                };

                // 地図を表示する要素を呼び出します

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

                //ピン表示

                var marker = new google.maps.Marker({

                    position: point,

                    map: map,

                    title: 'ピン表示'

                });

            } else {

                alert("Request failed.")

            }

            return [latitude, longitude];

        }, 1000)

    });

}
 
 

 

 

0

2件のコメント

Avatar
TO

関石様

どちらかを実行すると、片方が実行できない、というのは、
「日付を入力、Enterしてピンを出すと、その後で郵便番号を入力してボタンをクリックしても何も起きない」
「郵便番号を入力してボタンをクリックしてピンを出すと、その後で日付を入力、Enterしても何も起きない」
この両方が起きている、と解釈して良いですか?
コードを見ると、myDateのonchangeイベントを記述している箇所が気になりますが、ボタンのclickイベントは普通に動きそうに感じました。

また、二つのコードを組み合わせている?のか、即時関数(function () {~})();が二つありますが、整理してひとつにしたほうがよいかもしれません。

 

1
Avatar
関石

TO さま

即時関数(function () {~})();が二つありますが、整理してひとつにしたほうがよいかもしれません。

整理して一つにしようと思います。

ご教授いただきありがとうございました。

 

0
サインインしてコメントを残してください。