소개

복수의 마커를 설치해, 그 중앙을 표시하면 문자로 해도 이해하기 어렵습니다만 아래와 같은 이미지입니다.



위 은 3개의 사진에 묶는 위도 경도를 바탕으로 마커를 설치하여

설치한 3점의 마커가 지도에 들어가도록 빠듯하게 확대해 표시하게 되어 있습니다.

전제

Laravel 버전 5.6

Google Maps Api 등록

구현

HTML

서버 측은 Laravel을 사용합니다.

데이터 전달은 Vue.js의 사용자 지정 지시문을 사용합니다.

<div id="map" v-photos="{{$photos}}"></div>

자바스크립트

사용자 지정 지시문을 활용하여 데이터를 받습니다.
mounted() 내에서 Google Map을 초기화합니다.

그런 다음 위도 경도를 기준으로 google.maps.Marker() 및 bounds.extend()를 사용하여 마커를 설치합니다.

마지막으로 map.fitBounds() 를 이용하여 여러 마커의 중앙을 좋은 느낌으로 표시시킵니다.

Vue.directive('photos', {
  bind: function (el, binding, vnode) {
    vnode.context.photos = binding.value;
  }
});

new Vue({
  el: '#wrapper',
  mounted() {
    this.map = new google.maps.Map(document.getElementById('map'));
    let bounds = new google.maps.LatLngBounds();
    for (let i = 0; i < this.photos.length; i++) {
      const marker = new google.maps.Marker({
        position: {
          lat: this.photos[i]['lat'],
          lng: this.photos[i]['lng']
        },
        map: this.map
      });
      bounds.extend(marker.position);
    }
    this.map.fitBounds(bounds);
  },
  data() {
    return {
      map: {},
      marker: null,
      photos: []
    }
  }
});

끝에

map.fitBounds() 를 사용하면 조금 짜증이 됩니다만, 이것은 Google Map의 확대 버튼등에 쓰지 않게 해 주기 때문이라고 합니다.

끄고 싶다