# グーグルマップで地図の移動ができない。

**URL:** <https://community.cybozu.dev/t/topic/6198>\
**Category:** kintone 開発相談\
**Created:** [2022 年 7 月 27 日午前 8:04 UTC](https://community.cybozu.dev/t/topic/6198 "2022-07-27T08:04:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 7 月 27 日午前 8:04 UTC](https://community.cybozu.dev/t/topic/6198/1 "2022-07-27T08:04:24Z")

</div>

&nbsp;

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

Kintone一覧画面から取得したレコードを

グーグルマップにピンを立てて別ウィンドウに表示させています。

地図の移動ができないのですが、

原因をご教授いただければ幸いです。

エラーは吐いておりません。

拡大縮小はできます。

&nbsp;

&nbsp;

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

```
// 日付フォーム、ボタン設置
(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); // 宅配日
                        }
                    }
                }
            }
            // 新規ウィンドウ起動
            myWindow = window.open("", "myWindow", "width=500, height=500");
            myWindow.document.write("<div id='map'></div>");
         
            // ヘッダに要素を追加します
            function load(src) {
                var head = myWindow.document.getElementsByTagName('head')[0];
                var script = myWindow.document.createElement('script');
                script.type = 'text/javascript';
                script.src = src;
                head.appendChild(script);
            }

            // Google Map を Load します
            // document.write を定義します
            var nativeWrite = myWindow.document.write;
            myWindow.document.write = function (html) {
                var m = html.match(/script.+src="([^"]+)"/);
                if (m) { load(m[1]); } else { nativeWrite(html); }
            };
            var point = new google.maps.LatLng(lat[0], lng[0]);
            // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
            var opts = {
                zoom: 15,
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scaleControl: true,
                clickable: true
            };
            // 地図の要素を定義します
            var map = new google.maps.Map(myWindow.document.getElementById('map'), opts);
            var marker = [];
            var m_latlng = [];
            let Centernum = 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]);
                        // 入力日付の一番目のレコードの経度緯度を地図の中心にする
                        if (Centernum === 0) {
                            map.setCenter(m_latlng[i]);
                        }
                        Centernum++;
                        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);
        }
    });
})();

```

&nbsp;

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

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2022 年 7 月 30 日午前 1:09 UTC](https://community.cybozu.dev/t/topic/6198/2 "2022-07-30T01:09:25Z")

</div>

ウィンドウにマップが表示しきれずスクロールバーがあるのが気になります。おそらくはそちらが原因かと思います。

```
            // 新規ウィンドウ起動
            myWindow = window.open("", "myWindow", "width=500,height=500,scrollbars=no");

```

window.openの第3引数でスクロールバーの指定ができます。

また、widthやheightはウィンドウではなくmapのdiv要素に指定した方が良いと思います。

```
          myWindow.document.write("<div id='map' style='width:500px;height:500px'></div>");

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 8 月 1 日午前 9:13 UTC](https://community.cybozu.dev/t/topic/6198/3 "2022-08-01T09:13:18Z")

</div>

[mls-hashimoto](https://community.cybozu.dev/hc/ja/profiles/385013133091-mls-hashimoto)&nbsp;さま

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

ブラウザはchromeを使用しているのですが、chromeではscrollbars=XXが非対応らしく、スクロールバーを非表示にすることができませんでした。

[https://www.sejuku.net/blog/48540](https://www.sejuku.net/blog/48540)

引き続き調べてみたいと思います。

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 9 月 6 日午前 12:52 UTC](https://community.cybozu.dev/t/topic/6198/4 "2024-09-06T00:52:48Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。