jawj / OverlappingMarkerSpiderfier

Deals with overlapping markers in Google Maps JS API v3, Google Earth-style
http://blog.mackerron.com
836 stars 238 forks source link

Unspiderfy occurs on modal click (VueJS, Cluster and OMS) #152

Open KoderMAL opened 6 years ago

KoderMAL commented 6 years ago

Hi there, I'm using vue2-google-maps with Clusterer and OverlappingMarkerSpiderfier.

Expected behaviour: Markers are staying spiderfied all the time

Current Behaviour: On zoomLevel 10, overlapping markers are spiderfied smoothly. When i click on one of the markers, a custom info-window opens, but when i click inside the info-window, the markers unspiderfies instantly. I have to click again on the map so they go spiderfied.

Code snippet:

    <GmapMap ref="map" :center="{lat: 47.2587, lng: 2.2818}" :zoom="6">
      <GmapCluster :maxZoom="10" :zoomOnClick="true">
          <GmapMarker ref="marker"
                      :key="index"
                      v-for="(sh, index) in houses"
                      :position="{lat:sh.house.latitude,lng:sh.house.longitude}"
                      @click="displayInfoWindow(sh)" />
      </GmapCluster>
    </GmapMap>
mounted() {
      VueGoogleMaps.loaded.then(() => {
          const options = { legWeight: 3, minZoomLevel: 10, keepSpiderfied: true, minNudgeZoomLevel: 10, nudgeRadius: 2, markersWontMove: true, markersWontHide: true}
          const Spiderfier = require('overlapping-marker-spiderfier')
          this.oms = new Spiderfier(this.$refs.map.$mapObject, options)
          this.fillOms()
        })
    },
methods: {
    fillOms () {
      this.$_.each(this.$refs.marker, (marker) => this.oms.addMarker(marker.$markerObject))
    },
}