googlemaps で地図移動時に中心座標を取得する

2021年12月19日

コード

コードのみメモとして記載しておきます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<template>
    <div>
        <div class="map-container">
            <div class="map-wrapper">
                <div id="map" class="map"></div>
            </div>
        </div>
        <div id="function-container" class="function-container">
            <div class="function-wrapper">
                <div class="function">
                    <div>緯度: {{ this.currentLat }}</div>
                    <div>経度: {{ this.currentLng }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                map: null,
                currentLat: 35.6807944,
                currentLng: 139.7670774,
            }
        },
        mounted (){
            this.initMap();
        },
        methods: {
            initMap: async function () {
                let timer = setInterval(() => {
                    if(window.google){
                        clearInterval(timer);
                        // マップを描画する。
                        this.map = new window.google.maps.Map(document.getElementById("map"), {
                            gestureHandling: 'greedy',
                            mapTypeControl: false,
                            zoomControl: false,
                            streetViewControl: false,
                            center: {lat: this.currentLat, lng: this.currentLng},
                            zoom: 12,
                            clickableIcons: false,
                            fullscreenControl: false,
                        });
                        // マップドラッグ終了時座標を取得する。
                        this.map.addListener("idle", () =>{
                            let latlng = this.map.getCenter()
                            this.currentLat = latlng.lat();
                            this.currentLng = latlng.lng();
                        })
                    }
                }, 500)
            }
        }
    }
</script>