新規投稿
フォローする

Googleマップを新しいウィンドウに表示する

 

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

カレンダー形式の一覧のヘッダーに日付入力欄とボタンを設置し、

日付を選択し、ボタンをクリックすると、

別ウィンドウで、入力日付に登録されたレコードの住所をすべてピンで打ったGooglemapが表示したいです。

 

現在別ウィンドウを開き、入力日付に登録されたレコードの住所の緯度経度を表示するまで実装できました。

緯度経度の表示ではなく、緯度経度にピンを打った地図を表示する、というところがうまく実装できていません。

 

下記、コードとなります。

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

(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 = 'map';

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

        var parentele = parenteles[0];

        parentele.insertBefore(mapBtn, ele.nextSibling);

        parentele.insertBefore(mapDate, ele.nextSibling);

        //ボタンクリックのイベント

        var myWindow;

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

            //日付フォームの日付を取得

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

            var lat = [];

            var lng = [];

            var recno = [];

            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)); // 経度

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

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

                        }

                    }

                }

            }

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

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

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

            // center: _.Ee {lat: ƒ, lng: ƒ}

            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 = [];

            var m_latlng = [];

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

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

                        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|'

                                + recno[i] + '|FF8060|000000'

                        });

                    }

                }

            }

            myWindow = window.open("", "myWindow", "width=200,height=100");

            myWindow.document.write(m_latlng);

        }

    });

})();
下記、上記コードでボタンクリック後の画面となります。
 

緯度経度ではなく、下記図の緯度経度でポイントを打った箇所の地図がウィンドウに表示されるのが理想です。

 

以上、よろしくお願いします。

0

6件のコメント

Avatar
koichi

関石さん

こんにちは。

 

あまり納得のいく形ではないのですが、ご参考までです。

 

新規ウィンドウにdivタグを作り、そこにmapが生成されるようにします。

ただ、これだけですと表示されません。

 

mapのHTMLが生成されると、divタグに「position: relative;」が付きます。

これを外さないと地図が表示されません。

 

以下を記述していますが、即時実行するとmapが生成にラグがあるためか外せませんので

setTimeoutで1秒待って実行してます。

myWindow.document.getElementById('map').style.position = "";

 

// 新規ウィンドウ起動
myWindow = window.open("", "myWindow", "width=500, height=500");
myWindow.document.write("<div id='map'></div>");

// 地図の要素を定義します
var map = new google.maps.Map(myWindow.document.getElementById('map'), opts);
var marker = [];
var m_latlng = [];

// 緯度・経度をもとに、地図にポインタを打ち込みます
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]);
            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|' + recno[i] + '|FF8060|000000'
            });
        }
    }
}

// 「position: relative」を外さないと地図が表示されないがラグが必要のため1秒後に実行
setTimeout(() => {
    myWindow.document.getElementById('map').style.position = "";
}, 1000);
koichiにより編集されました
1
Avatar
関石

koichiさま

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

下記エラーが表示され、地図の表示に至りませんでした。

エラーの解消ができなかったので、またコミュニティに投稿してみたいと思います。

以上、よろしくお願いします。

0
Avatar
koichi

ご確認いただきありがとうございます。

書き方が悪かったですが、「// 地図の要素を定義します」のコメントより上は、元々のコードが全て必要です。

以下のコードなど。

 

上記以外は変更しておりませんので

https://maps.googleapis.com/maps/api/js?v=3&key=***」はアプリのJavsScriptにURL設定で問題ありません。

 

// ポイントする座標を指定します
var point = new google.maps.LatLng(lat[0], lng[0]);

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

koichiさま

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

すみません、もともとのコードも記載していたのですが、解消できませんでした。

今回の投稿とは別原因になるかと思いましたので、下記コミュニティでまた投稿させていただきました。

https://developer.cybozu.io/hc/ja/community/posts/8693691270297-Google%E3%83%9E%E3%83%83%E3%83%97%E3%82%92%E6%96%B0%E3%81%97%E3%81%84%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B

 

以上、よろしくお願いします。

0
Avatar
koichi

そうだったのですね。

新規投稿のコードに「opts」の変数定義の記載が無かったように拝見しましたので

一つ前の投稿をしておりましたが、記載されていてエラーでしたら別の原因がありそうですね。

本投稿はここまでの回答といたします。

0
Avatar
関石

koichiさま

ご教授いただいたにもかかわらず、思うように確認できず申し訳ございませんでした。

ご対応ありがとうございました。

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